JS / jQuery компонент для редактирования html-кода?

Question

[Ёж Туманный]

Доброго времени суток!

Пытаюсь найти достойный компонент для "живого" редактирования html-кода с одновременным его превью в соседнем контейнере, но что то-ли мазь для лыж не та, то ли ищу не правильно. Поиски утыкаются в tinymce (тяжелый и не совсем подходящий), codemirror (тоже не то), summernote..

В данный момент в бд хранится html-код шаблона страницы. View выводит его в textarea на странице редактора plain-текстом.

Необходимо:

• Подсветить html-теги "в textarea";
  
• Опционально - подсветить не закрытые или не валидные теги;
  
• При редактировании - автоматически обновлять превью кода в соседнем контейнере (div).
  

И бонусом, подскажите пожалуйста, как лучше вставлять html-код из бд в поле для редактирования? Escape-ить данные из бд, после чего unescape-пить на стороне клиента?

Answer 1

[GreatRash]

Codemirror конечно же!

Answer 2

[Александр Таратин]

1. https://ace.c9.io/#nav=about
2. Есть html валидатор https://github.com/ajaxorg/ace-builds/blob/master/...
3. Событие изменения документа https://ace.c9.io/#nav=api&api=document