Medium Editor for Yii2
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});',
],
]);
selectorandeditorvariables will be passed to the callback inside of the Widget's
render method.
License
MIT License. Please see License File for more information.