Ace — это удобный JavaScript редактор кода. Он сочетает в себе функции и возможности таких популярных редакторов, как Sublime, Vim и TextMate. Cloud9 IDE использует Ace в качестве основного редактора. Кроме того, Ace является преемником проекта Mozilla Skywriter (Bespin).
Теперь Ace можно использовать с Webix.
Для того, чтобы создать работающий редактор кода на странице, вам нужно подключить js файл компонента (его можно найти в 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>
После добавления js файлов на страницу вы сможете использовать виджет “ace-editor” так же, как и любой другой Webix виджет.
webix.ui({
view: "ace-editor",
theme: "monokai",
mode: "javascript",
value: '\n\t var t = Math.sin(0.98);'
});
В демо ниже представлен активный Ace редактор:
Это же демо, представленное в редакторе кода Webix, можно посмотреть по ссылке —//webix.com/snippet/65776086
Виджет “ace-editor” поддерживает то же API, что и любой другой контрол формы. Поэтому, вы можете использовать его в качестве альтернативы виджету textarea или редактору codemirror (это еще один редактор, поддерживаемый библиотекой Webix). Вы можете встроить новый виджет в layout, accordion, tabbar и т.д. В качестве примера, посмотрите следующее демо:
Это же демо в редакторе кода редакторе кода
Ace-editor и другие компоненты можно скачать из нашей коллекции компонентов на GitHub:
https://github.com/webix-hub/components
