CKEditor

Webix JS
1

According to the Docs under UI Extensions, there is a Webix component to support CKEditor. However, when I follow the instructions to implement this extension, I get the following error:

ReferenceError: CKEDITOR is not defined

this._3rd_editor = CKEDITOR.replace( this.config.textAreaID, {

ckeditor.js (line 18)

How do I get CKEditor working with Webix?

2

Please update the “components” from github, I just have pushed the fixed version.
To init the ckeditor you need to

  • copy components/ckeditor/* to the webix/codebase
  • have html page like next
<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../codebase/ckeditor.js"></script>
		<title>CKEditor text editor</title>
	</head>
	<body>
		<script type="text/javascript" charset="utf-8">
			webix.ui({
				type:"space", rows:[
					{ id:'editor', view:"ckeditor"},
					{ template:"CKEditor editor", type:"header" },
					{ id:'editor2', view:"ckeditor"}
				]
			});
       </body>
3

I updated to the latest version from Github and followed the instructions above. However, I notice that if I switch to a different browser tab and then return, or if I resize the layout using the resizer widget, the CKEditor reverts to a plain textbox. Any idea if there’s a fix for that?

4

In which browser such problem occurs ?
I have checked the online sample - http://docs.webix.com/samples/32_thirdparty/15_ckeditor.html - and it does work correctly in all common browsers.

5

Hi, i wonder if i can add complete toolbar from ckeditor? From the sample i can only see very few buttons

6

Hi @auphali,

You can change the configuration of the built-in editor as you want. Check this file (particularly defaults:{ toolbar:[ ] }) :

7

defaults:{
toolbar:[
[ ‘Bold’, ‘Italic’, ‘-’, ‘NumberedList’, ‘BulletedList’, ‘-’, ‘Link’, ‘Unlink’ ],
]

do you now how to add JustifyLeft etc. to that list. I did it but ckeditor ignores it :frowning:

Michael

8

Hello @Michael,

do you now how to add JustifyLeft etc. to that list. I did it but ckeditor ignores it :frowning:

JustifyLeft is a part of the Justify plugin, which means that the plugin should be downloaded and enabled via the CKEditor configuration object. Here is a step-by-step guide on how you can enable plugins for the CDN version of the editor - JS+ widgets and scripts for your website.

9

Hi @Michael

According to the CKEditor 4 docs, the justify (which allows using these buttons in the toolbar) is an extra plugin that is not included by default and should be added manually to the editor.

Unfortunately, for now our integration does not support extraPluginsproperty. We will improve ti as soon as possible, but as an instant solution, please see the following example:

Code Snippet

There is also important note: it seems that the official CDN of CKEditor 4 does not store these extensions.

To be able to use extras, you’ll need to set the path (cdn) to the package with the full set of plugins.
It can be either a local folder (the CKEditor package) or a third-party CDN such as CDNjs: ckeditor - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

10

Thankyou @Listopad.

That’s help me a lot.
But I bought a license which includes this plugin already.

Michael

11

Please help me.

I’ll still sucks in thie extra plugin problem for the ckeditor. The plugin has the ability to load images from inside a specific folder and place this image somewhere the text. But I can’t solve this without your help.
I got the webix.protoUI({ name:‘ckeditor’, …});
in there I have this:

this._3rd_editor = CKEDITOR.replace( tid , {
toolbar: this.config.toolbar,
extraPlugins: this.config.extraPlugins,
language: this.config.language,
width:this.$width -2,
height:this.$height - 44,
filebrowserBrowseUrl: true,
imageBrowser_listUrl: ‘/Postoffice/imageList’,
});
The this.config.extraPlugins is a string list of some extraplugin names.

Please help me solving this problem.

Thank you

Michael