有没有一个很好的例子如何将插件添加到 Bolt CMS CKEditor？

Question

我看到没有关于如何将自定义 CKEditor 插件添加到 Bolt CMS 的文档。

我可以在 public/bolt-public/ 文件夹中 add/modify 个文件吗？

在 public\bolt-public\view\js\ckeditor\config.js 文件中，我看到以下内容：

// CKeditor config is done in /app/src/js/bolt.js.

但是在我尚未安装的 bolt cms 中，我没有任何 /app/src/js/bolt.js 文件可以修改。

有人可以帮我弄到这个插件在我的 Bolt CMS 中运行吗？ https://www.michaeljanea.com/ckeditor/font-awesome

Answer 1

在这里我找到了自定义 CKEditor 并添加 FontAwesome 等插件的解决方案。

首先我们需要创建粗体扩展。

创建扩展文件夹/extension/local/mycompany/customckeditor。

在这个扩展文件夹中我们需要创建子文件夹

/src
/web
/web/plugins

在我们需要创建 Bolt 扩展文件之后src/CustomCkeditorExtension.php

<?php
namespace Bolt\Extension\MyCompany\CustomCkeditor;

use Bolt\Asset\File\JavaScript;
use Bolt\Extension\SimpleExtension;
use Bolt\Controller\Zone;

/**
 * Custom CKEditor extension class.
 */
class CustomCkeditorExtension extends SimpleExtension
{
    /**
     * {@inheritdoc}
     */
    protected function registerAssets()
    {
        $asset = new JavaScript();
        $asset->setFileName('/extensions/mycompany/customckeditor/ckeditor-extended.js')
            ->setLate(true)
            ->setPriority(99)
            ->setZone(Zone::BACKEND);

        return [
            $asset,
        ];
    }
}

创建作曲家文件/extension/local/mycompany/customckeditor/composer.json

{
  "name": "mycompany/customckeditor",
  "description": "An extension to allow for CKEditor customisations.",
  "type": "bolt-extension",
  "version": "1.0.0",
  "keywords": [
    "ckeditor"
  ],
  "require": {
    "bolt/bolt": "^3.4"
  },
  "require-dev": {
    "phpunit/phpunit": "^4.7"
  },
  "license": "MIT",
  "authors": [
    {
      "name": "Bogdan",
      "email": "info@youremail.com"
    }
  ],
  "minimum-stability": "dev",
  "prefer-stable": true,
  "autoload": {
    "psr-4": {
      "Bolt\Extension\MyCompany\CustomCkeditor\": "src"
    }
  },
  "extra": {
    "bolt-assets": "web",
    "bolt-class": "Bolt\Extension\MyCompany\CustomCkeditor\CustomCkeditorExtension"
  }
}

转到控制台的 /extensions 文件夹并编辑 composer.json 文件。添加此行：

"repositories": {
  ...
  "mycompany-ckeditor-git-repo": {
    "type": "path",
    "url": "local/mycompany/customckeditor",
    "options": {
      "symlink": false
    }
  },
  ...
},
"require": {
    ...
    "mycompany/customckeditor": "^1.0",
    ...
}

之后运行:

$ composer update

创建 JS 文件/web/ckeditor-extended.js

if (typeof CKEDITOR !== 'undefined') {
    CKEDITOR.dtd.$removeEmpty['span'] = false;
}
jQuery(document).ready(function ($) {
    var CKEDITORPluginExtras = false;

    if (typeof(CKEDITOR) != 'undefined') {
        CKEDITOR.plugins.addExternal('fontawesome', '/extensions/mycompany/customckeditor/plugins/fontawesome/plugin.js', '');

        CKEDITOR.on('instanceReady', function (event, instance) {
            if (CKEDITORPluginExtras) {
                return;
            }

            var config = event.editor.config,
                name;

            config.toolbar.push(
                { name: 'insert', items: [ 'FontAwesome' ] }
            );

            config.contentsCss.push(CKEDITOR.plugins.getPath('fontawesome') + 'font-awesome/css/font-awesome.min.css');

            config.extraPlugins += (config.extraPlugins ? ',' : '') + 'widget,fontawesome';

            for (name in CKEDITOR.instances) {
                if (CKEDITOR.instances.hasOwnProperty(name)) {
                    CKEDITOR.instances[name].destroy();
                    CKEDITOR.replace(name, config);
                }
            }

            CKEDITORPluginExtras = true;
        });
    }
});

将fontawesome.zip内容复制到/web/plugins

最后重新加载您的管理面板。

有没有一个很好的例子如何将插件添加到 Bolt CMS CKEditor？

Is there a good example how to add plugins into Bolt CMS CKEditor?

ckeditor

bolt-cms