SPAW | Кирилл Павлюков
Окт 12

Недавно Владимир в комментариях к заметке о SPAW задал вопрос относительно вставки уменьшенных копий изображения.

В свое время передо мной тоже стояла такая задача. Здесь я расскажу о том, как я решил ее в своем проекте.

Для начала теория. Вставив ибображение на странице редактора SPAW, вы можете задать ему практически любой доступный HTML-атрибут, а также изменить размер изображения до необходимого вам минимума. Затем, на стороне сервера с помощью регулярных выражений можно извлечь из текста все изображения и обработать их, и привести к нужному виду.

В последнем проекте (новостной сайт) была необходимость создания превьюшек, а также максимально легко добавлять к изображениям подпись и источник, откуда оно было взято. Подпись редакторы указывали в атрибуте alt, источник – в title, а необходимые размеры брались из style. Кроме того, использовался и атрибут align.

Ниже приведен код метода из контроллера действий News (проект написан на Zend Framework), который отвечал за необходимый мне функционал. Код снабжен большим количеством комментариев, поэтому отдельно я его описывать не стану. Если возникнут вопросы – задавайте их в комментариях.

Читать запись полностью »

Share

Автор: Кирилл Павлюков \\ Метки: , , ,

Июл 30

Вы, вероятно уже поняли, что мой любимый визуальный редактор (Rich Text Editor, по-буржуйски) – это SPAW Editor. Я уже неоднократно писал заметки о SPAW. В частности, о том, как подружить SPAW и WordPress, и как сделать плагин Spaw для Smarty. Сегодня пришло время подружить SPAW с не менее замечательной опенсорсной разработкой – Zend Framework.

Принципы интеграции

В общем-то, можно инстанционировать экземпляр SPAW просто в нужном контроллере действий, и передать его экземпляр скрипту вида, который выведет в нужном месте HTML-код. Но! Во-первых, это очень просто, а мы легких путей не ищем. А – главное – во-вторых, тогда потеряется возможность фильтрации и валидации введенных пользователями данных с помощью механизмов Zend_Form. Можно, конечно, самостоятельно произвести над данными необходимые действия. Но не кошерно это, что ли.

Итак, в этой статье я опишу, как сделать редактор SPAW полноценным элементом Zend_Form.

Для начала, разберем, что собой представляет HTML-вывод SPAW. Элементы ввода (для каждой страницы редактора) – это обычные textarea, которые обрамлены килобайтами трудночитаемого HTML и JS. Это довольно примитивная характеристика, но для понимания сути ее достаточно. Следовательно, нам необходимо всего лишь «завернуть» Zend_Form_Element_Textarea в соответствующую оболочку кода. Примерно так мы и поступим – мы напишем свой Zend_Form_Decorator.

Что необходимо

Так как SPAW может оперировать двумя типами объектов (объект редактора, собственно, и объект страницы), нам понадобится 2 соответствующих декоратора: My_Decorator_Spaw и My_Decorator_SpawPage.

При этом, My_Decorator_SpawPage – это вовсе не декоратор в философии Zend_Form, а лишь механизм, с помощью которого мы будем информировать My_Decorator_Spaw о наличие дополнительных страниц. Конечно это не правильно, но другого выхода я не придумал :-( . В свою очередь, такая реализация накладывает одно ограничение на использование: все дополнительные страницы редактора должны быть объявлены ДО объявления основной страницы.

Приступим

Для начала приведу код декоратора My_Decorator_SpawPage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php

require_once $_SERVER['DOCUMENT_ROOT'] . '/spaw2/spaw.inc.php';

class My_Decorator_SpawPage extends Zend_Form_Decorator_Abstract
{
    public function render($content)
    {
        $element = $this->getElement();
        $element->setDisableLoadDefaultDecorators(true);
        $page = new SpawEditorPage($element->getName(),
                                   $element->getLabel(),
                                   $element->getValue(),
                                   $element->getAttrib('direction'));
        My_Decorator_Spaw::addPage($page);
        return NULL;
    }
}

Как видите, он создает объект страницы и передает его статическому методу My_Decorator_Spaw::addPage(). Этот метод сохраняет объект в хранилище My_Decorator_Spaw::$pages. Позже, при рендеринге основной части SPAW, все объекты страниц SpawEditorPage будут изъяты из этого хранилища. Конструктору SpawEditorPage передаюся 4 параметра, которые устанавливаются с помощью соответствующих методов объекта Zend_Form_Element_Textarea. Для понимания этого механизма либо обратитесь к мануалу, либо посмотрите раздел «Пример использования» в этой статье.

Ниже приведен код второго декоратора – My_Decorator_Spaw. Комментарии приведены в самом коде.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<?php

require_once $_SERVER['DOCUMENT_ROOT'] . '/spaw2/spaw.inc.php';

class My_Decorator_Spaw extends Zend_Form_Decorator_Abstract
{
    // объявим статическую переменную $pages - наше хранилище
    static $pages = array();

    // а это - статический метод для добавление объектов
    // страниц редактора в хранилище
    static function addPage($page) {
        array_push(self::$pages,$page);
    }
   
    // метод render() вызывается автоматически в момент генерации
    // кода элемента формы. Здесь и происходит перевоплощение обычной
    // textarea в полноценный визуальный редактор
    public function render($content)
    {
        // получим объект элемента формы для удобства доступа
        // к его свойствам
        $element = $this->getElement();
        // на всякий случай отключим дефолтные декораторы
        // для этого элемента
        $element->setDisableLoadDefaultDecorators(true);
        // создаем объект SpawEditor. В качестве параметров
        // передаются свойства элемента.
        $spaw = new SpawEditor($element->getName(),
                               $element->getValue(),
                               $element->getAttrib('language'),
                               $element->getAttrib('toolbarset'),
                               $element->getAttrib('theme'),
                               $element->getAttrib('width'),
                               $element->getAttrib('height'),
                               $element->getAttrib('stylesheet'),
                               $element->getLabel());
        // А это - небольшая хитрость. Дело в том, что конструктору
        // SpawEditor нельзя передать один параметр - направление письма.
        // Поэтому мы создадим страницу редактора с тем же именем.
        $page = new SpawEditorPage($element->getName(),
                                   $element->getLabel(),
                                   $element->getValue(),
                                   $element->getAttrib('direction'));
        $spaw->addPage($page);
       
        // Дальше следует проверка наличия дополнительных свойств,
        // и их установка для текущего объекта редактора
        if ($element->getAttrib('hideModeStrip')) {
            $spaw->hideModeStrip();
        }
        if ($element->getAttrib('hideStatusBar')) {
            $spaw->hideStatusBar();
        }
        if ($element->getAttrib('setFloatingMode')) {
            $spaw->setFloatingMode();
        }
        if (count($element->getAttrib('setStaticConfigValue')) > 0) {
            foreach ($element->getAttrib('setStaticConfigValue') as $name => $value) {
                SpawConfig::setStaticConfigValue($name,$value);
            }
        }
        if (count($element->getAttrib('setConfigValue')) > 0) {
            foreach ($element->getAttrib('setConfigValue') as $name => $value) {
                $spaw->setConfigValue($name,$value);
            }
        }        
       
        if (is_array($element->getAttrib('toolbar'))) {
            $toolbars = $element->getAttrib('toolbar');
            $element->getAttrib('toolbar');
            foreach ($toolbars as $toolbar) {
                    $spaw->addToolbar($toolbar);
                }
        }
       
        // Настало время извлечь из хранилища объекты дополнительных
        // страниц, и добавить объекту редактора
        foreach (self::$pages as $page) {
            $spaw->addPage($page);
        }
       
        // А дальше следует вывод. Комментарии, надеюсь, излишни.
        $separator = $this->getSeparator();
        $placement = $this->getPlacement();
        $output = $spaw->getHtml();

        switch ($placement) {
            case (self::PREPEND):
                return $output . $separator . $content;
            case (self::APPEND):
            default:
                return $content . $separator . $output;
        }
    }
}

Пример использования

Понять принцип использования вам поможет следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// Создадим собственно объект формы.
$form = new Zend_Form();
// Теперь нужно создать элемент для дополнительной страницы редактора.
// В этом элементе будет содержаться перевод статьи на иврит.
// Создадим новый экземпляр Zend_Form_Element_Textarea,
// в качестве параметра конструктора передадим имя элемента
// формы - 'article_hebrew'
$page = new Zend_Form_Element_Textarea('article_hebrew');
// Установим для этой страницы Label
$page->setLabel('Hebrew translation');
// Следующие 2 строки применяют к элементу созданный нами
// декоратор My_Decorator_SpawPage
$page->addPrefixPath('My_Decorator', 'My/Decorator/', 'decorator');
$page->setDecorators(array('SpawPage'));
// При необходимости - указываем текущее значение элемента
// $page->setValue('Hebrew text');
// А теперь укажем направление текста - справа на лево.
$page->setOptions(array('direction' => 'rtl'));

// Теперь создадим основную страницу редактора с именем 'article'
$element = new Zend_Form_Element_Textarea('article');
// Установим Label
$element->setLabel('English article');
// Следующие 2 строки применяют к элементу декоратор My_Decorator_Spaw
$element->addPrefixPath('My_Decorator', 'My/Decorator/', 'decorator');
$element->setDecorators(array('Spaw'));
// При необходимости - указываем текущее значение элемента
// $element->setValue('111');
// Метод setOptions() устанавливает массив параметров для элемента.
// Эти параметры будут использованы для настройки объекта редактора.
// Больше информации об этих параметрах можно найти в документации по SPAW.
$element->setOptions(array('direction' => 'ltr',
                           'language' => 'ru',
                           'width' => '600px',
                           'height' => '400px',
                           'toolbar' => array('edit','font'),
                           'theme' => 'spaw2',
                           'stylesheet' => 'cust.css',
                           'hideModeStrip' => TRUE,
                           'setFloatingMode' => FALSE,
                           'hideStatusBar' => TRUE,
                           'setStaticConfigValue' => array('default_height' => '200px',
                                                           'default_width' => '200px'),
                           'setConfigValue' => array('default_height' => '500px',
                                                     'default_width' => '500px')));
// Вначале добавим в форму все дополнительные страницы редактора
$form->addElement($page);
// И лишь затем - основную страницу. Это связано с тем, что
// рендеринг элементов происходит в порядке их добавления.
$form->addElement($element);
// Теперь можно вывести форму или передать ее в скрипт вида либо на обработку.
echo $form->render();

Послесловие

Вероятно, я выбрал не очень «изящный» способ интеграции. Но он наиболее легко реализуем. Если у вас будут другие соображения, как подружить SPAW и Zend Framework, пишите каменты – обсудим!

Share

Автор: Кирилл Павлюков \\ Метки: , , , ,

Июн 04

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

Ну, да ладно. Возвращаюсь к теме. Душа потребовала заменить установленный на блоге редактор TinyMCE на что-нибудь более удобное. Выбор был сделан в пользу SPAW Editor. (К слову, я уже делал несколько постов по этой теме. Найти их можно здесь и здесь.)

Установка безумно проста и не требует никаких глубоких знаний.

Читать запись полностью »

Share

Автор: Кирилл Павлюков \\ Метки: , , , ,

Мар 17

В ноябре прошлого года я разрабатывал проект, использующий Zend Framework и Smarty.
Как я уже недавно писал, мой любимый визуальній редактор – Spaw Editor от компании Solmetra.
А вот пример того, как можно написать плагин для Smarty для быстрой вставки редактора в тело страницы. Думаю, что комментировать код нет необходимости – тут и так все понятно. Кроме того, модифицировав всего пару строк, можно исключить Zend Framework, если ваш проект не использует его.
И еще: этот плагин писался под конкретный проект, поэтому в нем реализовано лишь то, что было необходимо мне. Вполне вероятно, что вам окажется недостаточно такой функциональности.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?php
/**
* Smarty plugin
* @package Smarty
* @subpackage plugins
*/

/**
* Smarty {spaw} function plugin
*
* Type: function
* Name: spaw
* Date: Nov 11, 2007
* Purpose: automate creation Spaw Editor
* Input:
*     - name = name of textarea, default - 'Text'
*     - value = default value
*     - lang =
*     - toolbarset
*     - theme
*     - width
*     - height
*     - stylesheet
*     - page_caption
* Examples:
*     <pre>
*     {spaw}
*     {spaw name='Description' lang='en'}
*    
* @version 1.0
* @author Kirill Pavliukov <kirill></kirill>
* @param array
* @param Smarty
* @return string
* @todo Spaw Pages
*/

function smarty_function_spaw($params, &amp;$smarty)
{
    if (!defined('WWW_DIR')) define('WWW_DIR',$_SERVER['DOCUMENT_ROOT']);
    $name = ((isset($params['name'])) ? $params['name'] : null);
    $value = ((isset($params['name'])) ? $params['value'] : '');
    $lang = ((isset($params['lang'])) ? $params['lang'] : null);
    $toolbarset = ((isset($params['toolbarset'])) ? $params['toolbarset'] : '');
    $theme = ((isset($params['theme'])) ? $params['theme'] : '');
    $width = ((isset($params['width'])) ? $params['width'] : '');
    $height = ((isset($params['height'])) ? $params['height'] : '');
    $stylesheet = ((isset($params['stylesheet'])) ? $params['stylesheet'] : '');
    $page_caption= ((isset($params['page_caption'])) ? $params['page_caption'] : '');
    if ($name == null) $smarty-&gt;trigger_error('(SPAW) Parameter `Name` must be specified');
    if ($lang == null) {
        $front = Zend_Controller_Front::getInstance();
        $lang = $front->getRequest()->getParam('language');
    }

    $pages = ((isset($params['pages'])) ? $params['pages'] : null);
    if ($name == '') $name = 'Text';

    require_once(WWW_DIR . 'spaw2/spaw.inc.php');
    $spaw = new SpawEditor($name, $value, $lang, $toolbarset, $theme, $width, $height, $stylesheet, $page_caption);

    if ($pages) {
        $pages = split(';',$pages);
        foreach ($pages as &amp;$page) {
            $page = split('::',$page);
            if (!isset($page[0]) or empty($page[0])) $smarty->trigger_error('(SPAW) Page name myst be specified!');
            if (!isset($page[1]) or empty($page[1])) $smarty->trigger_error('(SPAW) Page caption myst be specified!');
            if (!isset($page[2])) $page[2] = '';
            if (!isset($page[3])) $page[3] = 'ltr';
            $spawPage = new SpawEditorPage($page[0],$page[1],$page[2],$page[3]);
            $spaw->addPage($spawPage);
        }
    }
    $spaw->show();
}

?>
Share

Автор: Кирилл Павлюков \\ Метки: , , , ,

Мар 06

Спорить о том, какой визуальный html-редактор лучше, а какой – хуже, можно очень долго. Равно как и о том, нужно ли их использовать вообще. В моих проектах визуальный редактор необходим, так как редакторский состав напрочь отказывается от использования в своей работе BB-кодов или чистого HTML.

Довольно долго я внедрял в свои проекты FCKEditor, затем переключился на TinyMCE. Но однажды (примерно летом 2007 года :-) ) произошло мое знакомство с наиболее, на мой взгляд, удобным редактором – SPAW Editor от компании Solmetra - http://www.spaweditor.com/. Этот редактор распространяется бесплатно, под GNU General Public License (GPL), но также можно приобрести и коммерческую лицензию.

Что мне больше всего в нем нравится? В отличие от тех же FCKEditor или TinyMCE – он не тормозит браузер. Это связано с тем, что редактор прорисовывается не из JavaScript, а непосредственно в HTML. Тут конечно дело вкуса, но мне и нашим редакторам нравится, что поле редактора не замирает при простой вставке текста из буфера.

Неоспоримое преимущество SPAW2 - встроенный файл-менеджер. Действительно мощный инструмент, и, опять-таки, бесплатный.

SPAW2 доступен для PHP и .NET, но так как с дотнетом я не дружу, все записи на этом блоге будут касаться именно PHP.

В этом посте я расскажу, как установить и начать использовать SPAW2. Читать запись полностью »

Share

Автор: Кирилл Павлюков \\ Метки: , , ,