Medium Editor for Yii2

Renders Medium.com WYSIWYG editor (yabwe/medium-editor) widget.

• Changelog
• Installation
• Assets
• Usage
• External plugins
• Licence

Installation

The preferred way to install this extension is through composer.

Either run

$ php composer.phar require "borales/yii2-medium-editor" "*"

or add

"borales/yii2-medium-editor": "*"

to the require section of your composer.json file.

Assets

By default - this extension doesn't provide any source files for Medium Editor itself. It uses public CDN instead (jsdelivr.com). And by default - it uses the latest version of the Medium Editor plugin.

However, you can change these settings by checking the following configuration of your application (config/main.php):

return [
    // ... other settings
    'components' => [
        // ... other settings
        'assetManager' => [
            'bundles' => [
                'borales\medium\Asset' => [
                    // set `bootstrap` theme for Medium Editor widget as a default one
                    'theme' => 'bootstrap',
                    // switch Medium Editor sources from the "latest" to the specific version
                    'useLatest' => false,
                    // use specific version of Medium Editor plugin with "useLatest=false"
                    'cdnVersion' => '5.22.1',
                ],
            ]
        ],
    ]
]

The default specified version for Medium Editor plugin is 5.22.1.

In case if you want to use Medium Editor plugin from local sources - you can do that by adding bower-asset/medium-editor package to your composer.json file and adding this line to your local configuration:

return [
    // ... other settings
    'components' => [
        // ... other settings
        'assetManager' => [
            'bundles' => [
                'borales\medium\Asset' => [
                    // use Medium Editor plugin sources from this path
                    'sourcePath' => '@bower/medium-editor/dist',
                ],
            ]
        ],
    ]
]

Usage

as a standalone widget for a Model

echo \borales\medium\Widget::widget([
    'model' => $model,
    'attribute' => 'text',
]);

as a standalone widget for a custom variable

echo \borales\medium\Widget::widget([
    'name' => 'my_custom_var',
    'value' => '<p>Some custom text!</p>',
]);

as a widget with extra Medium Editor settings

echo \borales\medium\Widget::widget([
    'model' => $model,
    'attribute' => 'text',
    'theme' => 'tim', // Set a theme for this specific widget
    'settings' => [
        'toolbar' => [
            'buttons' => ['bold', 'italic', 'quote'],
        ]
    ],
]);

Here you can check the full list of Medium Editor options.

as an ActiveForm widget

echo $form->field($model, 'text')->widget(\borales\medium\Widget::className());

as an ActiveForm widget with settings

echo $form->field($model, 'text')->widget(\borales\medium\Widget::className(), [
    'theme' => 'mani',
    'settings' => [
        'toolbar' => [
            'buttons' => ['bold', 'italic', 'quote'],
        ]
    ],
]);

as an ActiveField method (via MediumEditorTrait)

In case if you use your custom ActiveField class - you can use MediumEditorTrait in your class:

namespace app\components;

class ActiveField extends \yii\widgets\ActiveField
{
    use \borales\medium\MediumEditorTrait;
}

And after that - call mediumEditor() method to render Medium Editor widget like this (and you can also pass Medium Editor settings as in above examples):

echo $form->field($model, 'text')->mediumEditor()

External plugins

If you want to use external plugin, which does not refer to the toolbar button (such as medium-editor-insert-plugin), you need to use plugins property of the Widget and pass your code like this:

echo $form->field($model, 'text')->widget(\borales\medium\Widget::className(), [
    'plugins' => [
        'mediumInsert' => '$(selector).mediumInsert({editor: editor});',
    ],
]);

selector and editor variables will be passed to the callback inside of the Widget's render method.

License

MIT License. Please see License File for more information.