Государство contenteditable - PullRequest
       23

Государство contenteditable

21 голосов
/ 31 июля 2010

Состояние contenteditable

Разметка, созданная редакторами wysiwyg, является ужасной.Он изобилует атрибутами стиля и часто даже не является допустимым HTML (отсутствующие закрывающие теги, перекрывающиеся стили и т. Д.).Есть ли какие-либо устоявшиеся решения проблем, представленных contenteditable?Если нет, как я могу создать его?

Неверный HTML

Например, после ввода неупорядоченного списка, за которым следует строка текста в популярном редакторе форматированного текста, мне предлагаютследующий HTML:

<ul><li>foo</li><li>bar</li></ul><div>baz

Откуда появился тег div?Почему это не закрывается?Почему бы не абзац - правильно закрытый, конечно?Это можно предотвратить?

Несемантический HTML

Другой редактор выдал следующее:

<p style="font-size:11pt; line-height:115%; margin:0pt 0pt 0pt 36pt; text-indent:-18pt"><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">●</span><span style="font:7.0pt &#39;Times New Roman&#39;">     </span><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">Lorem</span></p><p style="font-size:11pt; line-height:115%; margin:0pt 0pt 0pt 36pt; text-indent:-18pt"><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">●</span><span style="font:7.0pt &#39;Times New Roman&#39;">     </span><span style="color:#000000; font-family:Arial; font-size:11pt; font-style:normal; font-weight:normal; text-decoration:none">ipsum</span></p>

Это допустимая разметка, но она семантически ужасна!Вместо стилизованного неупорядоченного списка редактор вставил литерал маркеров.Как разработчик, я понятия не имею, что делать с разметкой contenteditable.Что касается стиля, то он совершенно бесполезен.

Подстановки

До недавнего времени я использовал Markdown как инструмент для генерации семантически правильного HTML-кода от пользователей.Однако у Markdown отсутствуют определенные функции, о которых просят мои пользователи (простота использования для технарей, позиционирование изображений и т. Д.).После поиска редактора wysiwyg, который будет производить корректную семантическую разметку в течение нескольких недель, я обнаружил, что contenteditable делает это невозможным.Кто-то где-то говорит о решениях этих проблем?Как я могу принять участие.

[Обновление] Разъяснение

Полагаю, я не совсем понял заранее.Я не прошу способы обойти проблемы contenteditable.Я нашел много таких, включая большинство из упомянутых ниже.Я пытаюсь найти причину этих проблем.Почему contenteditable так сломан?Это связано с техническими проблемами или проблемами унаследованного кода?Кроме того, что делается для того, чтобы это исправить и где эта работа выполняется?

[Обновление] Документы Google

HTML-код во втором приведенном выше примере взят из редактора Документов Google.Однако, как указывает AlfonsoML ниже, Документы Google не используют contenteditable в своем редакторе.Их техника объясняется здесь .

Ответы [ 6 ]

11 голосов
/ 11 августа 2010

Я подозреваю, что он находится в состоянии, в котором он находится по нескольким конкретным причинам:

1.) Стандарт HTML5, который определяет его, не определяет, что он должен выводить, оставляя каждую реализацию решать самим.

2.) Редактор не знает, хотите ли вы точное или семантическое представление.Это часто компромиссы.

3.) Похоже, что Mozilla перетащила свой старый код Netscape Mail / Composer в свою реализацию designMode, а затем перетащила его в contentEditable.Он все еще использует те же пунктирные контуры и маленькие красные маркеры, которые существовали 10 лет назад, и я подозреваю, что огромное количество унаследованного кода.

4.) Похоже, что Internet Explorer сделал почти то же самое, а IE никогда не делалчто-нибудь правильно в первую очередь.Он по-прежнему тянет свое наследие в форме причуд и режимов «совместимости».

5.) На самом деле он используется только в системах CMS и в форумах / полях для комментариев и комментариев, и обычно они имеют довольно тяжелые обертки для реализации.Я не видел такого большого применения в других местах, особенно в «голых».

6.) Существует несколько успешных онлайн-текстовых процессоров и еще меньше приложений WYSIWYG или макетов страниц.Давление на создание точных редакторов просто не существует.Хуже того, Microsoft продает офлайновое программное обеспечение, такое как Word и Expressions, которое определенно пострадает от роста числа онлайн-редакторов, особенно высококачественных бесплатных.

7.) У Microsoft есть наследие создания инструментов, которые генерируют недействительные и раздутыеHTML-код, который все еще существует в Outlook 2010 и пакете Office.

8.) Иногда одна и та же команда выбора и редактирования может быть применима к нескольким возможным объектам, занимающим одно и то же пространство, и редактор никогда не узнаеткоторую ты хотел изменить.Кроме того, команда редактирования может привести к разделению элемента неопределенным или неожиданным образом (опять же, он не будет знать, что вы бы предпочли).

Я не верю, что contentEditable когда-либо будет так же хорош, как вырезание вашегособственный HTML или с помощью специального инструмента.Я бы просто сконцентрировался на запуске некоторых базовых инструментов восстановления (например, HTMLTidy) над результатом и назвал бы это днем.

4 голосов
/ 31 июля 2010

Это сложный вопрос, который каждый решает по-своему.Я знаю о следующих возможностях:* Просто отпусти (худший)* Попробуйте исправить HTML самостоятельно (TinyMCE и CKEditor пытаются сделать это с разной вероятностью успеха)* Используйте плагин, как XStandard* Используйте DOM для создания своего собственного редактора - сделайте каркас из DIV, сделайте выбор, редактирование и все остальное самостоятельно.Вот как Google это делает, например.Это требует много кода, хотя.

1 голос
/ 11 июля 2014

Medium.js !!

Medium.js сохраняет HTML-код в пределах contenteditable семантически, просто и чисто. Medium.js также поддерживает заполнители, автоматический HR (или BR, или P) создание, события, горячие клавиши, простой и сложный элемент впрыск и многое другое!

1 голос
/ 18 апреля 2013

Я ответил на очень похожий вопрос в Редактируемые текстовые редакторы текста - почему ситуация выглядит так и что мы, авторы редакторов WYSIWYG, можем сделать с этим.

Да, я знаю, что этому вопросу уже 2 года, но он все еще актуален.

1 голос
/ 31 июля 2010

Я думаю, что ваша проблема заключается в попытке использовать инструмент, подобный Google Docs, как указано в предыдущем комментарии, вместо инструмента, который действительно предназначен для редактирования HTML.

Да, оба вида WYSIWYG, но яне думайте, что целью GDocs является создание хорошего HTML, вместо этого они сосредоточены на предоставлении альтернативы MS Word, даже если им придется пойти и создать странный HTML по пути.

Я могу 'Я действительно не верю, что вы исследовали это в течение нескольких недель, и вы еще не используете CKEditor или TinyMCE.Оба решения включают в себя параметры использования атрибутов, классов или стилей для вывода, просто нужно посмотреть примеры, немного прочитать документы и настроить их под свои нужды.

1 голос
/ 31 июля 2010

Для браузеров, которые поддерживают contenteditable, решение может быть легко найдено;например, используя jQuery для сохранения данных и для присоединения новых элементов к редактируемому содержимому (очевидно, с помощью кнопок), можно получить простой редактор WYSIWYG без особых усилий.

Одна проблема, которая можетбыть немного труднее решить, это обеспечение правильного размещения этих новых элементов.Тем не менее, это было решено для Webkit , и я уверен, что это можно сделать и в других браузерах.

Редактор, использующий contenteditable, будет легко развернут и легок,если это определенно то, что стоит разработать, ИМХО.

Редактировать: Перечитав свой вопрос, я понимаю, что вы на самом деле искали работающее решение, отличное от contenteditable.Я не уверен почему;AFAIK contenteditable создает допустимую разметку, и если вы получите полный контроль (только позволяя пользователям вставлять элементы и изменять их свойства через ваш пользовательский интерфейс), это также будет семантическим.AFAIK В настоящее время редакторы WYSIWYG не используют contenteditable, но я могу ошибаться.

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