Вот спецификация DOM для того, что значит для элемента быть редактируемым: http://www.w3.org/TR/html5/editing.html#editable
Звучит так, будто все существующие теги абзацев и теги заголовков могут быть удовлетворены, и я получу то, что вы хотите, если я понимаю, о чем вы спрашиваете. Если вы хотите, чтобы пользователь мог вставлять новые абзацы и заголовки, клавиша Enter во время редактирования вставит разрывы строк как теги <br> в Chrome, но если пользователь введет теги HTML, они будут экранированы и будут отображаться как текст. Что касается вставки другого отформатированного контента, это полностью зависит от пользовательского агента; мои тесты в Chrome показывают, что он явно не позволяет пользователю вставлять жирный шрифт / курсив / и т.д. текст.
РЕДАКТИРОВАТЬ : по-видимому, в 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 (дополнительную информацию по этому вопросу можно получить по запросу).