Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Custom WYSIWYG plugin for Drupal 7 - accordion

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

<?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;
}
name = CUSTOM WYSIWYG
description = Customisation of the WYSIWYG editor.
core = 7.x
package = My Custom modules
<?php
/**
* @file
* Drupal hook implementations.
*/
/**
* Implements hook_wysiwyg_include_directory().
*/
function custom_wysiwyg_wysiwyg_include_directory($type) {
return $type;
}
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);
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment