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

Question

I see that there is no documentation how to add custom CKEditor plugins into Bolt CMS.

Can i add/modify files in public/bolt-public/ folder?

In public\bolt-public\view\js\ckeditor\config.js file i see the following:

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

but in my yet installed bolt cms i dont have any /app/src/js/bolt.js file to modify.

Can someone help me out to get for example this plugin working in my Bolt CMS? https://www.michaeljanea.com/ckeditor/font-awesome

Answer 1

Here i found a solution to customize CKEditor and add plugins like FontAwesome.

First we need to create Bold Extension.

Create extension folder /extension/local/mycompany/customckeditor.

In this extension folder we need to create subfolders

• /src
• /web
• /web/plugins

After we need to create Bolt extension file 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,
        ];
    }
}

Create composer file /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"
  }
}

Go to your console to /extensions folder and edit composer.json file. Add this lines:

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

After that run:

$ composer update

Create JS file /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;
        });
    }
});

Copy fontawesome.zip content to /web/plugins

And finally reload your admin panel.