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.

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/

File Structure

Here is an updated screenshot of the file structure:

file structure 2.0

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. Grouped Texts

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

Screenshot showing that the button does not appear in the custom editor

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:


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


 * @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();


(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',

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


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"

  • I've renamed the name of the button to "grouped_texts" but i'm still not seeing the textarea with the custom button. I'm getting the error "Uncaught TypeError: Cannot read property 'icons' of null" - "ckeditor.js?v=4.5.5:218 " – cwiggo Apr 5 '16 at 14:34
  • See: docs.ckeditor.com/#!/guide/plugin_sdk_sample - you are missing 'icons' from your plugin definition – Kevin Apr 5 '16 at 14:39
  • The error is coming from within my grouped_texts.php file around the "image" line: ** 'image' => drupal_get_path('module', 'grouped_texts') . '/icons/grouped_texts.png' ** – cwiggo Apr 5 '16 at 14:54
  • getButtons needs to return an array keyed as "grouped_texts" not "GroupedTexts". The CKEditor plugin itself (not php) needs to also define 'icons'. This is a common JS error with adding plugins to Drupal 8. – Kevin Apr 5 '16 at 14:58
  • Yes i've already done that. I mentioned that in the first comment. I'll give the latter of your comment an implementation. Thanks – cwiggo Apr 5 '16 at 15:01

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.