CKEditor widget doesn't work

Question

I'm having trouble making my own module to extend and incorporate a button that inserts markup to the ckeditor. I have used the following resources but cannot get it to work.

• http://www.slideshare.net/ranelpadon/ckeditor-widgets-with-drupal
• http://ckeditor.com/slides/ckeditor-in-drupal-8/#/
• http://webcache.googleusercontent.com/search?q=cache:KKR6-B3lhdAJ:alexcoder.info/en/content/dobavlenie-plagina-ckeditor-v-drupal-8+&cd=6&hl=en&ct=clnk&gl=uk
• https://github.com/wwalc/colorbutton
• https://github.com/wwalc/panelbutton

I managed to get the colorbutton/panelbutton modules to work, but the functionality is completely different to what I want.

I have the following file & folder structure within modules/grouped_texts/

Here is an updated screenshot of the file structure:

The idea as you probably well know is to extend the CKEditor Module to include a custom tool, that on click inserts markup into my custom content editor.

The custom button 'grouped_texts' appears within the page '/admin/config/content/formats/manage/impact_editor' as you can see in the screenshot below.

But when I come to edit a page with the editor enabled, the icon does not show. See screenshot below:

As i'm getting familiar with drupal 8 and the limited resources to enable me to debug the extension of this module. Is there something in my code i've done wrong? Can you offer a solution to this problem? Here is the snippets of code i've used:

grouped_texts.info.yml:

name: CKEditor grouped_texts
type: module
description: This plugin adds code tag button.
core: 8.x
package: CKEditor
version: VERSION
dependencies:
  - ckeditor

grouped_texts.php:

/**
 * @file
 * Definition of \Drupal\grouped_texts\Plugin\CKEditorPlugin\grouped_texts.
 */

namespace Drupal\grouped_texts\Plugin\CKEditorPlugin;

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

/**
 * Defines the "grouped_texts" plugin.
 *
 * @CKEditorPlugin(
 *   id = "grouped_texts",
 *   label = @Translation("grouped_texts")
 * )
 */
class grouped_texts extends CKEditorPluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

  /**
   * 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() {
    return drupal_get_path('module', 'grouped_texts') . '/js/plugins/plugin.js';
  }

  /**
   * Implements \Drupal\ckeditor\Plugin\CKEditorPluginButtonsInterface::getButtons().
   */
  function getButtons() {
    return array(
      'grouped_texts' => array(
        'label' => t('grouped_texts'),
        'image' => drupal_get_path('module', 'grouped_texts') . '/js/plugins/grouped_texts/icons/grouped_texts.png',
      ),
    );
  }

  /**
   * Implements \Drupal\ckeditor\Plugin\CKEditorPluginInterface::getConfig().
   */
  public function getConfig(Editor $editor) {
    return array();
  }
}

plugin.js:

(function ($, Drupal, CKEDITOR) {

  Drupal.behaviors.myCkeditor = {
    attach: function (context, settings) {

        CKEDITOR.plugins.add('grouped_texts', {
                requires: 'widget',
                icons: 'grouped_texts',
                init: function(editor){

                    editor.widgets.add('grouped_texts', {
                        allowedContent: true,
                        editables: {
                            mytitle: {
                                selector: '.grouped-texts-title',
                            },
                            mycontent: {
                                selector: '.grouped-texts-content',
                            }
                        },

                        template:
                            '<div class="grouped-texts"><h2 class="grouped-texts-title">[Insert title here]</h2><div class="grouped-texts-content"><p>[Insert sub-elements here]</p></div></div>',

                        upcast: function(element){
                            return element.name == 'div' && element.hasClass('grouped-texts');
                        },
                    });

                    editor.ui.addButton('grouped_texts', {
                        label : 'grouped_texts',
                        command : 'grouped_texts',
                        icons : CKEDITOR.getUrl(this.path + 'icons/grouped_texts.png')
                    });

                    editor.config.contentsCss.push(CKEDITOR.getUrl(this.path + 'css/contents.css'));
                }
            });

    }};

})(jQuery, Drupal, CKEDITOR);

Thanks in advance.

Answer 1

You need to change the name of your button in getButtons() from "GroupedTexts" to "grouped_texts".

Once you do that, you will need to clear the cache, add the button back on the toolbar, and then come back and reload a page with the editor.

See: https://api.drupal.org/api/drupal/core%21modules%21ckeditor%21src%21CKEditorPluginButtonsInterface.php/function/CKEditorPluginButtonsInterface%3A%3AgetButtons/8

"Each button should by keyed by its CKEditor button name, and should contain an array of button properties"