Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Custom WYSIWYG plugin for Drupal 7 - 2-column section

Mentor:

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

Author:

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

Custom WYSIWYG plugin for inserting a section with two columns

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 ---------------------------| twocolumns
  • d --------------------------------| icons
  • -------------------------------------| twocolumns.png
  • --------------------------------| plugin.js
  • ---------------------------| twocolumns.inc
  • ----------------------| custom_wysiwyg.info
  • ----------------------| custom_wysiwyg.module
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.twocolumns = {
invoke: function (data, settings, instanceId) {
if (data.format == 'html') {
if (data.content) {
var content = '<section class="middle-split">'
+ '<section class="middle-split__column1">'
+ '<h2 class="heading">' + data.content + '</h2>'
+ '<p>' + data.content + '</p>'
+'</section>'
+ '<section class="middle-split__column2">'
+ '<h2 class="heading">' + data.content + '</h2>'
+ '<p>' + data.content + '</p>'
+'</section>'
+ '</section>';
}
else {
var content = '<section class="middle-split">'
+ '<section class="middle-split__column1">'
+ '<h2 class="heading"></h2>'
+ '<p></p>'
+'</section>'
+ '<section class="middle-split__column2">'
+ '<h2 class="heading"></h2>'
+ '<p></p>'
+'</section>'
+ '</section>';
}
}
if (typeof content != 'undefined') {
Drupal.wysiwyg.instances[instanceId].insert(content);
}
}
};
<?php
/**
* Implements hook_INCLUDE_plugin().
*/
function custom_wysiwyg_twocolumns_plugin() {
$plugins['twocolumns'] = array(
'title' => t('Two columns'),
'icon path' => drupal_get_path('module', 'custom_wysiwyg') . '/plugins/twocolumns/icons',
'icon file' => 'twocolumns.png',
'icon title' => t('Insert 2-column section'),
'js path' => drupal_get_path('module', 'custom_wysiwyg') . '/plugins/twocolumns',
'js file' => 'plugin.js',
'settings' => array(),
);
return $plugins;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment