Насколько надежно использование contenteditable на div для редактора WYSIWYG?

Я считаю, что название довольно само собой разумеющееся, но все же, возможно, я должен спросить подробно. Я создаю редактор WYSIWYG, и я действительно в начале этого. Итак, я понял, что, возможно, знание плюсов и минусов просветит меня. В основном, мой вопрос заключается в том, поскольку я хочу редактор, который будет работать по крайней мере с 90% во всех основных браузерах, как дальше я могу использовать contenteditable в div и каковы минусы и плюсы использования contenteditable по сравнению с designMode и ифрейме? Кроме того, во время исследования я нашелЭтот редактор . Я считаю, что он не использует ни один из этих атрибутов и перемещает местоположение textarea. Это лучший подход? Ну, я знаю, что есть много факторов, которые влияют на ответ на последний вопрос, но, как я уже упоминал, самое важное, что я ищу в редакторе, - это то, что он может быть использован 90% пользователей. НБ: я не хочу использовать никакие сторонние библиотеки.

3 5
javascript cross-browser wysiwyg contenteditable

3 ответа:

Для большинства применений я по-прежнему предпочитаю iframe с designMode в большинстве браузеров и contenteditable <body> элемент в IE, что облегчает работу. Причины:

  • наличие редактируемого содержимого в iframe эффективно изолирует его и позволяет поместить редактор на любую страницу с уверенностью, что события CSS и DOM страницы не могут повлиять на редактируемое содержимое
  • designMode более надежен в Firefox. Я видел несколько ошибок с contenteditable , которые не существуют с designMode, что, вероятно, связано с тем, что contenteditable был добавлен в Firefox относительно недавно, тогда как designMode существует примерно с 2003 года.

Что касается ACE, его подход textarea является умным и имеет много преимуществ, но я подозреваю, что этот подход ограничивается моноширинными шрифтами. Кроме того, CodeMirror 2 использует аналогичный подход, но аналогично ограничивается моноширинными шрифтами.

2

contentEditable не работает с поплавками в IE: 

<p>
  <img style="float:left" src="foo">
  <p contentEditable="true">very long text here ...
    ... this text won't flow round the image</p>
</p>

Это потому, что contentEditable запускает печально известный hasLayout. Кроме этого, все работает довольно хорошо.

4

Атрибуты designMode и contentEditable, а также API, управляющие редакторами rich text, реализованы во всех основных браузерах, включая Firefox, Opera, Safari, Google Chrome и, конечно же, Internet Explorer.

Http://blog.whatwg.org/the-road-to-html-5-contenteditable

Марк Финкл написал хорошеерезюме высокого уровня designMode , а позже добавилсообщение о contentEditable .

2