Есть ли альтернативы использованию contenteditable или textarea?
Я работаю над онлайн-редактором форматированного текста, похожим на создатель страниц WordPress или на создатель постов переполнения стека. Было отмечено, что существует два различных типа онлайн-редакторов форматированного текста:
- Редакторы WYSIWYG и
- Редакторы HTML
Я строю второй тип. К сожалению, ни <textarea> ни используя contenteditable очень удобны для редактирования HTML-текста.
Проблема с <textarea> (как здесь используется в Переполнении стека), вы не можете отобразить семантику текстового уровня в поле редактирования. Вы не можете просто выделить слово и выделить его жирным шрифтом, вам нужно вставить какую-то разметку (например, ***** жирный *****). Не очень удобный и не очень "богатый" текст.
С другой стороны, используя contenteditable решает эти проблемы, но вводит проблему контроля. Браузеры вставят все виды HTML и CSS, чтобы поле редактирования выглядело хорошо. Если вы нажмете Enter, браузер вставит <p>, или же <div>, или же <br>, или же <div><br></div>... в зависимости от браузера. Если вы вставите несколько абзацев, скопированных из HTML, вы получите тонны чрезмерной разметки - сверх того, что было даже в исходном HTML. Например, следующий исходный код:
<p>This is one paragraph!</p>
<p>This is another.</p>
Отображается на сайте как:
This is one paragraph!
This is another.
... который, если вы копируете и вставляете в contenteditable Форма, может дать вам что-то вроде этого:
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px;
white-space: normal;">This is one paragraph!</p>
<p style="line-height: 1em; color: rgb(34, 34, 34); font-size: 12px;
white-space: normal;">This is another.</p>
... добавление встроенных стилей и, в некоторых случаях, дополнительного HTML.
Я пытался выяснить, как ограничить и контролировать количество HTML, которое браузер вставляет в contenteditable элемент, но я начинаю думать, что contenteditable подходит только для редактирования типа WYSIWYG и никогда не будет работать для редактирования расширенного текста в стиле HTML.
Есть ли третий вариант, или кто-нибудь создал какой-то Javascript редактор, который отвечает моим потребностям?
0 ответов
Альтернативой является кодирование всего этого самостоятельно, используя события щелчка на обычных div и так далее. Есть много вещей, которые нужно будет сделать, используя этот подход, и есть много вопросов по переполнению стека, которые могли бы помочь, включая настройку всех обработчиков событий и обработку добавления курсора, когда они нажимают на место в тексте [1], события нажатия клавиш для всего, включая Enter, Backspace, Delete, все буквенно-цифровые клавиши и так далее. Вам нужно будет создать курсор как визуальный элемент, когда они что-то щелкают, вводить текст при вводе, удалять текст, когда они нажимают Backspace, вводить новые строки при нажатии Enter и так далее. Google Docs и Online Word, вероятно, используют этот подход, но это огромный объем работы, и я не знаю никаких библиотек с открытым исходным кодом, которые реализуют его, но это даст вам полный контроль над всем,включая форматирование всего (поскольку вы вводите все это).