9 Answers, 1 is accepted
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.
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
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
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.
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