Визуальный wysiwyg текстовый редактор Imperavi для Yii

• Установка и использование Imperavi Redactor в Yii
  • Установка Imperavi Redactor в Yii
  • Использование Imperavi Redactor в Yii
• Установка и использование Imperavi Redactor в Yii2
• Установка Imperavi Redactor в Yii2 с помощью composer
• Установка Imperavi Redactor в Yii2 без использования composer
• Использование Imperavi Redactor в Yii2
• Дополнительно

Установка и использование Imperavi Redactor в Yii

Установка Imperavi Redactor в Yii

Для начала необходимо скачать виджет imperavi-redactor-widget: https://github.com/yiiext/imperavi-redactor-widget и скопировать его в /protected/extensions/imperavi-redactor-widget.

Использование Imperavi Redactor в Yii

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

Yii::import('ext.imperavi-redactor-widget.ImperaviRedactorWidget');

И в представлении вызываем сам виджет:

<?php
$this->widget('ImperaviRedactorWidget', array(
    //используем модель
    'model' => $modelName, //модель
    'attribute' => 'fieldName', //имя поля
    //или просто для поля ввода 'name' => 'inputName',
    'name' => 'my_input_name',
    // Настройки виджета, подробнее: http://imperavi.com/redactor/docs/
    'options' => array(
        'lang' => 'en',
        'toolbar' => false,
        'iframe' => true,
    ),
));

Пример вызова виджета с дополнительными параметрами:

<div class="form-group">
    <?php
    echo $form->labelEx($model, 'shortText');
    $this->widget('ImperaviRedactorWidget', array(
        'model' => $model,
        'attribute' => 'shortText',
        'options' => array(
            'focus' => true,
            'lang' => Yii::app()->language,
            'buttons' => array('html', 'bold', 'deleted', 'unorderedlist', 'orderedlist', 'link'),
        ),
    'htmlOptions' => array('placeholder' => 'Введите краткое описание статьи')
    ));
    echo $form->error($model, 'text');
    ?>
</div>
 
<div class="form-group">
    <?php
    echo $form->labelEx($model, 'text');
    $this->widget('ImperaviRedactorWidget', array(
        'model' => $model,
        'attribute' => 'text',
        'options' => array(
            'minHeight' => 300,
            'lang' => Yii::app()->language,
            'imageUpload' => '/pathToFolder',
            'formatting' => array('p', 'blockquote', 'pre', 'h2', 'h3'),
        ),
        'plugins' => array(
            'fullscreen' => array(
                'js' => array('fullscreen.js',),
            ),
            'table' => array('js' => array('table.js',),),
            'imagemanager' => array('js' => array('imagemanager.js',),),
            'filemanager' => array('js' => array('filemanager.js',),),
            'clips' => array(
                //можно указать путь для публикации
                //'basePath' => 'application.components.imperavi.my_plugin',
                //можно указать ссылку на ресурсы плагина, в этом случае basePath игнорирутеся.
                //по умолчанию, путь до папки plugins из ресурсов расширения
                //'baseUrl' => '/js/my_plugin',
                'css' => array('clips.css',),
                'js' => array('clips.js',),
                //можно также указывать зависимости
                'depends' => array('imperavi-redactor',),
            ),
        ),
    ));
    echo $form->error($model, 'text');
    ?>
</div>

Установка и использование Imperavi Redactor в Yii2

Для работы с Imperavi Redactor в Yii2 будем использовать виджет: https://github.com/vova07/yii2-imperavi-widget.

Установка Imperavi Redactor в Yii2 с помощью composer

Открываем терминал (консоль) переходим в папку проекта и выполняем команду:

composer require --prefer-dist vova07/yii2-imperavi-widget "*"

Эта команда установит виджет в папку: yii-application/vendor/vova07/yii2-imperavi-widget

Установка Imperavi Redactor в Yii2 без использования composer

Скачиваем виджет с github: https://github.com/vova07/yii2-imperavi-widget.

Распаковываем содержимое папки yii2-imperavi-widget-master в папку /yii-application/vendor/vova07/yii2-imperavi-widget.

В файл vendor/composer/autoload_psr4.php добавляем:

'vova07\\imperavi\\' => array($vendorDir . '/vova07/yii2-imperavi-widget/src'),

После чего файл vendor/composer/autoload_psr4.php примет вид:

return array(
    //...
    'vova07\\imperavi\\' => array($vendorDir . '/vova07/yii2-imperavi-widget/src'),
    //...
);

В файл vendor/yiisoft/extensions.php добавляем:

'vova07/imperavi' => 
array (
    'name' => 'vova07/imperavi',
    'version' => '1.2.10.0',
    'alias' => 
        array (
          '@vova07/imperavi' => $vendorDir . '/vova07/yii2-imperavi-widget/src',
    ),
),

После чего файл vendor/yiisoft/extensions.php примет вид:

<?php
$vendorDir = dirname(__DIR__);
return array (
    //...
    'vova07/imperavi' => 
    array (
        'name' => 'vova07/imperavi',
        'version' => '1.2.10.0',
        'alias' => 
            array (
              '@vova07/imperavi' => $vendorDir . '/vova07/yii2-imperavi-widget/src',
        ),
    ),
    //...
);

Использование Imperavi Redactor в Yii2

Выводим Imperavi Redactor как простой виджет:

echo \vova07\imperavi\Widget::widget([
    'name' => 'redactor',
    'settings' => [
        'lang' => 'ru',
        'minHeight' => 200,
        'plugins' => [
            'clips',
            'fullscreen'
        ]
    ]
]);

Выводим Imperavi Redactor как виджет ActiveForm:

use vova07\imperavi\Widget;
echo $form->field($model, 'text')->widget(Widget::className(), [
    'settings' => [
        'lang' => 'ru',
        'minHeight' => 200,
        'plugins' => [
            'clips',
            'fullscreen'
        ]
    ]
]);

Подробная документация виджета: https://github.com/vova07/yii2-imperavi-widget/blob/master/README_RU.md или https://github.com/vova07/yii2-imperavi-widget.

Дополнительно

Документация по Imperavi Redactor:http://imperavi.com/redactor/docs/