This is a migrated thread and some comments may be shown as answers.

How do I get the value of an Editor with HTML markup?

9 Answers 621 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 22 Mar 2019, 12:29 AM
My Editor component is in a form, and I'm trying to serialize the value. How can I get the rich text value (with all the HTML markup included)?

9 Answers, 1 is accepted

Sort by
0
John
Top achievements
Rank 1
answered on 22 Mar 2019, 12:42 AM

I see you can set defaultContent, but that's just the initial value.  binding that to state doesn't seem to work.

https://stackblitz.com/edit/react-gte5sd?file=app/main.js

If you modify the content in the editor and click the Log Value button in this stackblitz example it outputs the original value. There doesn't seem to be an onChange event documented anywhere.

0
John
Top achievements
Rank 1
answered on 22 Mar 2019, 01:15 AM
I also discovered there's an onExecute method where i can dig into the event info, but i'm not finding a non-hacky way of just getting the Editor value.
0
Stefan
Telerik team
answered on 22 Mar 2019, 08:17 AM
Hello, John,

We have made an example that covers this scenario.

Please take a look at it:

https://www.telerik.com/kendo-react-ui-develop/components/editor/content/

The value that is retrieved can be saved in the state as well.

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
John
Top achievements
Rank 1
answered on 22 Mar 2019, 03:17 PM

Thanks Stefan, this is helpful. Thanks for adding that to the documentation. One more thing I'm still trying to do. I'd like to store the value in state automatically on change rather than on a button click event. I'm using the onExecute() callback to attempt that.  I've prepared a stackblitz example.  In this example, each time you make an edit, it does fire my event handler, but it shows the previous value in the Editor's state, not including the change I just made. Is there a better way to go about this?

https://stackblitz.com/edit/react-gte5sd-4cpkbb?file=app/main.js

0
John
Top achievements
Rank 1
answered on 22 Mar 2019, 04:24 PM
It looks like the onExecute is a hook for when the value is about to change.  Is there a reason there isn't a post-change hook on the component (onChange)?
0
John
Top achievements
Rank 1
answered on 22 Mar 2019, 06:10 PM

I did sort of get this to work in a pretty hacky way. This is wrong, as it's a race condition, but it seems to work on a large blob of text with a 1 ms timeout. See this example:

https://stackblitz.com/edit/react-gte5sd-wqi4xs?file=app/main.js

I don't advocate this being the answer.

0
Святослава
Top achievements
Rank 1
answered on 23 Mar 2019, 06:32 AM
Hey stefan thaks for the example link provided by u..It is very much helpful.Thanks again mybkexperience 
0
Stefan
Telerik team
answered on 25 Mar 2019, 09:23 AM
Hello, John,

Thank you for the customized example.

This can be achieved without a promise as the onExecute event has a field that shows if there are any changes:

handleEditorChange = (e) => {
  if (e.transaction.docChanged) {
    const editorValue = EditorUtils.getHtml({ schema: e.state.config.schema, doc: e.transaction.doc }); // Cast as any when TypeScript is used
    this.setState({editorValue});
  }
}

This is the modified version:

https://stackblitz.com/edit/react-gte5sd-tg2man?file=app/main.js

Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
John
Top achievements
Rank 1
answered on 25 Mar 2019, 01:43 PM
That solved the issue for me.  Thanks Stefan!
Tags
General Discussions
Asked by
John
Top achievements
Rank 1
Answers by
John
Top achievements
Rank 1
Stefan
Telerik team
Святослава
Top achievements
Rank 1
Share this question
or