alexdin/yii2-ckeditor-widget

为 Yii2 的 CKEditor 小部件。

安装: 45

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 112

类型:yii2-extension

2.0.6 2016-11-30 09:51 UTC

This package is auto-updated.

Last update: 2024-09-12 23:46:40 UTC


README

Latest Version Software License Build Status Coverage Status Quality Score Total Downloads

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

安装

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

运行以下命令

composer require alexdin/yii2-ckeditor-widget

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

"alexdin/yii2-ckeditor-widget" : "2.0"

to the require section of your application's composer.json file.

皮肤和插件

此小部件与 CKEditor 的默认 dev-full/stable 分支一起工作,包含一系列插件和皮肤。如果您希望配置不同的皮肤或插件,您将不得不单独下载它们,并相应地配置小部件的 clientOptions 属性。

用法

该库包含两个小部件:CKEditorCKEditorInline。一个用于经典编辑,另一个用于内联编辑。

使用具有基本设置的模型


use alexdin\ckeditor\CKEditor;


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

使用具有基本设置的内联编辑


use alexdin\ckeditor\CKEditorInline;

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

如何添加自定义插件

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

例如,让我们添加流行的 Code Editor 插件。此插件将允许我们在编辑器的工具栏中添加按钮,以便向编辑的内容中添加代码。

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

+ frontend 
+ -- web 
    + -- pbckcode 

现在我们可以将其添加到我们的 CKEditor 小部件中。在这个例子中,我使用 CKEditorInline 小部件。在这个例子中,您会发现我们没有使用预设属性;这是非常重要的,因为我们希望为我们的小部件添加一个自定义的工具栏。不再多言,以下是代码

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

关于额外资源

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

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

测试

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

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

一旦安装了所有必需的库,然后执行以下操作

$ vendor/bin/phpunit

更多信息

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

贡献

请参阅 CONTRIBUTING 以获取详细信息。

鸣谢

许可证

BSD 许可证 (BSD)。请参阅 许可证文件 以获取更多信息。

alexdin!
网络开发从未如此有趣!
www.alexdin.us