Override the current Property Editor with your own

[andrewtelnov]

At the current moment "html" Property Editor is Text Area.
It will be nice optionally change it on a popular html Editor.

[andrewtelnov]

Here is the code of using CKEditor instead of textarea for "html" property editor:

        function afterRender_CkEditor(modalEditor, htmlElement) {
            var editor = htmlElement.editor; 
            if(!editor) {                
                var editor = CKEDITOR.replace(htmlElement);
                htmlElement.editor = editor;
                htmlElement.editorName = editor.name;
                editor.on('change', function() { 
                    modalEditor.editingValue = editor.getData();
                });
                 // handle disposal (if KO removes by the template binding)
                ko.utils.domNodeDisposal.addDisposeCallback(htmlElement, function () {
                    if(!htmlElement.editorName) return;
                    var instance = CKEDITOR.instances[htmlElement.editorName]; 
                    if (instance){ 
                        instance.removeAllListeners();
                        CKEDITOR.remove(instance); 
                    }
                });       
            }
            editor.setData(modalEditor.editingValue);
         }
        SurveyEditor.SurveyPropertyModalEditor.registerAfteRender("html", afterRender_CkEditor);
        var editor = new SurveyEditor.SurveyEditor("editor", {});

UPD: Do not happy with the current API.

[andrewtelnov]

Here is the updated API:

var CkEditor_ModalEditor = {
    afterRender: function(modalEditor, htmlElement) {
        var editor = CKEDITOR.replace(htmlElement);
        editor.on('change', function() { 
            modalEditor.editingValue = editor.getData();
        });
        editor.setData(modalEditor.editingValue);
    },
    destroy: function(modalEditor, htmlElement) {
        var instance = CKEDITOR.instances[htmlElement.id]; 
        if (instance){ 
            instance.removeAllListeners();
            CKEDITOR.remove(instance); 
        }
    }
};
SurveyEditor.SurveyPropertyModalEditor.registerCustomWidget("html", CkEditor_ModalEditor);
var editor = new SurveyEditor.SurveyEditor("editor", {});

It is clean now.

[Prakashkhadka7]

@andrewtelnov What about registering this property in survey creator V2.