Question T13011
Visible to All Users

CKEditor for creator V2

created 2 years ago

Hi

How can I customize the ckeditor in survey creator V2? In version 1, we were able to fully customize the toolbar and dialog.

I tried using the following code to customize the toolbar but it doesn't work

JavaScript
// CKEditor var ckEditor = Survey.CustomWidgetCollection.Instance.getCustomWidgetByName("editor"); // Hide from toolbox ckEditor.showInToolbox = false; ckEditor.afterRender = ckEditor.widgetJson.afterRender = function (question, el) { var name = question.inputId; CKEDITOR.editorConfig = function (config) { config.language = userLanguage; config.height = question.height; config.toolbarCanCollapse = true; config.toolbar = [ 'bold', 'italic', '|', 'undo', 'redo' ] }; el.name = name; if (CKEDITOR.instances[name]) { CKEDITOR.instances[name].removeAllListeners(); CKEDITOR.remove(CKEDITOR.instances[name]); } var editor = CKEDITOR.replace(el); CKEDITOR.instances[name].config.readOnly = question.isReadOnly; var isValueChanging = false; var updateValueHandler = function () { if (isValueChanging || typeof question.value === "undefined") return; editor.setData(question.value); }; editor.on("change", function () { isValueChanging = true; question.value = editor.getData(); isValueChanging = false; }); question.valueChangedCallback = updateValueHandler; question.readOnlyChangedCallback = function () { if (question.isReadOnly) { editor.setReadOnly(true); } else { editor.setReadOnly(false); } }; updateValueHandler(); } // Register CKeditor widget SurveyCreatorCore.PropertyGridEditorCollection.register( { fit: function (prop) { return prop.type == "html"; }, getJSON: function (obj, prop, options) { return { type: "editor", }; } });
Comments (1)

    Hello,
    You need to use the following code for CKEditor v4:

    JavaScript
    const config = CKEDITOR.instances[name].config; config.readOnly = question.isReadOnly; config.toolbarCanCollapse = true; //This code doesn't work //config.toolbar = [ 'bold', 'italic', '|', 'undo', 'redo' ]

    Please refer to CKEditor documentation for toolbar customization options.

    Thank you,
    Andrew
    SurveyJS Team