Plugins for Ckeditor in Drupal 8

We will talk about

  • Types of plugins

  • Examples

Internal

External

Contrib

Custom

Examples

modules/custom/tb_ckeditor_plugins/src/Plugin/CKEditorPlugin/Mathjax.php

namespace Drupal\tb_ckeditor_plugins\Plugin\CKEditorPlugin;

use Drupal\Core\Plugin\PluginBase;
use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\ckeditor\CKEditorPluginButtonsInterface;
use Drupal\ckeditor\CKEditorPluginContextualInterface;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "mathjax" plugin.
 *
 * @CKEditorPlugin(
 *   id = "mathjax",
 *   label = @Translation("Mathjax"),
 * )
 */
class Mathjax extends PluginBase implements CKEditorPluginInterface, 
    CKEditorPluginButtonsInterface, CKEditorPluginContextualInterface {


}
/**
 * {@inheritdoc}
 */
public function getDependencies(Editor $editor) {
  return array();
}

/**
 * {@inheritdoc}
 */
public function getLibraries(Editor $editor) {
  return array();
}

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

/**
 * {@inheritdoc}
 */
public function isEnabled(Editor $editor) {
  return TRUE;
}
/**
 * {@inheritdoc}
 */
public function getFile() {
  return drupal_get_path('module', 'tb_ckeditor_plugins') . '/js/plugins/mathjax/plugin.js';
}

/**
 * {@inheritdoc}
 */
public function getButtons() {
  return array(
    'Mathjax' => array(
      'label' => t('Mathjax'),
      'image' => drupal_get_path('module', 'tb_ckeditor_plugins') .
'/js/plugins/mathjax/icons/hidpi/mathjax.png',
    ),
  );
}

/**
 * {@inheritdoc}
 */
public function getConfig(Editor $editor) {
  return array(
    'mathJaxLib' => 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML',
  );
}

modules/custom/tb_ckeditor_plugins/js/plugins/mathjax/plugin.js

(function($) {
 CKEDITOR.plugins.add('my_plugin', {
  init: function(editor){
   editor.addCommand('my_command', {
    exec : function( editor ) {
     // Here is where we tell CKEditor what to do.
     editor.insertHtml('This text is inserted when clicking on our new button from the CKEditor toolbar');
    }
   });
   
   editor.ui.addButton( 'my_plugin_button', {
    label: 'Do something awesome',
    command: 'my_command',
    icon: this.path + 'images/my_plugin_button.gif'
   });
  }
 });
})();

Additional links

Questions?

The end

Plugins for Ckeditor in Drupal 8

By Taras Tsiuper

Plugins for Ckeditor in Drupal 8

  • 19