Skip to content

Borales/yii2-medium-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Medium Editor for Yii2

Latest Version Software License Total Downloads

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

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.