Custom WYSIWYG plugin for Drupal 7 - CKEditor API - blockquote

1 Custom WYSIWYG plugin for Drupal 7 - CKEditor API - blockquote.markdown

Mentor:

Joeri Poesen - https://www.codeenigma.com/team/joeri-poesen

Author:

Edit Olah - https://github.com/edit-olah

Custom WYSIWYG plugin for inserting a section with block quotes

Aim: Users can click a button in the WYSIWYG editor’s toolbar and inject specific markup with clickable areas where they can input content.

Folder structure:

• d --| sites
• d ------| all
• d ----------| modules
• d --------------| custom
• d ------------------| custom_wysiwyg
• d ----------------------| my_wysiwyg_plugin
• d --------------------------| icons
• ------------------------------| blockquote.png
• --------------------------| plugin.js
• ----------------------| custom_wysiwyg.info
• ----------------------| custom_wysiwyg.module

custom_wysiwyg.info

name = MY CUSTOM WYSIWYG
description = Customisation of the WYSIWYG editor.
core = 7.x
package = My project

custom_wysiwyg.module

<?php

/**
 * Implements hook_wysiwyg_plugin().
 */
 function custom_wysiwyg_wysiwyg_plugin($editor, $version) {
 
  switch ($editor) {
   case 'ckeditor':
	return array(
 	'my_wysiwyg_plugin' => array(
  	'path' => drupal_get_path('module', 'ucl_wysiwyg') . '/my_wysiwyg_plugin',
  	'buttons' => array(
   	'my_plugin_button' => t('Insert my Blockquote'),
  	),
  	'load' => TRUE,
 	),
	);
	break;
  }
 }

plugin.js

(function($) {
 CKEDITOR.plugins.add( 'my_wysiwyg_plugin', {
  icons: 'my_plugin_button',
  init: function( editor )
  {
   editor.addCommand( 'my_command', {
    exec : function( editor ) {
     //here is where we tell CKEditor what to do.
      var selected_text = editor.getSelection().getSelectedText();
          var new_element = new CKEDITOR.dom.element("blockquote");
          new_element.setAttributes({class: 'myclassname'});
          new_element.setText(selected_text);
          editor.insertElement(new_element);
        }
   });
   
   editor.ui.addButton( 'my_plugin_button', {
    label: 'Insert my Blockquote', //this is the tooltip text for the button
    command: 'my_command',
    icon: this.path + 'icons/my_plugin_button.png'
   });
  }
 });
})(jQuery);