Intermediate

Text Editor Integration

How to Include

JS files for these components aren't included in the lib package and should be taken:

<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>

Webix library supports integration of popular text editors in the application with the help of its own components. For now, the following text editors can be included:

To embed any of the editors into your web page, you should link not only to Webix, but also to a special JavaScript file from the components folder. This file will connect you to the chosen editor as well load extra required files for it.

Note that in documentation samples files are linked in another way, but in your apps you should follow the patterns described below.

Setting Path to the Component

You can set path to sources of the necessary editor on CDN. Actually, there are three ways to do that:

  • via the cdn property in the view configuration. This way allows setting path to the particular version of the necessary library or to the local CDN;
  • not setting any paths at all. In this case either the official CDN of the component or the global cdnjs (if the source of the component is available there) will be used;
  • by directly including all the source files of the component on a page. In this case you should set the cdn property to false to avoid possible collisions with the component version included by default.

Ace Text Editor

You can download JS file for the Ace Editor from github.

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors and can be easily embedded in any web page and JS application.

Learn more about Ace text editor

Related sample: Ace Editor

Component Initialization:

Link to the library

<script type="text/javascript" src="./ace.js"></script>

JS code

webix.ui({
    id: "editor",
    view: "ace-editor",
    value: "..." // code string
});

NicEdit Text Editor

You can download JS file for the NicEdit Editor from github.

NicEdit is a simple and fast WYSIWYG editor for websites. Being extremely lightweight it makes any element/HTML container editable or converts standard text areas to rich text editing fields.

Learn more about NiceEdit text editor

Related sample:   NicEdit Text Editor

Component Initialization

Link to the library

<script type="text/javascript" src="./nicedit.js"></script>

JS code

webix.ui({
    id: "editor",
    view: "nic-editor",
    value: "..." //text and HTML markup
});

TinyMCE Text Editor

You can download JS file for the TinyMCE Editor from github.

TinyMCE is a platform independent web based JavaScript HTML WYSIWYG editor control. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.

Learn more about TinyMCE text editor

Related sample:  TinyMCE Text Editor

Component Initialization

Link to the library

<script type="text/javascript" src="./tinymce.js"></script>

JS code

webix.ui({
    id: "editor",
    view: "tinymce-editor",
    value: "..." //text and HTML markup
});

Configuring the Editor

To set TinyMCE configuration properties, you can use the "config" property:

webix.ui({
    id: "editor",
    view: "tinymce-editor",
    config: { 
        theme:"advanced" 
    }
});

CodeMirror Text Editor

You can download JS file for the CodeMirror Editor from github.

CodeMirror is a JavaScript component that provides a code editor in a browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.

Learn more about CodeMirror text editor

Related sample:  Codemirror Text Editor

Component Initialization

Link to the library

<script type="text/javascript" src="./codemirror.js"></script>

JS code

webix.ui({
    id: "editor",
    view: "codemirror-editor",
    mode: "javascript",
    value: "..." //text and HTML markup
});

Note that here appears an extra property mode. It denotes a language you are coding in.

CKEditor Text Editor

You can download JS file for the CKEditor from github.

CKEditor is a ready-for-use WYSIWYG editor that brings word processor features directly to your web pages. It is suitable for editing plain texts as well as HTML markup.

Learn more about CKEditor text editor

Related sample:  CKEditor Text Editor

Component Initialization

Link to the library

<script type="text/javascript" src="./ckeditor.js"></script>

JS code

webix.ui({
    id: "editor",
    view: "ckeditor",
    value: "..." //text and HTML markup
});

Common Methods

  • setValue(value); - sets text for the editor (equal to the value property, but allows doing it dynamically). The function is called from the component referring to its ID.
$$("editor").setValue("<p>some text or code snippet</p>");
  • getValue(); - gets the current editor text with current formatting. Formatted text pieces are wrapped into corresponding HTML tags;
$$("editor").getValue(); // returns e.g. "some<b> text</b> "
  • getEditor(); - gets the editor object so that you can use its specific API (except for the Mercury editor).
$$("editor").getEditor();
  • focus(); - in case of several editors on the page this method allows placing cursor mark into the desired editor.
$$("editor").focus();
Back to top