Состояние contenteditable
Состояние contenteditable
Разметка, произведенная WYSIWYG-редакторами, является зверской. Его замусоренным атрибутами стиля и часто даже не является допустимый HTML (пропускающий закрывающие тэги, перекрывая моделирование, и т.д.). Есть ли любые установленные решения проблем, представленных contenteditable? В противном случае, как я могу пойти о создании того?
Недопустимый HTML
Например, после ввода незаказанного списка, сопровождаемого строкой текста в популярный визуальный редактор, мне дарят следующий HTML:
- foo
- bar
baz
Где сделал div тег прибывает из? Почему это не становится закрытым? Почему не абзац - правильно закрытый, конечно? Действительно ли это предотвратимо?
Несемантический HTML
Другой редактор произвел следующее:
● Lorem
● ipsum
Это - допустимая разметка, но это семантически ужасно! Вместо стилизованного незаказанного списка редактор вставил литеральные символы маркера. Как разработчик, я понятия не имею, что сделать с разметкой contenteditable произвел. Насколько моделирование идет, это совершенно бесполезно.
Замены
До недавнего времени я использовал Скидку с цены в качестве инструмента для генерации, семантически исправляют HTML от пользователей. Однако Скидка с цены испытывает недостаток в определенных функциях, которые мои пользователи просят (простота использования для нетехников, расположения изображения, и т.д.). После поиска WYSIWYG-редактора, который произведет допустимую, семантическую разметку в течение нескольких недель, я нашел это contenteditable делает это невозможным. Кто-то где-нибудь говорит о решениях этих проблем? Как я могу принять участие.
[Обновление] Разъяснение
Я предполагаю, что не был абсолютно ясен впереди. Я не прошу способы двигаться contenteditableпроблемы. Я нашел многие из тех, включая большинство из тех упомянутыми ниже. То, что я пытаюсь найти, является первопричиной этих проблем. Почему contenteditable так поврежденный? Действительно ли это происходит из-за проблем унаследованного кода или технических проблем? Кроме того, что делается для фиксации его и где эта работа сделала?
[Обновление] Google Docs
HTML во втором примере выше прибыл от Редактора Google Docs. Однако как AlfonsoML указывает ниже, Google Docs не использует contenteditable в их редакторе. Их техника объяснена здесь.
21
задан Community 23 May 2017 в 11:54
поделиться
4 ответа
Я подозреваю, что он находится в таком состоянии по нескольким причинам:
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) над результатом и остановился бы на этом.
Это сложный вопрос, который все решают по-своему.
Я знаю о следующих возможностях:
* Просто отпустите (худшее)
* Попробуйте исправить HTML самостоятельно (TinyMCE и CKEditor пытаются сделать это с разной степенью успеха)
* Используйте плагин, например XStandard
* Используйте DOM, чтобы создать свой собственный редактор - сделайте каретку из DIV, обработайте выделение, редактирование и все остальное самостоятельно. Вот как это делает, например, Google. Однако для этого требуется много кода.
Я думаю, что ваша проблема заключается в попытке использовать такой инструмент, как Google Docs, как указано в предыдущем комментарии, вместо инструмента, который действительно ориентирован на редактирование HTML.
Да, оба типа являются WYSIWYG, но я не думаю, что цель GDocs состоит в том, чтобы создавать хороший HTML, вместо этого они сосредоточены на предоставлении альтернативы MS Word, даже если им придется пойти и создать странный HTML вместе с путь.
Я не могу поверить, что вы изучали это в течение нескольких недель и еще не используете CKEditor или TinyMCE. Оба решения включают в себя варианты использования атрибутов, классов или стилей для вывода, просто посмотрите на образцы, немного почитайте документацию и настройте ее в соответствии с вашими потребностями.
Для браузеров, поддерживающих contenteditable, решение может быть найдено довольно легко; используя, например, jQuery для сохранения данных и прикрепления новых элементов к редактируемому содержимому (с кнопками, очевидно), можно получить простой WYSIWYG-редактор без особых усилий.
Одна проблема, которую, возможно, будет немного сложнее решить, - это обеспечение правильного размещения этих новых элементов. Однако эта проблема была решена для Webkit, и я уверен, что это возможно сделать и в других браузерах.
Редактор, использующий contenteditable, был бы одновременно легко развертываемым и легковесным, поэтому его определенно стоит развивать, ИМХО.
Edit: Перечитав ваш вопрос, я понял, что на самом деле вы искали работающее решение без contenteditable. Я не знаю почему; AFAIK contenteditable производит валидную разметку, и если вы возьмете полный контроль (позволяя пользователям вставлять элементы и изменять их свойства только через ваш UI), она также будет семантической. AFAIK ни один из современных WYSIWYG-редакторов не использует contenteditable, но я могу ошибаться.