blackbes / yii2-ckeditor-kcfinder-widget
支持KCfinder的Yii2 CKEditor小部件。基于2amigos的分支
Requires
- ckeditor/ckeditor: ~4.7.0+full
- yiisoft/yii2: ^2.0
Requires (Dev)
- phpunit/phpunit: 4.*
This package is auto-updated.
Last update: 2024-09-20 03:38:24 UTC
README
渲染一个 CKEditor WYSIWYG 文本编辑器插件 小部件。
安装
安装此扩展的首选方式是通过 composer。
运行以下命令之一
composer require blackbes/yii2-ckeditor-kcfinder-widget
或者添加
"blackbes/yii2-ckeditor-kcfinder-widget" : "~1.9"
同时需要将最小稳定性设置为 'dev'
"minimum-stability": "dev"
并将 KCFinder 添加到依赖项
"sunhater/kcfinder": "*"
到您的应用程序的 composer.json
文件的 require 部分。
皮肤与插件
此小部件与 CKEditor 的默认 dev-full/stable
分支一起工作,附带一系列插件和皮肤。如果您想配置其他皮肤或插件,您将必须单独下载它们并相应地配置小部件的 clientOptions
属性。
使用方法
此库包含两个小部件:CKEditor
和 CKEditorInline
。一个是用于经典编辑,另一个是用于内联编辑。
使用基本预设的模型
use dosamigos\ckeditor\CKEditor;
<?= $form->field($model, 'text')->widget(CKEditor::className(), [
'options' => ['rows' => 6],
'preset' => 'basic'
]) ?>
使用基本预设的内联编辑
use dosamigos\ckeditor\CKEditorInline;
<?php CKEditorInline::begin(['preset' => 'basic']);?>
This text can be edited now :)
<?php CKEditorInline::end();?>
如何添加自定义插件
这是向编辑器添加自定义插件的方法。从版本 2.0 开始,我们使用 CKEditor 库的 packagist 版本,因此我们必须使用其配置 API 来添加外部插件。
例如,让我们添加流行的 Code Editor Plugin。此插件将允许我们在编辑器工具栏中添加按钮,以便我们可以向正在编辑的内容中添加代码。
假设您已下载插件并将其添加到 Yii2 网站的根目录中。我就是这样做的
+ frontend + -- web + -- pbckcode
现在我们可以将其添加到我们的 CKEditor 小部件中。在此示例中,我使用 CKEditorInline
小部件。在此示例中您会注意到的一点是,我们没有使用预设属性;这非常重要,因为我们希望向小部件添加自定义工具栏。不多说,以下是代码
<?php use dosamigos\ckeditor\CKEditorInline; // First we need to tell CKEDITOR variable where is our external plufin $this->registerJs("CKEDITOR.plugins.addExternal('pbckcode', '/pbckcode/plugin.js', '');"); // ... // Using the plugin <?php CKEditorInline::begin(['preset' => 'custom', 'clientOptions' => [ 'extraPlugins' => 'pbckcode', 'toolbarGroups' => [ ['name' => 'undo'], ['name' => 'basicstyles', 'groups' => ['basicstyles', 'cleanup']], ['name' => 'colors'], ['name' => 'links', 'groups' => ['links', 'insert']], ['name' => 'others', 'groups' => ['others', 'about']], ['name' => 'pbckcode'] // <--- OUR NEW PLUGIN YAY! ] ]]) ?> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <?php CKEditorInline::end() ?>
关于额外资产
您可能想知道为什么有 dosamigos-ckeditor.widget.js
文件。原因是由于 Yii2 与表单和跨站请求伪造(csrf)的方式工作。当使用文件上传时,CKEditor 不触发 on change 事件也不收集 CSRF 令牌。
该资产解决了这两个问题。
测试
要测试此扩展,最好在您的计算机上克隆此存储库。然后,转到扩展文件夹并执行以下操作(假设您已安装 composer
)
$ composer install --no-interaction --prefer-source --dev
安装所有必需库后,执行以下操作
$ vendor/bin/phpunit
更多信息
请参阅 CKEditor 插件网站 文档以获取有关其配置选项的更多信息。
贡献
有关详细信息,请参阅 CONTRIBUTING。
鸣谢
许可协议
BSD 许可协议(BSD)。有关更多信息,请参阅 许可文件。