README

安装

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

运行

composer require factorenergia/yii2-ckeditor-widget

或在您的应用程序的 composer.json 文件的 require 部分添加

"2amigos/yii2-ckeditor-widget" : "~2.1"

到 require 部分中。

皮肤与插件

此小部件与 CKEditor 的默认 dev-full/stable 分支一起使用，包括一系列插件和皮肤。如果您想配置其他皮肤或插件，您需要单独下载并相应地配置小部件的 clientOptions 属性。

使用方法

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

使用带有基本设置的模型


use factorenergia\ckeditor\CKEditor;


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

使用带有基本设置的行内编辑


use factorenergia\ckeditor\CKEditorInline;

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

如何添加自定义插件

这是向编辑器添加自定义插件的方法。从版本 2.0 开始，我们使用 CKEditor 库的 Packagist 版本，因此我们需要使用其配置 API 来添加外部插件。

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

假设您已下载插件并将其添加到 Yii2 网站的根目录中。我就是这样做的

+ frontend 
+ -- web 
    + -- pbckcode

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

<?php
 
use factorenergia\ckeditor\CKEditorInline;

// First we need to tell CKEDITOR variable where is our external plugin
$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() ?>

浏览和上传

为了浏览和上传文件，使用的是 KCFinder 插件，默认情况下它是禁用的。

要启用它，只需使用 'kcfinder'=>true。

看这个简单的示例代码

<?php
use factorenergia\ckeditor\CKEditor;

echo $form->field($model, 'text')->widget(CKEditor::className(), [
    'kcfinder' => true,
]);

默认情况下，上传文件夹的名称是根 web 目录中的 upload。

您可以为 kcfOptions 参数设置选项，并且可以在以下链接中找到 KCFinder 的所有选项：https://kcfinder.sunhater.com/install

要更改上传目录或更改某些选项，您可以查看此高级示例代码

<?php
use factorenergia\ckeditor\CKEditor;

echo $form->field($model, 'text')->widget(CKEditor::className(), [
    'kcfinder' => true,
    'kcfOptions' => [
        'uploadURL' => '@web/upload',
        'uploadDir' => '@webroot/upload',
        'access' => [  // @link http://kcfinder.sunhater.com/install#_access
            'files' => [
                'upload' => true,
                'delete' => true,
                'copy' => true,
                'move' => true,
                'rename' => true,
            ],
            'dirs' => [
                'create' => true,
                'delete' => true,
                'rename' => true,
            ],
        ],
        'types' => [  // @link http://kcfinder.sunhater.com/install#_types
            'files' => [
                'type' => '',
            ],
        ],
    ],
]);

关于额外资产

您可能想知道为什么有文件 factorenergia-ckeditor.widget.js。原因是由于 Yii2 处理表单和跨站请求伪造 (csrf) 的方式。当使用文件上传时，CKEditor 不会触发 on change 事件也不会收集 CSRF 令牌。

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

测试

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

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

一旦安装了所有必需的库，则执行

$ vendor/bin/phpunit

贡献

有关详细信息，请参阅 CONTRIBUTING。

鸣谢

许可证

BSD许可证（BSD）。请参阅许可文件获取更多信息。

网络开发从未如此有趣！
www.2amigos.us

factorenergia / yii2-ckeditor-widget

维护者

详细信息