Hi,
I was trying to include a custom rich text editor for the HTML question in SurveyJS. The end goal being allowing users to use rich text editor for simple HTML tasks and a code based editor for the more complex ones.
To achieve this I introduced a property editorMode to the HTML question and depending on what it was set to the editor would display either a full fledged rich text editor or a code editor. I also gave the rich text editor widget, the ability to control this property via
i. setting it directly on the question object being passed
ii. setting it via the question.setPropertyValue method
However I notice that neither of those seem to be working. Is there some thing I am missing here?
JavaScript// registerEditor.js
const widget = {
// ...name, icon etc.
init() {
Form.Serializer.addProperty(widgetName, {
name: "editorMode",
displayName: "Which editor to display",
type: "string",
choices: [
{value: "html", text: "HTML Editor"},
{value: "rich", text: "Rich Text Editor"}
],
default: "rich",
category: "general",
})
}
afterRender(q, el) {
ReactDOM.render(
// The text editor is supposed to have controls to set the html content as well as an extra property editorMode
// which determines whether the editor renders a rich text editor or a code editor
// however the toggle for the mode doesn't seem to be persisting in the serialised form JSON
<MyTextEditor question={question} intitialValues={} />
)
}
}
JavaScript// MyTextEditor.js inside the editor react component
const setMode = (newModeString) => {
question.setPropertyValue("editorMode", newModeString);
question.editorMode = newModeString;
_setMode(newModeString);
};
To attempt to get around this I tried setting the editorMode
property from the property grid, however on doing so I realised that on trying to update the editorMode (from the property grid), while it would be updated in the question JSON but it wouldn't show up in the react component in spite of me attaching event handlers with question.registerFunctionOnPropertyValueChanged
I am wondering what I am doing wrong here and how do I achieve what I am looking out for.