Implementing CKeditor's plugin

Question

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).

Answer 1

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

Answer 2

The concept sunk in when I saw this: https://github.com/wwalc/moonocolor

Its the drupal8 implementation for moonocolor plugin of ckeditor

The only additions i could find are the .module file .info.yml file

I did not find any reference to an extra js file. Also in the above solution its not mentioned where the extra js file should be.

My efforts, not working yet https://github.com/baverhey/d8_ckeditor_templates

Answer 3

See the documentation at https://www.drupal.org/developing/api/8/ckeditor.

You can find examples in Drupal 8 core, at:

• \Drupal\ckeditor_test\Plugin\CKEditorPlugin\Llama
• \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaButton
• \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaContextual
• \Drupal\ckeditor_test\Plugin\CKEditorPlugin\LlamaContextualAndButton