Implementing CKeditor's plugin

I need to add the Templates plugin into Drupal8 CKeditor. So far it is available on the editor configuration page, but not on a node edit page. The code:

namespace Drupal\module_name\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\ckeditor\CKEditorPluginButtonsInterface;
use Drupal\Component\Plugin\PluginBase;
use Drupal\editor\Entity\Editor;

class ContentTemplates extends PluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

  public function getButtons() {
    return array(
      'ContentTemplates' => array(
        'label' => t('Content templates'),
        'image' => drupal_get_path('module', 'module_name') . '/js/CKeditor/Plugin/templates/icons/templates.png',
        'image_rtl' => drupal_get_path('module', 'module_name') . '/js/CKeditor/Plugin/templates/icons/templates-rtl.png',
      ),
    );
  }

  public function isInternal() {
    return FALSE;
  }

  public function getDependencies(Editor $editor) {
    return array('dialog', 'dialogui');
  }    

  public function getLibraries(Editor $editor) {
    return array();
  }

  public function getFile() {
    return drupal_get_path('module', 'module_name') . '/js/CKeditor/Plugin/templates/plugin.js';
  }

  public function getConfig(Editor $editor) {
    return array();
  }

  // TODO: to be sure, should be removed and served by config
  function isEnabled(Editor $editor) {
    return TRUE;
  }
}

I also could see the methods injected by templates/dialogs/templates.js while inspecting the CKEditor object, but the file is not listed in the Chrome's resources inspector. I also don't see any code changes in this file takes effect (browser and drupal cache disabled, aggregation disabled).

Answers 3

  • I used this two classes in modules/custom/my_ckeditor/src/Plugin/CKEditorPlugin:

    <?php
    
    namespace Drupal\my_ckeditor\Plugin\CKEditorPlugin;
    
    use Drupal\ckeditor\CKEditorPluginInterface;
    use Drupal\Component\Plugin\PluginBase;
    use Drupal\ckeditor\Annotation\CKEditorPlugin;
    use Drupal\Core\Annotation\Translation;
    use Drupal\editor\Entity\Editor;
    
    /**
     * Defines the "templates" plugin.
     *
     * @CKEditorPlugin(
     *   id = "dialog",
     *   label = @Translation("CKEditor Dialog"),
     *   module = "ckeditor"
     * )
     */
    class Dialog extends PluginBase implements CKEditorPluginInterface
    {
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getDependencies().
       */
      function getDependencies(Editor $editor)
      {
        return array();
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getLibraries().
       */
      function getLibraries(Editor $editor)
      {
        return array();
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::isInternal().
       */
      function isInternal()
      {
        return false;
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getFile().
       */
      function getFile()
      {
        $plugin = drupal_get_path('module', 'my_ckeditor') . '/js/plugins/dialog/plugin.js';
    
        return $plugin;
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getConfig().
       */
      public function getConfig(Editor $editor)
      {
        return array();
      }
    }
    
    
    
    <?php
    
    namespace Drupal\my_ckeditor\Plugin\CKEditorPlugin;
    
    use Drupal\ckeditor\CKEditorPluginInterface;
    use Drupal\ckeditor\CKEditorPluginButtonsInterface;
    use Drupal\Component\Plugin\PluginBase;
    use Drupal\ckeditor\Annotation\CKEditorPlugin;
    use Drupal\Core\Annotation\Translation;
    use Drupal\editor\Entity\Editor;
    
    /**
     * Defines the "templates" plugin.
     *
     * @CKEditorPlugin(
     *   id = "templates",
     *   label = @Translation("CKEditor Templates"),
     *   module = "ckeditor"
     * )
     */
    class Templates extends PluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface
    {
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getDependencies().
       */
      function getDependencies(Editor $editor)
      {
        return array('dialog');
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getLibraries().
       */
      function getLibraries(Editor $editor)
      {
        return array();
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::isInternal().
       */
      function isInternal()
      {
        return false;
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getFile().
       */
      function getFile()
      {
        $plugin = drupal_get_path('module', 'my_ckeditor') . '/js/plugins/templates/plugin.js';
    
        return $plugin;
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getConfig().
       */
      public function getConfig(Editor $editor)
      {
        return array();
      }
    
    
    
      /**
       * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getConfig().
       */
      public function getButtons()
      {
        return array(
          'Templates' => array(
            'label' => t('Templates'),
            'image' => drupal_get_path('module', 'my_ckeditor') . '/js/plugins/templates/icons/templates.png',
          ),
        );
      }
    }
    

    The CKEditor plugins (Dialog & Templates) are placed in modules/custom/my_ckeditor/js/plugins

    You also need a custom JS-file for your templates:

    (function ($, Drupal, CKEDITOR) {
      "use strict";
    
      Drupal.behaviors.myCkeditor = {
        attach: function (context, settings) {
          var templates_path = '/modules/custom/my_ckeditor/templates/ckeditor/';
    
          var templates = [
            {
              title:       Drupal.t('Title'),
              description: Drupal.t('Description'),
              image:       'preview.gif',
              html:        'My Template'
            }
          ];
    
          // Remove default templates
          CKEDITOR.on("instanceLoaded", function () {
            CKEDITOR.config.templates_files = [];
          });
    
          // Load tempaltes
          CKEDITOR.on("instanceReady", function () {
            if (CKEDITOR.plugins.get('templates')) {
              CKEDITOR.config.templates_replaceContent = false;
              CKEDITOR.addTemplates('default', {
                imagesPath: templates_path,
                templates:  templates
              });
            }
          });
        }
      };
    
    })(jQuery, Drupal, CKEDITOR);
    

    This talk can help you: https://www.youtube.com/watch?feature=player_detailpage&v=h9KV_VRvIG8#t=1965




Related Questions