Ace is a handy JavaScript code editor. It combines the possibilities and behavior of popular editors like Sublime, Vim and TextMate. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project. You can build Ace into your web page or app with ease.
And now it is possible to use Ace Editor with Webix UI.
To create a working code editor on the page, you need to include the js file of the component (it can be taken from Webix CDN)
<script type="text/javascript" src="//cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.webix.com/edge/webix.css">
<!-- include the component -->
<script type="text/javascript" src="//cdn.webix.com/components/ace/ace.js"></script>
<!-- configure autoloading -->
<script>
webix.codebase = "//cdn.webix.com/components/ace/";
</script>
After adding js files on the page you will be able to use the “ace-editor” view, the same as any other Webix view.
webix.ui({
view: "ace-editor",
theme: "monokai",
mode: "javascript",
value: '\n\t var t = Math.sin(0.98);'
});
Just check the component below, it is an active Ace editor:
The same demo in the snippet editor.
The “ace-editor” view supports the same API as any other form control does. So you can use it as an alternative to textarea or codemirror-editor (another rich code editor supported by Webix UI). You can embed the new view in layouts, accordions, tabbars, etc. The next demo will illustrate the idea:
The same demo in the snippet editor.
This and other components can be downloaded from our components collection at GitHub.
