Integration with Online Text Editors
November 27, 2013
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
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:
//path from which extra libraries are autoloaded
webix.codebase = "./";
//and the constructor
view:"mercury-editor", //or nic-editor, etc..
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:
$$("editor").getValue(); // returns e.g "some<b> text</b> "
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.
The following two tabs change content below.
Front-end web developer fond of high-quality code and effective design. Is eager to share all the tips and tricks regarding Webix usage with wide audience.