WYSIWYG в подробностях. SPAW Editor

Постепенно интернетизация привела к тому, что в Сети теперь можно работать с серьезными офисными приложениями вроде Microsoft Word (см. сайт ). Да только вопрос в том, какими средствами обойдется подобное решение: плата за сам продукт + оплата трафика больно ударят по карману. Есть второй вариант работы с WYSIWYG-приложениями — локальный (Dreamweaver, NVU и т.д.), но он сразу же отпадает, т.к. профессиональные продукты тоже стоят денег, да и в Интернете с ними не поработаешь… Короче, когда-то очень давно я знакомил читателя с редактором FCKeditor, а еще ранее — с TinyMCE. Сегодня речь пойдет о редакторе Spaw Editor — далеко не самом распространенном WYSIWYG. Поговорим о настройке и интеграции скрипта на сайт, отметим особенности в сравнении с другими редакторами. Приступим!

Разработчик: Solmetra
Лицензия: GNU, бесплатно, коммерческая лицензия — 20-250 евро
Сайт поддержки: www.solmetra.com
Размер дистрибутива: 0,4/1 Mb (в распаковке)
Совместимость с браузерами: Opera 9, Mozilla, Netscape, IE Explorer

Установка и настройка

Установка подробно описана в документации к редактору, так что ссылаться буду на нее. Текущая версия Spaw'а идет под номером 2, скачать ее можно на вышеуказанном сайте. Совершенно нет нужды скачивать Spaw ветки 1.x, поскольку за прошедшее от версии к версии время разработчики внесли громадное количество изменений. Об этом свидетельствует хотя бы changelog с ежемесячными FEATURE ADDED, BUGFIX, COSMETIC FIX, то есть с изменениями, внесенными в код. Также отмечу, что существуют две версии редактора: для PHP- и ASP.Net-платформ. Мы выбрали PHP-платформу в силу ее большей распространенности. Раздобыв дистрибутив, распакуем его в папку spaw, после чего отыщем и исправим конфигурационный файл. Это config.default.php из директории config — переименуем его в config.php. Вот и вся установка. Запуск редактора осуществляется по адресу demo/demo.php. Demo.php — это небольшой php-скрипт, и при открытии очевидно, что он содержит немало лишних строк. И на самом деле: весь код рациональнее всего привести к такому виду, убрав следы html-кода:

- index.php -

<?php
include("../spaw.inc.php");
$spaw1 = new SpawEditor("spaw1");
$spaw1->show();
?>

- index.php -

Данный файл можете разместить где угодно — важно, чтобы путь к spaw.inc.php был корректным (вторая строка кода). Я назвал его index.php (см. выше по тексту) и поместил в корень Spaw'а. Для запуска редактора вбиваем в адресной строке браузера "localhost/spaw/", а сервер Apache уже и сам "поймет", что index.php — это индексный файл, на который ему и нужно "натравить" браузер. Кстати, не забудьте, что все опыты мы проводим на виртуальном сервере в связке с Apache/PHP.

Настройка интерфейса

Локализация

Что наблюдаем после запуска скрипта? Видим приятно оформленный WYSIWYG на английском языке. Конечно, WISYWIG не будет лишним локализовать. Я пробовал найти в недрах редактора какой-нибудь файл русификации типа ru.js, но такового не оказалось. Он был запрятан гораздо глубже, чем предполагалось — в plugins/core/lib/lang — под именем ru.lang.inc.php, кодировка — UTF-8. Откроем конфиг config.php и найдем строку
SpawConfig::setStaticConfigItem('default_lang','en');

Заменяем параметр 'en' на 'ru', сохраняем документ, перезагружаем браузер — и в результате все элементы интерфейса переведены. Кстати, плагины, которые вы будете устанавливать позже, автоматически переводятся на выставленный в настройках язык.

Смена кодировки

Для краткости я буду пропускать сочетание "SpawConfig::setStaticConfigItem", поскольку это обязательное условие любой команды в конфиге. default_output_charset — установка кодировки символов. Если в текстовом поле символы отображаются некорректно, посмотрите настройки браузера: какая кодировка стоит в нем по умолчанию, — и выставьте ее в конфиге Spaw'а внутри кавычек: utf-8, windows-1251, cp1251 … etc. Как жаль, что не все браузеры такие "интеллектуальные", как Opera:).

Настройка панели инструментов

Тулбар Spaw'а имеет ряд отличий перед TinyMCE и FCK. Во-первых, строка состояния не так бесполезна, как в Tiny. Кроме того, текстовое поле можно изменить в размерах без прописывания каких-либо настроек в конфиге. Что называется, "resizeable Editing Area". Достаточно протянуть указателем мыши за правый нижний угол — поле растянется до нужных размеров. Параметр default_toolbarset отвечает за отображение элементов тулбара. Кроме начальной надстройки standard, есть еще два типа:
1) all — то же, что и standard, плюс меню выбора шрифта и его размера;
2) mini — "легкая" версия редактора с восьмью кнопками.

Вы можете создать собственный toolbar-набор. Во всех WYSIWYG такая опция обычно присутствует, разве что синтаксис для каждого редактора свой. Можно ознакомиться с кодом, который идет после

// toolbar sets (should start with "toolbarset_"

Ниже комментария в конфиге приведен код тулбаров standard, all и mini. В принципе, нетрудно создать свой набор типа toolbarset_only_text. Помимо этого, вы можете поменять очередность кнопок и элементов на панели — посмотрите файлы в plugins/core/lib/toolbars/ и правьте на свое усмотрение.

Подключение таблицы стилей

В Spaw'е со стилями дела обстоят несколько иначе, нежели с FCKeditor'ом. Css-файл, применяемый редактором по умолчанию, именуется wysiwyg.css и находится в корневой директории. На это указывает параметр default_stylesheet со значением wysiwyg.css в конфигурационном файле. Wysiwyg.css содержит в себе параметры стилей, что и так понятно. А вот имена .style1, .style2 и т.д. употреблены неспроста, так как в том же конфиге мы обнаруживаем параметр dropdown_data_core_style, а еще ниже —

'style1' => 'Style No.1',
'style2' => 'Style No.2',

Style1 — это эквивалент .style1 в css-файле, а 'Style No.1' соответствует названию, которое отображается в ниспадающем меню (dropdown menu). По такому принципу, к слову, работают и другие ниспадающие менюшки: см. раздел Dropdown Data документации.

Настройка цветовой палитры

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

colorpicker_predefined_colors

точнее, всем, что включено в массив array(). Цвета лучше всего записывать в цифровом формате, поскольку существующих в буквенном эквиваленте не так уж и много ('black', 'silver', 'gray', 'white' и т.д.). Какие оттенки цветов есть еще, можно посмотреть здесь: www.w3.org/TR/css3-color/.
Многовкладочность

В Spaw предусмотрена возможность переключения вкладок (наподобие браузерных). Насколько эта вкладочность удобна, я не ощутил. Видимо, она припасена на "особые случаи жизни", например, для перевода: таким образом и впрямь удобно что-то переводить, сравнивать и исправлять, переключая окна. Количество вкладок произвольное и зависит от заданного количества строк с параметром addPage в файле index.php:

$spaw->addPage(new SpawEditorPage("article_1","название вкладки"));

Причем "article_1" — единственное название, которое не должно повторяться при наименовании следующих вкладок.

Менеджер файлов

Следует отметить, что по сравнению с TinyMCE и FCKeditor'ом файловый менеджер Spaw'а вызывает меньше всего вопросов. Он исправно работает еще изначально, то есть в настройки конфигурационного файла можно даже не заглядывать. Хотя часть настроек из соображений безопасности все же заблокирована директивами конфига. Мы рассмотрим директивы со значением false, и, если это не будет перечить безопасности, поменяем на true. В конфигурационном файле Spaw настройки файл-менеджера прописаны после комментария

// SpawFm plugin config

Собственно настройки:

allow_modify — разрешить редактирование имен и удаление файлов директории;
recursive — задействовать вложенные директории или нет. Если нет, то две следующие директивы не имеют силы;
allow_modify_subdirectories — разрешить редактирование имен и удаление директорий;
allow_create_subdirectories — разрешить создание директорий;
allow_upload — разрешить закачку файлов;
chmod_to = > 0777 (нужно раскомментировать) — устанавливаем права доступа для папки /upload

В рамкаx каждой директории действует директива allowed_filetypes, после которой в конфиге между скобок указывается перечень разрешенных к закачке типов файлов конкретно для данной папки. Any — разрешено все, flash и images — только файлы с определенными расширениями. Не вижу смысла говорить об остальных параметрах — оставляю их вам на самостоятельное рассмотрение, благо все они пояснены комментариями.

Уменьшаем вес

Исходный размер распакованного Spaw'а — 1,05 Mb. Убрав лишние скрипты, компоненты и им подобное, посмотрим, насколько его можно урезать. Удалению подлежат:

1) папки /docs, /demo
2) файлы локализации, кроме русского и английского языков

На выходе я получил редактор размером в 630 Kb. Неплохо! Конечно, можно удалить все мелкие файлы, если вы не потерпите и нескольких лишних килобайт, но здесь рассказывать об этом не стану. Тем более, что размер Spaw'а никак не повлияет на его быстродействие:).

Дополнения

Директория для плагинов — /spaw/plugins/ — сюда их и скидывайте. С одной стороны, редактор и без дополнений достаточно функционален, с другой — честно говоря, ассортимент не радует, поскольку дополнений мало (по крайней мере, для 2.x версии Spaw), да и пользы от них немного. Change Case — плагин для быстрого конвертирования регистра — как показала практика, совершенно бесполезен в браузере Opera.
Image Popup — добавление ссылки на pop-up-изображения.
Custom Button — быстрая вставка определенного фрагмента (текст/HTML-код).
IeSpell (только для IE) — плагин для подключения спеллчекера в MS Internet Explorer'е. Саму же программу IeSpell нужно брать с www.iespell.com. Собственно, это все, что мне удалось найти. Плагины можно скачать как на www.solmetra.com, так и на sourceforge.net.

Заключение

Порадовало, что редактор работоспособен во всех браузерах, в т.ч. и в Opera 9. Пожалуй, только в Safari 3.0 он ничего не показал (но Safari — это своего рода экзотика). Что до остального, то Spaw входит в состав таких CMS, как osCommerce, Seditio CMS, Joomla/Mambo, Xoops и др. Если появятся вопросы, задавайте их на Ilyuha.org.ua в комментариях. Чуть позже выложу свою сборку на сайт. Удачи!

Ссылки:

www.blog.solmetra.com — блог разработчиков редактора Spaw: информация о последних обновлениях и релизах;
сайт — развернутое обсуждение Spaw'а на форуме CMS Danneo;
сайт — Spaw на сервере Sourceforge.

Илья Муравьев, Ilyuha.org.ua