Лекция 5 Алгоритмизация и программирование. Подключение редактора tinymce для бэкенд сценариев

Подключение редактора tinymce для бэкенд сценариев

Бэкенд разработка включает в себя разработку административной части WEB-приложения, которая позволяет формировать контент страниц сайта, отображаемых в фронтенд. Обычно набор управления сайтом включает в себя:

Формирование групп разделов сайта (разделов) и их разделов (подразделов)
Формирование контента разделов и подразделов
Загрузка файлов изображений и документов.

В данной лекции мы рассмотрим один из способов формирования контента разделов сайта с использованием удобного редактора tinymce.

Что такое редактор tinymce

TinyMCE это платформенно-независимый Javascript HTML WYSIWYG веб-редактор. Он позволяет простым пользователям форматировать контент, примерно так, как это делается в популярных текстовых редакторах, таких, как MS WORD. То есть просто набирать текст, применять инструменты вставок и форматирования. При этом редактор сам формирует необходимый HTML код.

При желании можно открыть специальное окно и редактировать HTML код вручную.

TinyMCE - онлайн-редактор форматированного текста, выпущенный как программное обеспечение с открытым исходным кодом по лицензии MIT.[2] Он преобразует HTML textarea поля или другие обозначенные HTML-элементы в экземпляры редактора.

Cовместим практически со всеми популярными браузерами в любой операционной системе, которая официально поддерживает данный браузер.

Скачивание и установка

Скачать TinyMCE можно с официального сайта по адресу https://www.tiny.cloud/

Скачанный дистрибутив содержит папку tinimce в котором содержатся файлы плагина и html файлы, демонстрирующие его работу.

Для установки tinimce на WEB-страницу необходимо подключить плагин, вставив необходимый JavaScript код в разделе :


  <script type="text/javascript">
  tinymce.init({
    selector: 'textarea',
	language: 'ru',
    plugins: 'ai tinycomments mentions anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed permanentpen footnotes advtemplate advtable advcode editimage tableofcontents mergetags powerpaste tinymcespellchecker autocorrect a11ychecker typography inlinecss code accordion ',
    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | tinycomments | checklist numlist bullist indent outdent | emoticons charmap | removeformat | code | accordion | ',
    tinycomments_mode: 'embedded',
    tinycomments_author: 'Author name',
    mergetags_list: [
      { value: 'First.Name', title: 'First Name' },
      { value: 'Email', title: 'Email' },
    ],
  ai_request: (request, respondWith) => respondWith.string(() => Promise.reject("See docs to implement AI Assistant")),   
  });
  script>

По умолчанию плагин tinymce англоязычен.

Для установки русского языка, в папку необходимо скачать и установить языковый плагин .

В разделе размещается форма, содержащая элемент textarea, который в результате работы плагина превращается в редактор html кода.

<form method="post" action="?p=1">
    <textarea name="incontent"></textarea>
    <input type="submit" value="Сохранить">
  </form>

Облик редактора при указанных настройках должен принять следующий вид:

Редактор формирует чистый html код, который можно с помощью обработчика формы записывать в базу данных или в файл.

Работу редактора можно посмотреть, перейдя по ссылке:

http://www.oknemuan.ru/redactor

Работающий код демоверсии можно скачать здесь:

https://www.oknemuan.ru/files/algoritmization/redactor.ok.zip .