CK for html property editor in React creator app?

[marcziss]

Question: I was trying to use the CK editor just like in this example but ported to React https://surveyjs.io/Examples/Builder/?id=ckeditorpropertyeditor#content-js

in the sample above I get a compile error on CKEDITOR. I was hoping to use either an import statement or make use of widgets.ckeditor(SurveyKo); rather than link to the CDN for ck editor

I have the line widgets.ckeditor(SurveyKo); in the code ported from your sample so I tried to replace

var editor = CKEDITOR.replace(htmlElement); with var editor = (widgets.ckeditor).replace(htmlElement);

I tried a few variations on that theme to no avail.

Any idea what the easiest way to resolve this reference in React ? Thanks, Marc

[tsv2013]

You can't replace

var editor = CKEDITOR.replace(htmlElement);

with

var editor = (widgets.ckeditor).replace(htmlElement);

Because the widgets.ckeditor is a function that initializes the custom widget and CKEDITOR is the 3rd party control - the editor itself.

[marcziss]

Hey @tsv2013 sorry to bug you, but am stumped. I thought based on you response I could import the 3rd party control ckedit and reference it.

I forked the https://github.com/marcziss/surveyjs_react_quickstart and added what looked to be a promising solution, but gave me what seems like ko binding issues. (I don't know knockout so don't know what's going on in this mixed environment)

TypeError: Unable to process binding "foreach: function(){return tabs }" Message: Unable to process binding "ifnot: function(){return collapsed }" Message: Unable to process binding "template: function(){return { name:template,data:data} }" Message: Unable to process binding "template: function(){return { name:$data.htmlTemplate,data:$data.templateObject,afterRender:$data.koAfterRender} }" Message: Unable to process binding "foreach: function(){return editorProperties }" Message: Unable to process binding "template: function(){return { name:'propertyeditor',data:editor,afterRender:$parent.koAfterRenderProperty} }" Message: Unable to process binding "template: function(){return {name:$data.contentTemplateName,data:$data} }"

any idea of a way to make ko and React play nice in this sample? Thanks Marc

[tsv2013]

An error inside the custom property editor can cause an error in the bindings.

As I sayd earlier

var editor = CKEDITOR.replace(htmlElement);

with

var editor = (widgets.ckeditor).replace(htmlElement);

are the completely different things.

The CKEDITOR is the loaded on the page globally (or can be imported) 3rd party control.

The widgets.ckeditor is the initialization function of the custom widget (https://github.com/surveyjs/widgets/blob/master/src/ck-editor.js#L1) - it is not the CKEDITOR itself, it's a function that initializes the wrapper over the CKEDITOR.

That's why your code doesn't work.

If you want to import CKEDITOR in your application you need to find over the web how the CKEDITOR can be impoted into a ReactJS application.

The