После выхода WP5 с его «Гуттенбергом», я решил немного освежить старую информацию о том, как сейчас обстоят дела со свойством contenteditable. Кто не в курсе, то это такое свойство любого html-тэга, которое заставляет браузер включить режим редактирования.
Года три назад эта тема была достаточно популярна, но в целом заглохла из-за того, что браузеры по разному генерируют html-код и расчищать их «завалы» оказалось проблематично. Поэтому остались только те проекты, которые «переспециализировались» в визуальные редакторы.
Как оказалось, сейчас ситуация немного улучшилась. Не идеально, конечно, но в целом прогресс оказался значительным. И я решил реализовать в шаблоне MF возможность редактирования записи прямо на странице записи.
В залогиненном состоянии справа появится плавающий блок, где будет чекбокс, который включает режим редактирования.
В режиме редактирования текст будет тот же, что и в обычном редакторе админки. Причём будет поддержка парсера Default или Simple (как на этих скриншотах), а также BB-кода и т.п.
Очевидно, что этот редактор очень простой и рассчитан на какую-то быструю правку текста, без захода в админ-панель. Работает это всё так же очень быстро.
Такая возможность реализуется на уровне шаблона, поэтому пока только владельцы MF смогут его оценить. Напомню, что вы можете заказать шаблон MF по льготной цене 40$ до 1 января 2019 года. После этого у него будет полная цена 75$ без скидок.
Почему не визуальный редактор? Главная сложность — это всё такой же «бардак» с генерацией кода. Любой визуальный редактор — довольно сложная разработка, поскольку помимо вычистки кода, нужно ещё прикрутить кучу кнопок, чтобы хоть как-то форматировать тексты.
Из «забавного» я отмечу как браузер реагирует на обычное нажатие Enter. Раньше в разных браузерах это могло быть, BR, DIV, P, а также другие тэги, в зависимости обрамляющего контента.
Сейчас в FireFox навели некоторый порядок и он генерирует DIV. Но на практике выяснилось, что это не всегда так. Скажем если несколько раз нажать Enter, то FireFox может их выдать как многочисленные
<div>< br ></div>
Или встречаются пустые DIV, или такие же DIV, но внутри перенос строки (\n). Также он может обычный пробел вдруг заменить на . Явно же задать html-спецкод в нем нельзя, поскольку все & он заменяет на &. Тоже самое касается и html-тэгов: все < и > принудительно заменяются на < и >
В целом же, количество таких «нестыковок», на удивление оказалось немного. Привести «мусорный» код из режима contenteditable в привычный текстовый можно всего за десяток замен. Это очень неплохо, поскольку раньше это сделать было значительно сложней.
В любом случае этот редактор является лишь небольшим бонусом, делающим работу с сайтом немного удобней. :-)