WYSIWYG text editor Imperavi for Yii

February 17, 2016 19 Yehor Rykhnov

I was looking for an easy and quick wysiwyg editor. Basic requirements for the editor are: text formatting, uploading images and processing of it, working with tables and cross-browser compatibility. In the process of looking, I found Imperavi editor that met all my requirements.

As it turned out later Yii community bought the OEM-licensed and now if you are using Yii Framework in your project you can free use Imperavi Redactor in it. And so proceed to the include editor in Yii.

Imperavi Redactor is set in the project on the Yii Framework as an extension and works as widget.

Additionally

Installation and use Imperavi Redactor in Yii

Installing Imperavi Redactor in Yii

At first you need to download the widget imperavi-redactor-widget: https://github.com/yiiext/imperavi-redactor-widget and copy it to the /protected/extensions/imperavi-redactor-widget.

Usage Imperavi Redactor in Yii

Next, import the widget class in the controller or view:

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

And in view call the widget:

<?php
$this->widget('ImperaviRedactorWidget', array(
    //usage model
    'model' => $modelName, //model
    'attribute' => 'fieldName', //field name
    //or just for input field 'name' => 'inputName',
    'name' => 'my_input_name',
    // Some options, see: http://imperavi.com/redactor/docs/
    'options' => array(
        'lang' => 'en',
        'toolbar' => false,
        'iframe' => true,
    ),
));

Example call widget with additional options:

<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' => 'Enter short description')
    ));
    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',),),            
        ),
    'htmlOptions' => array('placeholder' => 'Enter text')
    ));
    echo $form->error($model, 'text');
    ?>
</div>

Installation and use Imperavi Redactor in Yii2

To work with Imperavi Redactor in Yii2 will use widget: https://github.com/vova07/yii2-imperavi-widget.

Installing Imperavi Redactor in Yii2 with composer

Open the terminal (console) go to the project folder and run the command:

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

This command will set the widget to the folder: yii-application/vendor/vova07/yii2-imperavi-widget

Installing Imperavi Redactor in Yii2 without help of composer

Download the widget from github: https://github.com/vova07/yii2-imperavi-widget.

Extract the contents of a folder yii2-imperavi-widget-master in folder /yii-application/vendor/vova07/yii2-imperavi-widget.

To the file vendor/composer/autoload_psr4.php adding:

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

Then file vendor/composer/autoload_psr4.php will look like:

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

In the file vendor/yiisoft/extensions.php adding:

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

Then file vendor/yiisoft/extensions.php will look like:

<?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',
        ),
    ),
    //...
);

Usage Imperavi Redactor in Yii2

Display the Imperavi Redactor as a widget:

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

Display the Imperavi Redactor as an CActiveForm:

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

Detailed documentation of widget: https://github.com/vova07/yii2-imperavi-widget.

Additionally

Documentation Imperavi Redactor: http://imperavi.com/redactor/docs/

, , , , ,