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",
};
}
});
Hello,
You need to use the following code for CKEditor v4:
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