README

渲染CKEditor WYSIWYG文本编辑插件小部件。

安装

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

运行以下命令之一

composer require "alkurn/yii2-ckeditor" "dev-master"

或者将以下内容添加到您的应用程序的composer.json文件的require部分。

"alkurn/yii2-ckeditor" : "2.0"

皮肤和插件

此小部件与CKEditor的默认dev-full/stable分支一起工作，带有一组插件和皮肤。如果您想配置不同的皮肤或插件，您必须单独下载它们并相应地配置小部件的clientOptions属性。

用法

此库包含两个小部件：CKEditor和CKEditorInline。一个是用于经典编辑，另一个是用于内联编辑。

使用基本预设的模型

use alkurn\ckeditor\CKEditor;


<?= $form->field($model, 'text')->widget(CKEditor::className(), [
        'options' => ['rows' => 6],
        'preset' => 'basic'
    ]) ?>

使用基本预设的内联编辑

use alkurn\ckeditor\CKEditorInline;

<?php CKEditorInline::begin(['preset' => 'basic']);?>
    This text can be edited now :)
<?php CKEditorInline::end();?>

如何添加自定义插件

这是向编辑器添加自定义插件的方法。由于从版本2.0开始，我们正在使用CKEditor库的packagist版本，因此我们必须使用其配置API来添加外部插件。

以添加流行的代码编辑插件为例。此插件将允许我们在编辑器的工具栏中添加按钮，以便我们可以将代码添加到我们正在编辑的内容中。

假设您已下载插件并将其添加到Yii2站点的根目录。我的情况是这样的

+ frontend 
+ -- web 
    + -- pbckcode 

现在我们可以将其添加到我们的CKEditor小部件中。在此示例中，我使用的是CKEditorInline小部件。在这个例子中，您会注意到我们没有使用预设属性；这非常重要，因为我们希望向我们的小部件添加自定义工具栏。不多说，以下是代码

<?php
 
use alkurn\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() ?>

关于额外资产

您可能想知道为什么有alkurn-ckeditor.widget.js文件。原因是由于Yii2与表单和跨站请求伪造（csrf）的交互方式，CKEditor在文件上传时不会触发on change事件也不会收集CSRF令牌。

此资产解决了这两个问题。

测试

要测试此扩展，最好在您的计算机上克隆此存储库。之后，转到扩展文件夹并执行以下操作（假设您的计算机上已安装composer）

$ composer install --no-interaction --prefer-source --dev

安装所有必需库后，执行以下操作

$ vendor/bin/phpunit

更多信息

请参阅CKEditor插件网站文档以获取有关其配置选项的更多信息。