README

渲染 Medium.com WYSIWYG 编辑器 (yabwe/medium-editor) 小部件。

• 变更日志
• 安装
• 资产
• 用法
• 外部插件
• 许可

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

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

或者将以下内容添加到您的 composer.json 文件的 require 部分：

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

资产

默认情况下，此扩展不提供 Medium Editor 的任何源文件。它使用公共 CDN（jsdelivr.com）。默认情况下，它使用 Medium Editor 插件的最新版本。

但是，您可以通过检查以下应用程序配置（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',
                ],
            ]
        ],
    ]
]

Medium Editor 插件的默认指定版本为 5.22.1。

如果您想从本地源使用 Medium Editor 插件，可以将 bower-asset/medium-editor 包添加到您的 composer.json 文件，并在本地配置中添加以下行

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

用法

作为一个 Model 的独立小部件

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

作为一个自定义变量的独立小部件

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

作为一个具有额外 Medium Editor 设置的小部件

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

在这里您可以查看 Medium Editor 选项的完整列表。

作为一个 ActiveForm 小部件

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

作为一个具有设置的 ActiveForm 小部件

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

作为一个 ActiveField 方法（通过 MediumEditorTrait）

如果您使用自定义的 ActiveField 类，您可以在您的类中使用 MediumEditorTrait

namespace app\components;

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

然后，调用 mediumEditor() 方法以渲染 Medium Editor 小部件，如下所示（您还可以像上面的示例一样传递 Medium Editor 设置）

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

外部插件

如果您想使用不引用工具栏按钮的外部插件（例如 medium-editor-insert-plugin），您需要使用 Widget 的 plugins 属性，并按如下方式传递您的代码

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

selector 和 editor 变量将被传递到 Widget 的 render 方法中的回调函数内。

许可

MIT 许可证。有关更多信息，请参阅 许可证文件。