Редактор текста для сайта.

Редактор текста для сайта.смотрим как он работает.

Действия для подключения кода:

1. В <head></head> подключаем скрипт
2. В форме ввода вставляем в поле кода редактора.
3. После формы ввода набираем js код
4. Добавляем 2 файла, в директории скрипта: 
upload="/директория/upload_image.php"
delete="/директория/delete_image.php">
и меняем в этих файлах путь к базе данных и к расположению папки uploads
5. в обоих файлах меняем путь к папке, пример:
// Получаем абсолютный путь к директории загрузок
$uploadsDir = realpath(__DIR__.'/../uploads/');
Выше указан путь к корневому каталогу

6. создаем в корневом каталоге папку uploads

Всё!

Подключаем код редактора в <head></head>:

<!-- Подключаем модуль (1 раз на страницу) -->
<script type="module" src="/assets/js/simple-wysiwyg-editor.js"></script>

Путь указываем к месту где размещен наш код.

Далее, встраиваем код в тело, в нужном месте формы:

<form method="POST" action="edit_note.php?id=<?php echo $note_id; ?>">

  <label for="title">Название:</label><br>
  <input type="text" name="title" id="title"
         value="<?php echo htmlspecialchars($note['title'],ENT_QUOTES); ?>" required><br><br>

  <!-- 2. WYSIWYG-редактор вместо textarea  -->
  <label for="contentEditor">Содержание:</label><br>

  <simple-editor  id="contentEditor"          <!-- любой id -->
                  name="content"              <!-- то же имя, что было у textarea -->
                  upload="/planner/upload_image.php"
                  delete="/planner/delete_image.php">
  </simple-editor>
  <br><br>

  <!-- остальные поля формы… -->
  <label for="section">Раздел:</label><br>
  ...
  <button type="submit">Обновить запись</button>
</form>

<!-- 3. Передаём исходный HTML в редактор (одна строка JS) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const ed = document.getElementById('contentEditor');
    ed.value = <?php echo json_encode($note['content']); ?>;   // ← заполнение
  });
</script>

Пояснение к коду выше:

 <label for="contentEditor">Содержание:</label><br>

  <simple-editor  id="contentEditor"          <!-- любой id -->
                  name="content"              <!-- то же имя, что было у textarea -->
                  upload="/planner/upload_image.php"
                  delete="/planner/delete_image.php">
  </simple-editor>
  <br><br>

Это и есть подключение нашего редактора в форму.

После формы или в любом другом месте, код ниже. В примере, выше он уже отмечен.

    <!-- Инициализация подсветки кода Highlight.js -->
    <script>
        document.querySelectorAll('pre code').forEach((block) => {
            hljs.highlightBlock(block);
        });
    </script>

Для вывода на сайте, чтобы отображалось правильно, нужно добавить класс у поля вывода!