Улучшаем юзабилити 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 игры. 

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

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


Защитный код
Обновить

Комментарии   

0
Тимур
# Тимур 24.08.2013 14:22
У меня почему то не получилось textarea сделать ACEовским)

Зона просто не изменилась в нее вписался какой то левй код
0
Leroy
# Leroy 26.08.2013 21:41
копипаст дает сбой?
0
Влад
# Влад 01.03.2015 01:04
Так уже не работает как вы приводите в пример
час сидел мучился




var editor = ace.edit("description");
var textarea = $('textarea[name="content"]').hide();

editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
});
editor.setTheme("ace/theme/twilight");
0
Станислав
# Станислав 23.10.2016 16:59
Улучшаем юзабилити textarea с помощью ace.js
Где место подключения ACE к TEXTAREA???
Помогите подключить его именно к TEXTAREA а не к DIV.
Весь интернет перешерстил. Инфы ноль. А у вас в названии то что мне нужно, но в статье ничего не сказано?
0
Leroy
# Leroy 23.10.2016 20:52
В статье речь идет про textarea. Воспользуйтесь поиском по странице ctrl + f