Как превратить contentEditable в структурированный редактор разметки?

Question

Есть LyX и такие редакторы, которые пытаются обеспечить вам текст, который имеет четкую структуру. Я хочу такое же поведение из поля html5 contentEditable, за исключением того, что не знаю, как это сделать.

Мои требования:

• Нет DIV -tags созданы.
• Текст не допускается за пределы текстового контейнера. (абзацы, заголовки, предварительные блоки и встроенные элементы)

Мне также необходимо выяснить, как перемещаться по содержимому и нажимать его на сервер в этой ограниченной форме.

(я также люблю хорошую документацию на вещи, которые я могу сделать для contenteditable -поля)

Answer 1

Вот спецификация DOM для того, что это означает, что для элемента редактируемой: http://www.w3.org/TR/html5/editing.html#editable

It звучит как просто создание всех существующих тегов абзаца и заголовков заголовков contenteditable даст вам то, что вы хотите, если я понимаю, что вы просите. Если вы хотите, чтобы пользователь мог вставлять новые абзацы и заголовки, клавиша Enter во время редактирования будет вставлять разрывы строк в теги <br> в Chrome, но если пользователь вводит теги HTML, они будут экранированы и будут отображаться только как текст. Что касается вставки другого форматированного контента, это полностью зависит от пользовательского агента; мои тесты в Chrome показывают, что он, по-видимому, не позволяет пользователю вставлять жирный/курсив/и т. д. текст.

EDIT: по-видимому, в Chrome (и, предположительно, с расширением Safari), нажатие Control-I, Control-B, Control-U приводит к такому же поведению, которое вы можете ожидать от богатого текстового редактора!

Я также протестировал в Firefox и обнаружил, что, в отличие от Chrome и не совсем в отличие от спецификации, это на самом деле вставить новый <p> тегов вместо <br>-х, с добавлением на атрибут _moz_dirty="". Вам не нужно удалять это; если Firefox следует спецификации, он никогда не сломает DOM, вставив текст вне тега таким образом. Но обратите внимание, что пользователи, использующие Chrome и Firefox, будут создавать разные структуры HTML, которые вы, возможно, захотите сгладить с помощью Javascript или на стороне сервера. У меня также нет IE на этой машине, чтобы выяснить, как он обрабатывает новые строки, к сожалению, и документация Microsoft не указывают.

Что касается нажатия на сервер, вы можете сделать это с помощью AJAX, потянув текстовое содержимое соответствующих элементов (или просто сделайте целое <div> contenteditable), построив массив их текстового содержимого, а затем POSTing его к серверу. Это довольно легко сделать с jQuery (дальнейшая помощь с этим может быть предоставлена ​​для этого по запросу).