Posted by ericfoy on Sun, Nov 28, 2021 - 7:00pm

My immediate specific need is: Put the "indent" and "outdent" buttons on the toolbar.

The most relevant forum question I could find was here, but it offers no answers.

The more general question is of course, "How can I integrate more toolbar buttons (beyond those which currently show up in the Backdrop UI)? Perhaps there is a documentation page which I just haven't discovered...

BTW: I noticed in the CKEditor documentation (here) that if you leave the toolbar option blank in the config file, then you automatically get the Full Toolbar. I don't know exactly how (or even IF) this might apply to a Backdrop installation.

And then I ran across this really kool thing!

Is there any way to roll this thing into the Backdrop UI? THAT would be really excellent.

Any help is greatly appreciated. —Eric

Accepted answer

For your specific need you could try the CKEditor Indent module: https://github.com/backdrop-contrib/ckeditor_indent

Regarding the general question, the author described the module  also as "proof of concept for adding plugins" to the editor. See also the whole discussion thread https://github.com/backdrop/backdrop-issues/issues/3875 .

Most helpful answers

I saw this question and

I saw this question and played around with adding indent (before I saw the existing module). I was able to easily add the indent for lists, at least, with a tiny module that just adds the buttons. Core already seems to include it in the CKEditor build (at least for lists) and has icons for it.

My module "ckeditor_indenter" just has this in the ckeditor_indenter.module file.

/**
 * Implements hook_ckeditor_plugins().
 */
function ckeditor_indenter_ckeditor_plugins() {
  $image_prefix = backdrop_get_path('module', 'ckeditor') . '/images/buttons/';

  $buttons = array(
    'Indent' => array(
      'label' => t('Indent'),
      'image_rtl' => $image_prefix . '/indent-rtl.png',
    ),
    'Outdent' => array(
      'label' => t('Outdent'),
      'image_rtl' => $image_prefix . '/outdent-rtl.png',
    ),
  );

  // Populate image locations that match button names.
  foreach ($buttons as $button_name => &$button) {
    if (!isset($button['image_alternative']) && !isset($button['image'])) {
      // Because button names are ASCII text, backdrop_strtolower() is not needed.
      $button['image'] = $image_prefix . strtolower($button_name) . '.png';
    }
  }

  // List all the basic plugin buttons as an "internal" plugin.
  $plugins['extra'] = array(
    'buttons' => $buttons,
    'internal' => TRUE,
  );

  return $plugins;
}

After playing around with that I attempted to test the existing ckeditor_indent module. Is anyone else having trouble actually enabling the module? I can't see anything wrong with the code, but it won't show up in the modules list and drush can't find it. Really odd.

Comments

Mon, Nov 29, 2021 - 9:09am by herb

I saw this question and played around with adding indent (before I saw the existing module). I was able to easily add the indent for lists, at least, with a tiny module that just adds the buttons. Core already seems to include it in the CKEditor build (at least for lists) and has icons for it.

My module "ckeditor_indenter" just has this in the ckeditor_indenter.module file.

/**
 * Implements hook_ckeditor_plugins().
 */
function ckeditor_indenter_ckeditor_plugins() {
  $image_prefix = backdrop_get_path('module', 'ckeditor') . '/images/buttons/';

  $buttons = array(
    'Indent' => array(
      'label' => t('Indent'),
      'image_rtl' => $image_prefix . '/indent-rtl.png',
    ),
    'Outdent' => array(
      'label' => t('Outdent'),
      'image_rtl' => $image_prefix . '/outdent-rtl.png',
    ),
  );

  // Populate image locations that match button names.
  foreach ($buttons as $button_name => &$button) {
    if (!isset($button['image_alternative']) && !isset($button['image'])) {
      // Because button names are ASCII text, backdrop_strtolower() is not needed.
      $button['image'] = $image_prefix . strtolower($button_name) . '.png';
    }
  }

  // List all the basic plugin buttons as an "internal" plugin.
  $plugins['extra'] = array(
    'buttons' => $buttons,
    'internal' => TRUE,
  );

  return $plugins;
}

After playing around with that I attempted to test the existing ckeditor_indent module. Is anyone else having trouble actually enabling the module? I can't see anything wrong with the code, but it won't show up in the modules list and drush can't find it. Really odd.

Mon, Nov 29, 2021 - 10:57am by argiepiano

I'm able to install and enable the ckeditor_indent module without any issues.

And good to know that plugins can be added so easily. Thanks for sharing your example.

Tue, Nov 30, 2021 - 7:57pm by ericfoy

I have installed the CKEditor Indent module. Works great!