There’s no doubt that a possibility to place an online text editor on the web page is a necessary and useful thing. Webix library offers a simple solution for such a task with just a bit of coding required.
For now, Webix provides support for such popular editors as Mercury, NicEdit, Tinymce, CodeMirror and CKEditor.
Initializing Text Editor Component
To embed any of these editors into the web page, you should link not only to Webix, but also to a special javascript file that can be downloaded from Webix open repository of helpers. It will connect your app to an editor as well as load extra libraries and files for this editor.
After you’ve downloaded the necessary code file, you should include it into your document. For example, in order to embed Mercury Text Editor use the following line:
The configuration below will initialize a text editor:
webix.codebase = "./";
//and the constructor
webix.ui({
id:"editor",
view:"mercury-editor", //or nic-editor, etc..
value:"some text"
});
Constructors for all the editors are almost the same differing only is the view name – mercury-editor, nic-editor, tinymce-editor, codemirror-editor, ckeditor.
Other properties you provide are as follows:
- id – defines the component unique ID;
- value -sets the initial text for the editor. Plain text and HTML markup can be provided;
- mode – Codemirror Text Editor specific – sets the language you are coding in. With mode set, the editor will color your code, and optionally help with indentation.
Thus, we get a ready-to-use text editor on the page. You can check the live demo.
Working with Text Editors
Webix Library offers common API for these editors, which allows for setting and getting editor values using Webix components. At the same time, you can get the editor object and work with it using its specific API that can be found on its site.
For instance, to get the current editor value, you should apply the getValue() method to an editor referring to it by its ID:
Summing up
As you can see, Webix way of integration with text editors is fast and simple. It doesn’t require long and complicated coding, thus saving your time and efforts. You can find the detailed information about Webix text editor integration within the dedicated documentation article.
