Search code examples
databasenext.jstiptap

TIPTAP editor, uploading info to database with nextjs


I have installed the rich text editor TIPTAP. I am trying to update the data to the database but it doesn't upload any info. I am changing the following textarea(which works) to TIPTAP richtext. <textarea className="form form-control" value={formState.description} onChange={handleInputChange} id="description" cols="30" rows="10" name="description" placeholder={!language ? 'description' : 'description'} style={{ marginBottom: '5vh' }} ></textarea>

I have done it like this: `<TipTap value={formState.description} onChange={handleInputChange} id="description" name="description" placeholder={!language ? 'description' : 'description'} setValue={setFormState.description} /> ``

The TIPTAP component looks like this: const TipTap = ({ setValue}) => { const editor = useEditor({ extensions: [StarterKit, Underline, ListItem, TextStyle], content: `,

       onUpdate: ({ editor }) => {
      const json = editor.getJSON();
        setValue(json);
        },
        });

       return (
        <div className="text-editor">
       <MenuBar editor={editor} />
       <EditorContent editor={editor} name={name} value={value} />
      </div>
      );
      };
     export default TipTap;`  

Any ideas?


Solution

  • Did you try getHTML function?

    onUpdate() {
          setContentEditor(editor?.getHTML() || '');
        },