Nikkorfed
@Nikkorfed
20 лет, веб-разработчик из Екатеринбурга.

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

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

Есть самописный корпоративный сайт, на котором публикуется различная информация о компании, в том числе её новости. Все данные на сайт подтягиваются из БД, в которую информация добавляется вручную через 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-разметкой.
  • Вопрос задан
  • 270 просмотров
Решения вопроса 1
Maksclub
@Maksclub Куратор тега PHP
maksfedorov.ru
Если ваша загвоздка именно в том, чтобы у разных сущностей статьи было свое оформление в виде html (классы, структура вложенных тегов и прочее), то можно пойти на встречу тем людям, кто редактируем и совсем спрятать от них эти детали, причем убрать любую возможность сломать верстку

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

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

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

У меня в блоге например некий подвариант маркдауна, вставляешь 2 картинки -- парсер видит соседство и генерирует код слайдера, если отдельно -- парсер генерирует 2 тега img со своими атрибутами. Блог -- обычная CMS, сделан Ильей Бирманом
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
lukoie
@lukoie
То что Вы спрашиваете называются инлайн редакторы
Вот например https://summernote.org/examples/
посмотрите как реализован тут air-mode. Во втором параграфе дважды кликните на любом слове.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы