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

8 wysiwyg
Geovanni Kohler

Answers 3

Submit Answer
  • Myrna Casper

    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