Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Custom WYSIWYG plugin for Drupal 7 - CKEditor API - blockquote

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
name = MY CUSTOM WYSIWYG
description = Customisation of the WYSIWYG editor.
core = 7.x
package = My project
<?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;
}
}
(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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment