CKEditor custom plugin to add richcombo select list

Question

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.

Answer 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

Answer 2

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.