Улучшаем юзабилити textarea с помощью ace.jsУлучшаем юзабилити textarea. Подключаем к нему xedit.js и получаем более или менее сносный редактор. Что если, хочется большего. К примеру подсветки синтаксиса в textarea 
Всем известно, что textarea в плане редактирования текста очень неудобен. Нет ни табов, ни подсветки синтаксиса, ни показа ошибок. Нет ничего, к чему мы привыкли в современных редакторах типа notepad++

Эта проблема легко разрешима. Есть даже код на github используя который можно превратить любую область документа, в том числе и textarea. Там все просто, подключается ace.js редактор и выбирается синтаксис и тема. Вот, как я это делаю в моем конструкторе.

Подключаем редактор

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

После этого нам доступна переменная ace

var e = ace.edit('editor');
e.setTheme("ace/theme/textmate");
e.getSession().setMode("ace/mode/javascript");

В первой строке, мы подключаем редактор к элементу с id="editor". Место id можно подать и сам элемент, к примеру сделаем при помощи jQuery из всех textarea на странице полноценный редактор кода

$('textarea').each(unction(){
    var e = ace.edit(this);
});

Второй строкой, первого примера, выбираем тему оформления. Полный список тем можно увидеть в репозитории. Вообще все подробности работы редактора можно узнать в официальной документации.

С помощью этих тем можно задать стиль редактора, к примеру сделать его похожим на notepad++, или на sublime

Третьим параметром идет подсветка синтаксиса. В примере указан javascript, ничего не мешает переделать его под html или php

После того, как редактор установлен, нам потребуется, как-то реагировать на изменение его текста. Для этого у ace есть система событий. 

ace.edit('editor').on('change',function(evnt){
	alert('Текст был изменен:'+e.getValue());
});
ace.edit('editor').on('focus',function(evnt){
	alert('Начало редактирования');
});

Полный список событий смотрите в документации. Поверьте, в нем есть все, что Вам нужно.

Ну и напоследок, по мановению волшебной палочки, сделаем из следующего div'a удобный редактор php кода.

 echo "Hello world";

Можно писать код, а можно играть в игры. К примеру в браузерные стратегии. Браузеры сегодня, на удивление производительные. Теперь в них можно запускать полноценные 3d игры. 

Рассказать друзьям
author.jpg

Платная консультация по вопросам 2500 руб/час

Прочитали статью и остались вопросы? Меня зовут Валерий и я её автор. С радостью объясню Вам в скайпе все затруднительные моменты, которые остались за рамками статьи!

Подробнее ...

Добавить комментарий