Ace Editor for Webix UI

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.

Using Webix with Ace code editor

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)

<!-- include webix -->
    <script type="text/javascript" src="//"></script>
    <link rel="stylesheet" type="text/css" href="//">

    <!-- include the component -->
    <script type="text/javascript" src="//"></script>

    <!-- configure autoloading -->
    webix.codebase = "//";

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.codebase = "";

    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:

Written by
The following two tabs change content below.

Maksim Kozhukh

Pragmatic software developer with more than 12 years of web development experience. Prefers to work with Javascript and HTML. Maksim has worked with lots of different technologies from nearly forgotten ColdFustion to the bleeding edge of NodeJS and Go.

Latest posts by Maksim Kozhukh (see all)

Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on Vote on Reddit
  • Jean Benitez

    Can i use my own mode? thanks

    • Maksim Kozhukh

      Yep, sure, you can use any mode that supported by Ace

      Beware that version at our CDN has js files only for javascript related modes, you may need to clone the related folder from our repo, put it locally and add the necessary mode files

  • Jean Benitez
    • Jean Benitez

      Thanks! I’ve solved.

      ], this._render_when_ready, this);

  • Kristian Ask

    It has the same problem I faced when creating my own ace editor component. When you put it in a sizable window bottom lines are clipped when you resize the window. Can you please tell me how to deal with this? I can’t see a “resize” event on the view.