Create a gist now

Instantly share code, notes, and snippets.

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

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
<?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;
}
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);
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment