Basic Plugin Layout

This document is currently being worked on.

For those ununitiated with script styling, we'd like to point up 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 area's 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.

(function(factory) {
  if (typeof define==='function' && define.amd) {
    define(['jquery'],factory);
  } else if(typeof module === 'object'&&module.exports) {
    module.exports = factory(require('jquery'));
  } else {
    factory(window.jQuery);
  }
}(function($) {

Language

We need to extend the Language lang references within the Summernote script to add our own language references.

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

Options

This section allows us to add options for 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($.summernote.plugins, {
    'examplePlugin':function(context) {
      var self = this;
      var ui = $.summernote.ui;
      var $note = context.layoutInfo.note;
      var $editor = context.layoutInfo.editor;
      var $editable = context.layoutInfo.editable;
      var options = context.options;
      var lang = options.langInfo;

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

      this.initialize=function(){
        var $container=options.dialogsInBody?$(document.body):$editor;
          var body = '<div class="form-group">'+
          '</div>';
        }
        this.$dialog=ui.dialog({
          title:lang.examplePlugin.dialogTitle,
          body:body,
          footer:'<button href="#" class="btn btn-primary note-examplePlugin-btn">OK</button>'
        }).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);
        });
      };
    }
  });
}));