Gibt es ein gutes Beispiel, wie Plugins in Bolt CMS CKEditor hinzugefügt werden?

Question

Ich sehe, dass es keine Dokumentation gibt, wie benutzerdefinierte CKEditor-Plugins in Bolt CMS hinzugefügt werden.

Kann ich Dateien in public/bolt-public/ Ordner hinzufügen/ändern?

In public\bolt-public\view\js\ckeditor\config.js Datei sehe ich folgendes:

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

aber in meinem noch installiert Bolzen cms i dont haben jede /app/src/js/bolt.js-Datei zu ändern.

Kann mir jemand helfen, um zum Beispiel dieses Plugin in meinem Bolt CMS arbeiten zu lassen?

Answer 1

Hier fand ich eine Lösung, um CKEditor anzupassen und Plugins wie FontAwesome hinzuzufügen.

Zuerst müssen wir Fett Erweiterung erstellen.

Erstellen Sie den Erweiterungsordner /extension/local/mycompany/customckeditor.

In diesem Erweiterungsordner müssen wir Unterordner erstellen

• /src
• /web
• /web/plugins

Nachdem wir Datei Bolt Erweiterung erstellen müssen 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, 
     ]; 
    } 
} 

Erstellen

Komponist Datei /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": "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" 
    } 
} 

Gehen Sie zu Ihrer Konsole zu /extensions Ordner und führen:

$ composer update 

erstellen JS-Datei /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; 
     }); 
    } 
}); 

Kopieren fontawesome.zip Inhalt /web/plugins

Und schließlich laden Sie Ihr Admin-Panel neu.