Skip to content

Basic Plugin Layout

Dennis Suitters edited this page Nov 8, 2017 · 5 revisions

This is a basic Plugin Layout, we'll document each section shortly.

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

Clone this wiki locally