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

问题描述：

我看到没有文档说明如何将定制的CKEditor插件添加到Bolt CMS中。有没有一个很好的例子，如何将插件添加到Bolt CMS CKEditor中？

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

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

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

但在我没有安装螺栓CMS我没有任何/app/src/js/bolt.js文件进行修改。

有人可以帮我拿这个插件工作在我的博尔特CMS吗？ https://www.michaeljanea.com/ckeditor/font-awesome

答

这里我找到了一个定制CKEditor并添加像FontAwesome这样的插件的解决方案。

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

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

在我们需要创建子文件夹

/src
/web
/web/plugins

后，我们需要创建博尔特扩展文件此扩展文件夹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", 
    "keywords": [ 
    "ckeditor" 
    ], 
    "require": { 
    "bolt/bolt": "^3.2" 
    }, 
    "require-dev": { 
    "phpunit/phpunit": "^4.7" 
    }, 
    "license": "MIT", 
    "authors": [ 
    { 
     "name": "Bogdan", 
     "email": "[email protected]" 
    } 
    ], 
    "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 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中？

相关推荐