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.
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
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 is a simple and fast WYSIWYG editor for websites. Being extremely lightweight it makes any element/HTML container editable or converts standard textareas to rich text editing fields.
Learn more about NiceEdit text editor
Related sample: NiceEdit text editor
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 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
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>
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
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 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 TinyMCE text editor
Related Sample: Ckeditor Text Editor
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
});
$$("editor").setValue("<p>some text or code snippet</p>");
$$("editor").getValue(); // returns e.g "some<b> text</b> "
$$("editor").getEditor();
$$("editor").focus();
Back to top