Насколько надежно использование contenteditable для div для редактора WYSIWYG? - PullRequest
5 голосов
/ 16 апреля 2011

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

Ответы [ 3 ]

4 голосов
/ 16 апреля 2011

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.Кроме того, все работает довольно хорошо.

2 голосов
/ 16 апреля 2011

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

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

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

2 голосов
/ 16 апреля 2011

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

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

Марк Финкл написал высокоуровневую сводку designMode , а затем добавил пост о contentEditable .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...