Basic Plugin Layout

This document is currently being worked on.

For those uninitiated with script styling, we'd like to point out that comments (// This is a comment) inline in the code area's describe what is happening, or what options you can change in the code areas below the comment. While this may not always be the style of others, we just wanted to make sure while your reading through the examples below that there isn't any confusion on which parts the comments may be describing.

/**
 * 
 * copyright [year] [your Business Name and/or Your Name].
 * email: [email protected]
 * license: Your chosen license, or link to a license file.
 * 
 */
(function (factory) {
  /* Global define */
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node/CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals
    factory(window.jQuery);
  }
}(function ($) {
  /**
   * @class plugin.examplePlugin
   *
   * example Plugin
   */

Language

We need to extend the Language lang references within the Summernote script to add our own language references. To access the language translations variables in your plugin script you can simply use lang.examplePlugin.exampleText.

  $.extend(true,$.summernote.lang, {
    'en-US': { /* US English(Default Language) */
      examplePlugin: {
        exampleText: 'Example Text',
        dialogTitle: 'Example Plugin',
        okButton: 'OK'
      }
    }
  });

You can also create language files to link into your pages just like adding language files into Summernote iteself, and using the format exactly as the code above.

Options

This section allows us to add options to our plugin to modify behaviour on a user based configuration.

  $.extend($.summernote.options, {
    examplePlugin: {
      icon: '<i class="note-icon-pencil"/>',
      tooltip: 'Example Plugin Tooltip'
    }
  });

  // Extend Plugins for adding our example Plugin.
  $.extend($.summernote.plugins, {
    /**
     *  @param {Object} context - context object has status of editor.
     */
    'examplePlugin':function (context) {
      // The vars below are not all needed, what you need depends on what
      // your trying accompish with your plugin.
      // Most commonly you need self, ui, options, and lang.
      var self      = this,
      // ui has renders to build ui elements
      // for e.g. you can create a button with 'ui.button'
          ui        = $.summernote.ui,
          $note     = context.layoutInfo.note,
      // contentEditable element
          $editor   = context.layoutInfo.editor,
          $editable = context.layoutInfo.editable,
          $toolbar  = context.layoutInfo.toolbar,
          options   = context.options,
          lang      = options.langInfo;

      context.memo('button.examplePlugin',function () {
        // create button
        var button = ui.button({
          // icon for button
          contents: options.examplePlugin.icon,
          // tooltip for button
          tooltip: lang.examplePlugin.tooltip,
          click:function (e) {
            context.invoke('examplePlugin.show');
          }
        });
        return button.render();
      });

      this.initialize = function() {
        // get the correct container for the plugin where's it's attached to the
        // document DOM.
        var $container = options.dialogsInBody ? $(document.body) : $editor;
        // Build the Body HTML of the Dialog.
        var body = '<div class="form-group">'+
                   '</div>';
        var footer = '<button href="#" class="btn btn-primary note-examplePlugin-btn">' + lang.examplePlugin.okButton + '</button>'
      }
      this.$dialog = ui.dialog({
        // Set the title for the Dialog.
        title: lang.examplePlugin.dialogTitle,
        // Set the Body of the Dialog.
        body: body,
        // Set the Footer of the Dialog.
        footer: footer
      }).render().appendTo($container);
    };
    this.destroy = function () {
      ui.hideDialog(this.$dialog);
      this.$dialog.remove();
    };
    this.bindEnterKey = function ($input,$btn) {
      $input.on('keypress',function (event) {
        if (event.keyCode === 13) $btn.trigger('click');
      });
    };
    this.bindLabels = function () {
      self.$dialog.find('.form-control:first').focus().select();
      self.$dialog.find('label').on('click', function () {
        $(this).parent().find('.form-control:first').focus();
      });
    };
    this.show = function () {
      var $img = $($editable.data('target'));
      var editorInfo = {

      };
      this.showexamplePluginDialog(editorInfo).then(function (editorInfo) {
        ui.hideDialog(self.$dialog);
        $note.val(context.invoke('code'));
        $note.change();
      });
    };
    this.showexamplePluginDialog = function(editorInfo) {
      return $.Deferred(function (deferred) {
        ui.onDialogShown(self.$dialog,function () {
          context.triggerEvent('dialog.shown');
          $editBtn.click(function (e) {
            e.preventDefault();
            deferred.resolve({

            });
          });
          self.bindEnterKey($editBtn);
          self.bindLabels();
        });
        ui.onDialogHidden(self.$dialog,function () {
          $editBtn.off('click');
          if (deferred.state() === 'pending') deferred.reject();
        });
        ui.showDialog(self.$dialog);
      });
    };
  }
})));