README

CKEditor 模块用于 Yii2。轻松将 CKEditor CDN 添加到您的 Yii2 应用程序中。

我曾尝试过 Redactor、TinyMCE 和 CKEditor。如果您只需要基本功能，如加粗/斜体，那么 Redactor 非常不错。我需要图片、字体大小、字体颜色、居中、项目符号列表等许多其他功能。我曾尝试 2Amigos CKEditor，但发现文档不足且使用困难。

我希望它能使用 CDN，轻松添加插件、更改皮肤、上传图片和文件，并能够直接从 CKEditor 工具栏配置器构建自己的配置。

它使用原始的 CKeditor CDN，但您可以轻松地使用任何您希望的 CDN（CloudFlare、Amazon S3 等）。

默认情况下，编辑器将使用 basic 预设。有什么区别？查看 CDN 的目录列表，您将看到每个预设。从那里，您可以看到为预设提供的插件和皮肤。它还将使用该预设中的 config.js，但这也很容易被覆盖。

安装

安装此扩展的首选方法是使用 composer。

运行以下命令：

composer require wadeshuler/yii2-ckeditor-cdn:~1.0

或

"wadeshuler/yii2-ckeditor-cdn": "~1.0"

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

基本用法

将其添加到应用程序的配置中

'modules' => [
    'ckeditor' => [
        'class' => 'wadeshuler\ckeditor\Module',
    ],
],

将其添加到视图中

use wadeshuler\ckeditor\widgets\CKEditor;

<?= $form->field($model, 'text')->widget(CKEditor::className()) ?>

高级配置

您可以为插件添加功能、更改预设、覆盖控制器以设置自己的 filebrowserBrowseUrl、使用自己的 config.js。您应该能够使用我的扩展完成任何需要的功能！如果缺少或损坏了某些内容，请创建一个新问题并告知我。

以下是一个 示例配置，展示了 大多数 选项。我有很多选项已注释掉，所以请取您需要的部分 :)

'modules' => [
    'ckeditor' => [
        'class' => 'wadeshuler\ckeditor\Module',    // required and dont change!!!
        
        //'controllerNamespace' => 'wadeshuler\ckeditor\controllers\default',    // to override my controller
        //'preset' => 'basic',    // default: basic - options: basic, standard, standard-all, full, full-all
        //'customCdn' => '//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.10/ckeditor.js',    // must point to ckeditor.js

        //'uploadDir' => '@app/web/uploads',    // must be file path (required when using filebrowser*BrowseUrl below)
        //'uploadUrl' => '@web/uploads',        // must be valid URL (required when using filebrowser*BrowseUrl below)
        
        // how to add external plugins (must also list them in `widgetClientOptions` `extraPlugins` below)
        //'widgetExternalPlugins' => [
        //    ['name' => 'pluginname', 'path' => '/path/to/', 'file' => 'plugin.js'],
        //    ['name' => 'pluginname2', 'path' => '/path/to2/', 'file' => 'plugin.js'],
        //],
        
        // passes html options to the text area tag itself. Mostly useless as CKEditor hides the <textarea> and uses it's own div
        //'widgetOptions' => [
        //    'rows' => '10',
        //],
        
        // These are basically passed to the `CKEDITOR.replace()`
        'widgetClientOptions' => [
            //'skin' => 'moono',    // must be in skins directory
            //'skin' => 'kama,http://cdn.ckeditor.com/4.5.10/standard-all/skins/kama/'    // skin from somehwere else - http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-skin
            //'extraPlugins' => 'abbr,inserthtml',     // list of externalPlugins (loaded from `widgetExternalPlugins` above)
            //'customConfig' => '@web/js/myconfig.js',
            //'filebrowserBrowseUrl' => '/ckeditor/default/file-browse',
            //'filebrowserUploadUrl' => '/ckeditor/default/file-upload',
            //'filebrowserImageBrowseUrl' => '/ckeditor/default/image-browse',
            //'filebrowserImageUploadUrl' => '/ckeditor/default/image-upload',
        ]
    ],

],

一个需要了解的重要事情是我们如何合并选项。配置是您的全局选项。它们将被传递到输入小部件的每个实例。如果您在输入小部件中直接声明了任何选项，它将覆盖配置中的内容。选项将合并，输入小部件的选项将具有优先权。

我强烈建议您创建自己的自定义 config.js，其中包含所有选项。如果您有多个具有不同选项的编辑器，您可以创建多个配置文件并在小部件中直接调用它们。例如，一个用于具有上传功能的管理员配置，另一个用于前端用户，大多数功能被移除以提高安全性。

CDN - 默认使用原始的 CKEditor CDN，但您可以更改它！在我上面提供的示例配置中，我将 //cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.10/ckeditor.js 作为 customCdn。您必须指向 ckeditor.js 文件，它将能够从那里找到插件和皮肤！您可以直接从他们的网站下载 CKEditor 库，手动添加您想要的任何额外插件或皮肤，并创建自己的 config.js。然后将其上传到您自己的 CDN，如 Amazon S3。好处是，您不必加载和链接到库中默认未包含的插件或皮肤。

致谢

2amigos yii2-ckeditor-widget

CKEditor

yii2-redactor

wadeshuler / yii2-ckeditor-cdn

维护者

详细信息

README

安装

基本用法

高级配置

更多配置

致谢