sensenet icon indicating copy to clipboard operation
sensenet copied to clipboard

LongText field megfelelő TipTap editorral

Open marosvolgyiz opened this issue 10 months ago • 1 comments

LongText field esetén legyen lehetőségünk TipTap-et használni. A TipTap-et egészítsük ki HTML kód (Raw) szerkesztővel.

A field-en, határozható meg hogy milyen editorral működjön a longtext: image.png

Fieldhez szükséges beállítások settings-ben tárolódjanak.

marosvolgyiz avatar Apr 15 '24 11:04 marosvolgyiz

tudunk -e :

  • elszakadni a Richtext fieldtől? és/vagy a tip-tap-es json-től
  • csináljunk-e raw html szerkesztésre alkalmas kapcsolót: import React, { useState } from 'react'; import { useEditor, EditorContent } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit';

const TiptapEditor = () => { const [isHtmlView, setIsHtmlView] = useState(false); const editor = useEditor({ extensions: [ StarterKit, ], content: '

Hello World!

', });
const toggleView = () => {
    setIsHtmlView(!isHtmlView);
};

return (
    <div>
        <button onClick={toggleView}>
            {isHtmlView ? 'Switch to Editor View' : 'Switch to HTML View'}
        </button>
        {isHtmlView ? (
            <textarea
                value={editor.getHTML()}
                onChange={(e) => editor.commands.setContent(e.target.value)}
                style={{ width: '100%', height: '150px' }}
            />
        ) : (
            <EditorContent editor={editor} />
        )}
    </div>
);

};

export default TiptapEditor;

  • vagy csináljunk-e TinyMCE alapú editort?

marosvolgyiz avatar Apr 15 '24 12:04 marosvolgyiz