Question

我看到没有文档说明如何将自定义CKEditor插件添加到Bolt CMS中。

我可以在public/bolt-public/文件夹中添加/修改文件吗？

在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等插件的解决方案。

首先我们需要创建Bold Extension。

创建扩展程序文件夹/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中？

1 个答案: