Блог

Редактор кода 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 и юзабилити. Создавая качественный и привлекательный контент, она стремится делать мир онлайна лучше.
Veronika Lindorenko

Latest posts by Veronika Lindorenko (see all)

Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit