Custom WYSIWYG plugin for Drupal 7 - 2-column section

1 Custom WYSIWYG plugin for Drupal 7 - 2-column section.markdown

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

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.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);
    }
  }
};

twocolumns.inc

<?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;
}