Блог

Редактор кода Ace для Webix UI

Ace — это удобный JavaScript редактор кода. Он сочетает в себе функции и возможности таких популярных редакторов, как Sublime, Vim и TextMate. Cloud9 IDE использует Ace в качестве основного редактора. Кроме того, Ace является преемником проекта Mozilla Skywriter (Bespin).

Теперь Ace можно использовать с Webix.

Использование Webix с редактором кода Ace

Для того, чтобы создать работающий редактор кода на странице, вам нужно подключить js файл компонента (его можно найти в Webix CDN)

<!-- include webix -->
    <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>

После добавления js файлов на страницу вы сможете использовать виджет “ace-editor” так же, как и любой другой Webix виджет.

webix.codebase = "http://cdn.webix.com/components/ace/";

webix.ui({
    view: "ace-editor",
    theme: "monokai",
    mode: "javascript",
    value: '\n\t var t = Math.sin(0.98);'
});

В демо ниже представлен активный Ace редактор:


Это же демо, представленное в редакторе кода Webix, можно посмотреть по ссылке —http://webix.com/snippet/65776086

Виджет “ace-editor” поддерживает то же API, что и любой другой контрол формы. Поэтому, вы можете использовать его в качестве альтернативы виджету textarea или редактору codemirror (это еще один редактор, поддерживаемый библиотекой Webix). Вы можете встроить новый виджет в layout, accordion, tabbar и т.д. В качестве примера, посмотрите следующее демо:

Это же демо в редакторе кода Webix — http://webix.com/snippet/766dc486

Ace-editor и другие компоненты можно скачать из нашей коллекции компонентов на GitHub:
https://github.com/webix-hub/components

Автор
The following two tabs change content below.
Veronika Lindorenko

Veronika Lindorenko

Менеджер продукта Webix с 2012. Интересуется SMM и юзабилити. Создавая качественный и привлекательный контент, она стремится делать мир онлайна лучше.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit