configuring CKEditor.

Webix JS
#1

Hi Maksim, wondering if you have an example of how to customize CKEditor, ie: chose toolbar items, make it editable/non-editable.

Thanks

#2

Figured out the answer by looking at the ckeditor.js file in the master components directory.

It looks like webix sets ‘toolbar’ and ‘borderless’ as webix custom component defaults.
Therefore to change these, you do so directly on the object literal defining the editor view.

ie: to have no toolbar:

{
    view    : "ckeditor",
    height  : 500,
    width   : 700,
    toolbar : []
}

It seems that webix names the first ckeditor: “cke_1”

So, for other properties:

for (var k in instances) {
  var v = instances[k]
  if (v.id == 'cke_1') {
     // v is the editor with id: cke_1
     v.readOnly = true
   }
}```  
Once you have the editor instance, you set the properties directly,  
e.g: to make the editor read only, you'd get the editor, as above, then:  

editor.readOnly = true
#3

Hello.

I want to set ckEditor as readOnly=true and for an event it should be set to readOnly= false. I can set it to false but it should possibly reinitialized but how to refresh a ckEditor in webix?

I hope you can give me a hint.

Michael

#4

Hello, @Michael

I’m sorry for the delay with the answer.
Webix allows using any self methods and properties of Text Editors. That means that we could use self CKEditor ReadOnly methods.
According to the CKEditor4 documentation, to change the mode is possible with setReadOnly. The current editing area will be reloaded automatically.
Please, check the snippet here: Code Snippet
CKEditor5 documentation sais that we could just change isReadOnly property.
The snippet is here: Code Snippet

#5

Thanks a lot Alena :wink: