SunEditor | Pure javascript based WYSIWYG html editor | Editor library

You can use a function inside the setToggle function to get the current state value and return the modified value for that state variable.

UPDATE 13-MAY-2021

using state in sun editor will trigger race problem between handleChange() and addTag(), there is a chance the state will be replaced by old state.

To get rid of it, use the sun editor reference to manipulate the content.

For adding new text and place it horizontally instead of vertically, they have a insertHTML() function which will respect the html content without adding new

in the first place.

Updated Code: https://stackblitz.com/edit/react-pqp2iu-axacak?file=index.js

• Create editorRef

You can use input event which is triggered by v-dialog whenever bounded model get updated, means it will get triggered once you open and close the dialog

You must send values from suneditor to textarea, you can do that:

I'm passing a ref variable from parent so when the submit button is clicked he could get the value and save modifications.

If all you need to access is the value, let's pass down a callback instead. We'll call it onSumbit and it will be a function which takes the string value from the SunEditor component.

In order to have access to the current edited value, I am using a local state in the TranslationArea component and updating that state through the editor's onChange method. Then when the submit button is clicked, I call onSubmit with the value of content from the local state. (There might be another way to do this but I'm not familiar with SunEditor).

The TranslationArea component looks like this:

OK, so I spent some time thinking about it and it occurred to me that the editor itself is where you render the text. It then made sense that if you want to show documents created in SunEditor, you put the contents inside it and hide the toolbar if you're going for a read-only view of the data.

Here's a snipped from the render method in my component that does that: