TbRedactorJs

Powerful and famous WYSIWYG editor at no cost for Yii developers

Description

This is the wrapper around the Redactor.

Important This library is NOT free to use. Community license for it was generously bought by the Yii community and so you can use this widget legally in Yii-based projects ONLY.

Basic example of usage is this:

$this->widget(
    'booster.widgets.TbRedactorJs',
    [
        'name' => 'some_name',
        'value' => '<b>Here is the text which will be put into editor view upon opening.</b>',
    ]
);

Important Please note that the name is set to "content", which is required for Redactor plugin to fetch the original data from input and paste it into its editor view. If you do not set "name" or set it to any other value, the value of value property of this widget will be completely ignored!

Important In addition to previous note, if you have several Redactor instances on the same page, you must use the htmlOptions property to set the HTML ID of each Redactor instance to different values.

Widget Configuration

Here's all configuration properties which you can set for TbCKEditor.

Most of them are common to all form input widgets.

PropertyDescription
model CModel = null

The data model associated with this widget. See CInputWidget.model. Either this property along with attribute should be defined, or the name.

attribute string = null

If you set the model attribute, here you have to specify the name of the model property which you want to change with this widget. See CInputWidget.attribute. Either this property along with model should be defined, or the name.

name string = null

The value of name HTML attribute of the input element. It must be set if you did not provide value for model. See CInputWidget.name. Either this property should be defined, or the model together with attribute.

value string = null

Here you can force the initial value of the input. If model is provided, by default model's value is used. See CInputWidget.value.

htmlOptions array = array()

HTML attributes of the input tag itself. Please note that it is not the attributes of a wrapper tag around the input. See CInputWidget.htmlOptions.

editorOptions array = array()

Options for the original library. This value will be JSON-encoded and fed to CKEditor. See the library documentation for list of all possible options.

Examples of Usage

With language and plugins set

$this->widget(
    'booster.widgets.TbRedactorJs',
    [
        'name' => 'another_text',
        'value' => 'Hover over the toolbar buttons to see whether it is really in Korean!',
        'editorOptions' => [
            'lang' => 'ko',
            'plugins' => ['fontfamily', 'textdirection']
        ],
    ]
);

How to pass callbacks to Redactor

$this->widget(
    'booster.widgets.TbRedactorJs',
    [
        'name' => 'fancy_text',
        'value' => 'Press Enter in here to test the callback.',
        'editorOptions' => [
            'enterCallback' => new CJavaScriptExpression(
                'function (event) {
                    console.debug(event);
                    $.notify("I see you have pressed Enter...", "warning");
                }'
            )
        ],
    ]
);