Альтернативные текстовые редакторы

Для редактирования текстовых данных (типы данных MySQL: text и blob) в Blox CMS применяется встроенный редактор. Это означает, что в окне редактирования вы сможете не только набирать текст, но и определенным образом оформлять его.

Штатный редактор обеспечивает только основные функции форматирования (жирный и наклонный текст, вставка ссылки, нумерованный и ненумерованный списки). В принципе, этого достаточно, так как стиль текста должен закладываться в шаблоне, а редактор должен заниматься только набором текста. Однако, если вы все же, захотите дать пользователям возможность изменять параметры текста (размер, цвет, расстояние между буквами, строками и абзацами, отступы, буквицы, и т.п.), то можно подключить другой текстовый редактор. В Интернете предлагается большое количество таких редакторов (искать можно по ключевым словам: "WYSIWYG редактор на Javascript").

Обычно для подключения к веб-странице текстового редактора, написанного на языке JavaScript необходимо сделать две вещи. Во-первых, в разделе head кода страницы нужно добавить ссылки на файлы редактора или написать код JavaScript, предоставленный разработчиками редактора. Во-вторых, бывает нужно немного изменить код тега textarea (например, добавить класс), чтобы над полем ввода текста появилась панелька форматирования. Во многих редакторах второй пункт выполнять вообще не приходится, и все теги textarea автоматически получают панельки форматирования.

Так или иначе, для подключения альтернативного текстового редактора необходимо взять два фрагмента кода, предлагаемого разработчиками редактора, и вставить их в веб-страницы. В Blox CMS для подключения текстового редактора не нужно редактировать файлы системы. Упомянутые выше фрагменты нужно просто записать в отдельные файлы: textEditorLink.php и textEditorOutput.php. При необходимости они будут автоматически подключаться системой.

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

  1. В корневой папке сайта (где находится главный файл index.php) создайте новую папку, дайте ей имя xTextEditor и поместите в нее все файлы редактора.
  2. Создайте два файла: textEditorLink.php и textEditorOutput.php, и поместите их в ту же папку. Ниже приводятся примеры содержимого этих файлов. Реальные html-коды нужно найти в дистрибутиве соответствующего текстового редактора.
    • textEditorLink.php
      <link href="<?= $textEditorUrl ?>/myEditor.css" rel="stylesheet" type="text/css">
      <script type="text/javascript" src="<?= $textEditorUrl ?>/myEditor.js"></script>
      
      Этот код подключает текстовый редактор. Вставку php-кода с переменной $textEditorUrl изменять не нужно. Это URL (адрес в Интернете) папки, где находятся файлы редактора.
    • textEditorOutput.php
      <textarea name="dat[<?= $field ?>]" class='myEditor'>
          <?= $dat[$field] ?>
      </textarea>
      

      Этот код непосредственно выводит текстовый редактор с полем ввода текста. За поле ввода текста в HTML отвечает тег textarea. Обычно бывает достаточно изменить или добавить (согласно инструкции для редактора) какой-то атрибут для этого тега. Некоторые редактора, например, популярный редактор TinyMCE, вообще не требуют изменений этого тега. Для других редакторов бывает нужно целиком заменить тег textarea на какой-то код JavaScript.

      Вставки php-кода с переменными $field, $dat[] изменять не нужно. В шаблоне может находиться несколько полей для ввода массивных текстов (типы данных MySQL: text и blob). Первая вставка выводит номер поля данного, редактируемого с помощью текстового редактора, вторая отображает - извлеченное из БД значение данного поля.

      В одной записи обычно бывает несколько данных. Имена данных представлены нумерованным массивом dat. Если подключаемый редактор не поддерживает массивы в атрибуте name тега textarea, то есть, не работает запись вида name="dat[9]" , то имена допустимо записывать в скалярном виде dat9 (Blox CMS сама приведет их к массиву). С учетом сказанного код будет выглядеть так:

      textEditorOutput.php
      <textarea name="dat<?= $field ?>" class='myEditor'>
          <?= $dat[$field] ?>
      </textarea>
      
  3. Специальной активации текстового редактора не требуется. Наличие папки xTextEditor само по себе будет означать, что используется альтернативный текстовый редактор.

Единственный параметр, на наш взляд, в пользу подключения альтернативного текстового редактора - это возможность вставки таблиц. Как раз, редактор TinyMCE и предоставляет такую возможность.


Примечания

  • К сожалению, большинство "больших" текстовых редакторов не поддерживает многосайтовый режим (из-за запрета междоменного соединения), поэтому файлы этих редакторов помещаются в папку сайта, как это было описано выше. То есть, файлы редактора нужно закачивать для каждого сайта отдельно.
  • Впрочем, если у вас имеется текстовый редактор, обеспечивающий междоменное (cross domain) соединение, его можно сделать штатным редактором Blox CMS, и использовать, таким образом, один комплект файлов редактора для нескольких сайтов. Процедура подключения такая же, с единственным отличием в пункте 1, то есть, файлы редактора помещаются не в папку сайта xTextEditor, а в папку системы BLOX/textEditor.