Как добавить возможность живого редактирования сайта?

Question

[Никита Корнилов]

Добрый день, уважаемые эксперты Тостера. Нуждаюсь в вашей помощи.

Есть самописный корпоративный сайт, на котором публикуется различная информация о компании, в том числе её новости. Все данные на сайт подтягиваются из БД, в которую информация добавляется вручную через phpMyAdmin. Заказчик часто просит что-либо подредактировать, поэтому возникла необходимость сделать для него удобный интерфейс для обновления сайта, а в частности, для добавления и правки новостей.

Как это сделать в общих чертах вроде разобрался. Сделал поля с датой, автором, заголовком и т. д. редактируемыми путем добавления атрибута contenteditable, обернул это всё в форму и настроил обновление данных в БД при её отправке. Возникла небольшая загвоздка в редактирование основного содержания статьи. Это не просто строка текста вида "Lorem ipsum dolor..." как выше. Это большой кусок текста вместе со всеми тегами и изображениями, выглядящий вот так:

<h3>Подзаголовок статьи</h3>
<p>Какой-то случайный абзац текста для какой-то статьи.</p>
<div class="image">
  <a data-fancybox href="xxx.jpg"><img src="xxx.jpg"></a>
  <div class="text">Описание какой-либо картинки в статье</div>
</div>

Добавление атрибута contenteditable, конечно, делает этот блок редактируемым, но при попытках добавить новый абзац или подзаголовок, все съезжает. Ломаются отступы, межстрочные интервалы и так далее. Подскажите пожалуйста, как можно адекватно реализовать редактирование вот такого контента? С сохранением заданной верстки, возможностью оборачивать выделенный текст в нужные теги и вставлять картинки с нужной мне HTML-разметкой.

Comments

[Сергей Горностаев]

Кнопку "Редактировать" просто добавьте, которая будет открывать нормальную форму с wysiwyg-редактором и без всяких там contenteditable.

[Дмитрий]

Добрый день.
Используйте готовую cms, перенесите дизайн и подключите к рабочей базе данных.
Если хотите повозиться и сделать лучше - framework. Из коробки получите то, что Вам надо.

Answer 1

[Максим Федоров]

Если ваша загвоздка именно в том, чтобы у разных сущностей статьи было свое оформление в виде html (классы, структура вложенных тегов и прочее), то можно пойти на встречу тем людям, кто редактируем и совсем спрятать от них эти детали, причем убрать любую возможность сломать верстку

В разных компаниях делают по-разном, где-то юзают маркдаун, где-то контент-билдер, который перетягиванием как конструктор собирает статью, но есть вот такой вариант:
https://editorjs.io/

Попробовать в-живую: https://vc.ru/writing

Сделан одни издательством (vc.ru, TJournal) -- редактор просто позволяет накидывать разные сущности статьи, на выходе JSON, который вы можете трансформировать в разные блоки... В документации почитаете, как расширить словарь этих сущностей.

У меня в блоге например некий подвариант маркдауна, вставляешь 2 картинки -- парсер видит соседство и генерирует код слайдера, если отдельно -- парсер генерирует 2 тега img со своими атрибутами. Блог -- обычная CMS, сделан Ильей Бирманом

Comments

[Никита Корнилов]

То, что нужно. Спасибо вам огромное. Более-менее посмотрел https://editorjs.io и понял, что под мои задачи это самый оптимальный и подходящий способ решения проблемы. То, что все данные из редактора выводятся в виде JSON строки даже лучше, чем в виде HTML структуры. Теперь те же самые статьи можно выводить не только в веб, но в мобильные приложения, чат-ботов и так далее. Оказалось очень приятным бонусом.

Да и крайне приятно использовать в своей работе те же инструменты, которыми пользуются известные интернет-издания, на сайтах которых каждый день проводишь своё время. Еще раз спасибо)

Answer 2

[lukoie]

То что Вы спрашиваете называются инлайн редакторы
Вот например https://summernote.org/examples/
посмотрите как реализован тут air-mode. Во втором параграфе дважды кликните на любом слове.