Улучшаем юзабилити 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 кода.
Можно писать код, а можно играть в игры. К примеру в браузерные стратегии. Браузеры сегодня, на удивление производительные. Теперь в них можно запускать полноценные 3d игры.
Комментарии
Зона просто не изменилась в нее вписался какой то левй код
час сидел мучился
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");
Где место подключения ACE к TEXTAREA???
Помогите подключить его именно к TEXTAREA а не к DIV.
Весь интернет перешерстил. Инфы ноль. А у вас в названии то что мне нужно, но в статье ничего не сказано?