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

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


javascript contenteditable cross-browser wysiwyg
person Shaokan    schedule 16.04.2011    source источник
comment
Упомянутый вами редактор - это не редактор WYSIWYG, а просто текстовый редактор с подсветкой.   -  person user123444555621    schedule 16.04.2011

Ответы (3)


arrow_upward
2
arrow_downward

В большинстве случаев я предпочитаю iframe с designMode в большинстве браузеров и contenteditable <body> в IE, что упрощает работу. Причины:

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

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

person Tim Down    schedule 16.04.2011
comment
спасибо Тим. Единственное, что меня привлекает при использовании contentEditable, - это то, что мне не нравится использовать iframe. Вероятно, из-за предыдущих чтений, которые я делал много лет назад по этому тегу. А может недоразумение. Я считаю, что использование div намного более корректно, чем iframe. Это всего лишь убеждение, что я не проводил исследования :) Что касается FF, я знаю, что contenteditable не поддерживается в firefox 2, но после небольшого исследования я обнаружил, что ff2 не имеет даже 1% доли среди основные браузеры. Итак, верите ли вы, что хороший редактор WYSIWYG (по крайней мере, 90% целевых пользователей) возможен с помощью contentEditable? - person Shaokan; 16.04.2011
comment
@Shaokan: Да, я думаю, что contenteditable уже можно использовать. Однако в iframe нет ничего недействительного, и их используют как минимум два основных редактора WYSIWYG (TinyMCE и CKEditor). - person Tim Down; 19.04.2011
comment
Я возражаю против вашего первого аргумента; что CSS страницы не повлияет на то, что вы редактируете. На самом деле это моя самая большая проблема с CKEditor: люди не видят, что они делают, потому что CSS редактора отличается от CSS реальной страницы, другими словами, этот редактор НЕ является WYSIWYG. - person Alexis Wilke; 31.12.2013
comment
@AlexisWilke: Справедливо, но это зависит от контекста. Если редактор находится на странице, отличной от редактируемой (например, в какой-либо форме редактирования страницы в системе управления контентом), вам не нужно, чтобы редактируемая область наследовала свой CSS от текущей страницы. Кстати, в CKEditor 4 теперь есть встроенный режим: ckeditor.com/demo#inline - person Tim Down; 06.01.2014

arrow_upward
4
arrow_downward

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. В остальном все работает очень хорошо.

person user123444555621    schedule 16.04.2011
comment
хм, я не знал этого, большое спасибо! Йо предупредил меня о возможной проблеме :) - person Shaokan; 16.04.2011

arrow_upward
2
arrow_downward

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

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

Марк Финкл написал прекрасное общее описание designMode, а позже добавил сообщение о contentEditable.

person Magnar    schedule 16.04.2011