Intermediate

Text Editor Integration

JS files for these components aren't included in the lib package and should be taken from https://github.com/webix-hub/components

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.

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

//path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    id: "editor",
    view: "ace-editor",
    value: "..." // code string
});

Mercury Text Editor

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

Mercury is a fully featured HTML5 editor with full HTML, simple, markdown, snippet and image areas to get the utmost from in-browser content editing.

Learn more about Mercury text editor

Related sample:  Mercury text editor

Component Initialization:

Link to the library

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

JS code

//path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    id: "editor",
    view: "mercury-editor",
    value: "..." //text and HTML markup
});

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:  NiceEdit text editor

Component Initialization

Link to the library

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

JS code

// path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    id: "editor",
    view: "nic-editor",
    value: "..." //text and HTML markup
});
</script>

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

// path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    id: "editor",
    view: "tinymce-editor",
    value: "..." //text and HTML markup
});
</script>

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

// path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    id: "editor",
    view: "codemirror-editor",
    mode: "javascript",
    value: "..." //text and HTML markup
});

Note that here an extra property appears - mode that 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

// path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    id: "editor",
    view: "ckeditor",
    value: "..." //text and HTML markup
});

Common Methods:

  • setValue(value); - sets text for the editor (equal to 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 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