Обработка данных с WYSIWYG редакторов

18 Янв
2012

Есть тривиальная задача: установить на сайте визуальный редактор, чтобы пользователи могли делать записи в комментариях, блогах, форумов и т.д. Нужно избавить пользователя от BB кода и дать возможность форматировать следующие параметры разметки:

1) Жирность текса
2) Курсив текста
3) Подчеркивание, зачеркивание текста
4) Выравнивание текста
5) Размер шрифта (в разрешенном диапазоне)
6) Цвет текста
7) Фон текста
8) Отступ текста слева (в разрешенном диапазоне)

Большинство WYSIWYG редакторов поддерживают перечисленные инструменты для разметки. Они могут размечать с помощью внутренних таблиц стилей (HTML + CSS) или исключительно HTML тегами. Во втором случае будет задействован тег «FONT», который является морально устаревшим и не рекомендуется к использованию. Поэтому будем использовать внутренние таблицы стилей.

Наша задача предусмотреть обработку получаемых данных на сервере.



Jevix — хороший скрипт для приведения HTML/XML разметки в требуемый вид. Простой и удобно-настраиваемый. Но, к сожалению, на данный момент в нем не предусмотрена обработка внутренних таблиц стилей. В настройках можно разрешить для конкретного тега атрибут «style», но его значение обработать нельзя. Это упущение поправимо.

Итак, скачиваем jevix 1.1

Далее скачиваем написанный мною плагин для обработки CSS, он представляет собой наследственный класс, подходит к версиям jevix 1.0-1.1.

Инструкция настройки jevix находится в файле jevixtest.php.

Мы настраиваем под свою задачу:

require('jevix.class.php');
require('jevixandstyle.class.php');

// Объявляем объект класса JevixAndStyle вместо Jevix
$jevix = new JevixAndStyle();

//Конфигурация

// 1. Устанавливаем разрешённые теги. (Все не разрешенные теги считаются запрещенными.)
$jevix->cfgAllowTags(array('p', 'br', 'span', 'i', 'em', 'b', 'strong', 'u', 's', 'strike', 'br'));

// 2. Устанавливаем коротие теги. (не имеющие закрывающего тега)
$jevix->cfgSetTagShort(array('br'));

// 4. Устанавливаем теги, которые необходимо вырезать из текста вместе с контентом.
$jevix->cfgSetTagCutWithContent(array('script', 'object', 'iframe'));

// 5. Устанавливаем разрешённые параметры тегов. Также можно устанавливать допустимые значения этих параметров.
$jevix->cfgAllowTagParams('p', array('style'));
$jevix->cfgAllowTagParams('span', array('style'));

// 9. Устанавливаем автозамену
$jevix->cfgSetAutoReplace(array('±', '©', '®'), array('±', '©', '®'));

// 10. Включаем или выключаем режим XHTML. (по умолчанию включен)
$jevix->cfgSetXHTMLMode(true);

// 11. Включаем или выключаем режим замены переноса строк на тег
. (по умолчанию включен)
$jevix->cfgSetAutoBrMode(false);

// 12. Включаем или выключаем режим автоматического определения ссылок. (по умолчанию включен)
$jevix->cfgSetAutoLinkMode(true);

// 20. Устанавливаем разрешённые параметры внутренних таблиц стилей для тегов
$jevix->cfgSetTagStyleParams('span',
array(
'text-decoration' => array('none', 'line-through', 'underline'),
'font-style' => array('normal', 'italic'),
'font-weight' => array('normal', 'bold'),
'font-size' => '#regexp:%^(8|10|12|14|16|18|20)px$%i',
'color' => '#regexp:%^#([a-f0-9]{6}|[a-f0-9]{3})$%i',
'background-color' => '#regexp:%^#([a-f0-9]{6}|[a-f0-9]{3})$%i',
)
);

$jevix->cfgSetTagStyleParams('p',
array(
'padding-left' => '#regexp:%^(30|60|90|120|150|180)px$%i',
'text-align' => array('left', 'center', 'right', 'justify'),
)
);

$res = $jevix->parse($text, $errors);



Таким образом, добавилась одна настройка «cfgSetTagStyleParams»

Первый параметр это тег (или массив тегов) к которому привязаны параметры внутренних таблиц стилей.
Второй параметр это ассоциативный массив: CSS параметр => массив или регулярное выражение CSS значений. Регулярное выражение начинается с приставки «#regexp:»

Задача решена.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх