Custom WYSIWYG plugin for Drupal 7 - accordion

1 Custom WYSIWYG plugin for Drupal 7 - accordion.markdown

Mentor:

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

Author:

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

Custom WYSIWYG plugin for accordion

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
• ----------------------| custom_wysiwyg.info
• ----------------------| custom_wysiwyg.module

The above inserts only the description list wrapper and the first element of the accordion. To keep things simple, we created a separate plugin, and therefore a separate button, for inserting additional accordion elements into the accordion.

Find it in this gist: accordion element: https://gist.github.com/edit-olah/63fcd10a7315499ef6e0

accordion.inc

<?php

/**
 * Implements hook_INCLUDE_plugin().
 */
function custom_wysiwyg_accordion_plugin() {
  $plugins['accordion'] = array(
    'title' => t('Accordion description list'),
    'icon path' => drupal_get_path('module', 'custom_wysiwyg') . '/plugins/accordion/icons',
    'icon file' => 'accordion.png',
    'icon title' => t('Insert Accordion - a description list wrapper'),
    'js path' => drupal_get_path('module', 'custom_wysiwyg') . '/plugins/accordion',
    '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.accordion = {
  invoke: function (data, settings, instanceId) {
    if (data.format == 'html') {
        var content = '<dl class="accordion"><dt class="accordion__title"><a href="#">Title placeholder</a></dt><dd class="accordion__description"><p>Content placeholder</p></dd></dl>';
    }
    if (typeof content != 'undefined') {
      Drupal.wysiwyg.instances[instanceId].insert(content);
    }
  }
};