1

I am building a CKEditor plugin for Drupal 8. I've done plugins that show a button in the editor toolbar, but this one should render a select list. The list is not showing up in the configuration page (admin/config/content/formats/manage/basic_html), so I cannot add it to the toolbar. I can't see what I am missing.

This code works fine on a standalone CKEditor setup (outside of Drupal):

'use strict';

CKEDITOR.plugins.add( 'widgets', {
  requires : ['richcombo'],

  init: function( editor ) {
    console.log('In CKEDITOR.plugins init()');
    var config = editor.config;

    editor.ui.addRichCombo('widgets', {
      label : "Widgets", // label displayed in toolbar
      title : 'Insert Widget', // tooltip text when hovering over the dropdown
      multiSelect : false,

      // use the same style as the font/style dropdowns
      panel : {
        css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
      },

      init : function() {
        // dropdown options:
        // this.add( VALUE, HTML, TEXT );
        // VALUE - The value we get when the row is clicked
        // HTML - html/plain text that should be displayed in the dropdown
        // TEXT - displayed in popup when hovered over the row.
        this.add( "<p>Widget 1</p>", "Widget 1", "Widget 1" );
        this.add( "<p>Widget 2</p>", "Widget 2", "Widget 2" );
      },

      // this function is called when a row is clicked
      onClick: function(value) {
        editor.insertHtml(value);
        console.log(value);
      },
    });
  }
});

The above code was placed in /modules/custom_widgets/js/plugins/widgets/plugin.js

Besides, /modules/custom_widgets/custom_widgets.module is empty, /modules/custom_widgets/custom_widgets.info.yml sets "ckeditor" as a module dependency, and this is the code of my D8 plugin, in /modules/custom_widgets/src/Plugin/CKEditorPlugin/Widgets.php:

<?php

/**
 * @file
 * Definition of \Drupal\custom_widgets\Plugin\CKEditorPlugin\Widgets.
 */

namespace Drupal\custom_widgets\Plugin\CKEditorPlugin;

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

/**
 * Defines the "Widgets" plugin.
 *
 * @CKEditorPlugin(
 *   id = "widgets",
 *   label = @Translation("Widgets")
 * )
 */
class Widgets extends PluginBase implements CKEditorPluginInterface {

  /**
   * {@inheritdoc}
   */
  function getDependencies(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  function getLibraries(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  function isInternal() {
    return FALSE;
  }

  /**
   * {@inheritdoc}
   */
  function getFile() {
    return drupal_get_path('module', 'custom_widgets') . '/js/plugins/widgets/plugin.js';
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    return [];
  }
}

Any help is greatly appreciated, as all examples I could find were about adding a custom button or a custom contextual menu entry, but nothing about combo lists.

1

You should really be extending CKEditorPluginBase and implement getButtons method. This is likely why you don't see it in the administrative interface, but in a vanilla CKEditor test, you do.

https://api.drupal.org/api/drupal/core!modules!ckeditor!src!CKEditorPluginButtonsInterface.php/function/CKEditorPluginButtonsInterface%3A%3AgetButtons/8.2.x

1

Drupal's CKEditor toolbar configuration UI only knows about buttons for which metadata is provided, you can do this by implementing CKEditorPluginButtonsInterface. See the "plugins" section at https://www.drupal.org/docs/8/api/ckeditor-api/overview.

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.