Custom WYSIWYG plugin for Drupal 7 - blockquote

1 Custom WYSIWYG plugin for Drupal 7 - blockquote.markdown

Mentor:

Chris Maiden - https://github.com/matason

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 ----------------------| plugins
• d ---------------------------| blockquote
• d --------------------------------| icons
• -------------------------------------| blockquote.png
• --------------------------------| plugin.js
• ---------------------------| blockquote.inc
• ----------------------| custom_wysiwyg.info
• ----------------------| custom_wysiwyg.module

blockquote.inc

<?php

/**
 * Implements hook_INCLUDE_plugin().
 */
function custom_wysiwyg_blockquote_plugin() {
  $plugins['blockquote'] = array(
    'title' => t('Blockquote'),
    'icon path' => drupal_get_path('module', 'custom_wysiwyg') . '/plugins/blockquote/icons',
    'icon file' => 'blockquote.png',
    'icon title' => t('Insert Blockquote'),
    'js path' => drupal_get_path('module', 'custom_wysiwyg') . '/plugins/blockquote',
    'js file' => 'plugin.js',
    'settings' => array(),
  );

  return $plugins;
}

custom_wysiwyg.info

name = CUSTOM WYSIWYG
description = Customisation of the WYSIWYG editor.
core = 7.x
package = My Custom modules

custom_wysiwyg.module

<?php

/**
 * @file
 * Drupal hook implementations.
 */

/**
 * Implements hook_wysiwyg_include_directory().
 */
function custom_wysiwyg_wysiwyg_include_directory($type) {
  return $type;
}

plugin.js

Drupal.wysiwyg.plugins.blockquote = {
  invoke: function (data, settings, instanceId) {
    if (data.format == 'html') {
      if (data.content) {
      var content = '<blockquote><p>' + data.content + '</p></blockquote>';
      }
      else {
        var content = '<blockquote><p></p></blockquote>';
      }
    }
    if (typeof content != 'undefined') {
      Drupal.wysiwyg.instances[instanceId].insert(content);
    }
  }
};