Custom WYSIWYG plugin for Drupal 7 - accordion element

1 Custom WYSIWYG plugin for Drupal 7 - accordion element.markdown

Continued from gist: Custom WYSIWYG plugin for Drupal 7 - accordion (https://gist.github.com/edit-olah/fb84ac7e4c571e98faab)

Mentor:

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

Author:

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

Custom WYSIWYG plugin for accordion element

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

accordionelement.inc

<?php

/**
 * Implements hook_INCLUDE_plugin().
 */
function custom_wysiwyg_accordionelement_plugin() {
  $plugins['accordionelement'] = array(
    'title' => t('Accordion element'),
    'icon path' => drupal_get_path('module', 'custom_wysiwyg') . '/plugins/accordionelement/icons',
    'icon file' => 'accordionelement.png',
    'icon title' => t('Insert Accordion element - a description title and description pair'),
    'js path' => drupal_get_path('module', 'custom_wysiwyg') . '/plugins/accordionelement',
    'js file' => 'plugin.js',
    'settings' => array(),
  );

  return $plugins;
}

plugin.js

Drupal.wysiwyg.plugins.accordionelement = {
  invoke: function (data, settings, instanceId) {
    if (data.format == 'html') {
        var content = '<dt class="accordion__title"><a href="#">Title placeholder</a></dt><dd class="accordion__description"><p>Content placeholder</p></dd>';
    }
    if (typeof content != 'undefined') {
      Drupal.wysiwyg.instances[instanceId].insert(content);
    }
  }
};