How to add the ability to live edit the site?

Question

CMS

Good afternoon, dear Toaster experts. I need your help.
There is a self-written corporate website, which publishes various information about the company, including its news. All data on the site is pulled from the database, in which information is added manually through phpMyAdmin. The customer often asks to edit something, so it became necessary to make a convenient interface for him to update the site, and in particular, to add and edit news.
How to do it in general terms seems to have figured out. I made the fields with date, author, title, etc. editable by adding the contenteditable attribute, wrapped it all in a form, and configured data to be updated in the database when it was submitted. There was a small hitch in editing the main content of the article. It's not just a line of text like "Lorem ipsum dolor..." as above. It's a big chunk of text along with all the tags and images, looking like this:

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

Adding the contenteditable attribute, of course, makes this block editable, but when you try to add a new paragraph or subheading, everything moves out. Breaking indents, line spacing, and so on. Can you please tell me how to adequately implement editing of such content? With saving the given layout, the ability to wrap the selected text in the necessary tags and insert pictures with the HTML markup I need.

Answer 1

If your snag is precisely that the different entities of the article have their own design in the form of html (classes, the structure of nested tags, etc.), then you can meet those people who edit and completely hide these details from them, and remove any possibility break the layout
Different companies do it differently, somewhere they use markdown, somewhere a content builder that assembles an article by dragging and dropping like a constructor, but there is this option:
Try it live: https ://vc.ru/writing
Made by one publishing house (vc.ru, TJournal) - the editor simply allows you to throw in different entities of the article, at the output of JSON, which you can transform into different blocks... Read the documentation how to expand the dictionary of these entities.
For example, I have a certain sub-variant of markdown on my blog, you insert 2 pictures - the parser sees the neighborhood and generates the slider code, if separately - the parser generates 2 img tags with their attributes. Blog - regular CMS, made by Ilya Birman

Answer 2

What you are asking is called inline editors
For example https://summernote.org/examples/
see how air-mode is implemented here. In the second paragraph, double-click on any word.