-
Notifications
You must be signed in to change notification settings - Fork 0
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);
});
};
}
});
}));