Skip to content

Instantly share code, notes, and snippets.

@AlexandrKrot
Last active Jan 18, 2022
Embed
What would you like to do?
summernote basic plugin code
/**
*
* copyright [year] [your Business Name and/or Your Name].
* email: your@email.com
* 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.listTablePligin
*
* example Plugin
*/
$.extend($.summernote.options, {
listTablePligin: {
icon: '<i class="note-icon-pencil"/>',
tooltip: 'Example Plugin Tooltip'
}
});
$.extend(true,$.summernote.lang, {
'en-US': { /* US English(Default Language) */
listTablePligin: {
exampleText: 'Example Text',
dialogTitle: 'Example Plugin',
okButton: 'OK'
}
}
});
$.extend($.summernote.plugins, {
/**
* @param {Object} context - context object has status of editor.
*/
'listTablePligin': function (context) {
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 holds the Options Information from Summernote and what we extended above.
options = context.options,
// lang holds the Language Information from Summernote and what we extended above.
lang = options.langInfo;
context.memo('button.listTablePligin', function () {
// Here we create a button
var button = ui.button({
// icon for button
contents: options.listTablePligin.icon,
// tooltip for button
tooltip: lang.listTablePligin.tooltip,
// Keep button from being disabled when in CodeView
codeviewKeepButton: true,
click: function (e) {
context.invoke('listTablePligin.show');
}
});
return button.render();
});
this.initialize = function () {
// This is how we can add a Modal Dialog to allow users to interact with the Plugin.
// get the correct container for the plugin how it's attached to the document DOM.
// Using the current latest development branch, you can now use $.summernote.interface;
// to return which Summernote is being used to be able to adjust the modal layout to suit.
// using this.options.id will return a generated timestamp when Summernote was initiliased
// on page to allow using unique ID's.
$container = options.dialogsInBody ? $(document.body) : $editor;
// Build the Body HTML of the Dialog.
var body = `<div class="form-group">
</div>` ;
// Build the Footer HTML of the Dialog.
var footer = '<button href="#" class="btn btn-primary note-listTablePligin-btn">OK</button>'
this.$dialog = ui.dialog({
// Set the title for the Dialog. Note: We don't need to build the markup for the Modal
// Header, we only need to set the Title.
title: '',
// Set the Body of the Dialog.
body: body,
// Set the Footer of the Dialog.
footer: footer
// This adds the Modal to the DOM.
}).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.showlistTablePliginDialog(editorInfo).then(function (editorInfo) {
ui.hideDialog(self.$dialog);
$note.val(context.invoke('code'));
$note.change();
});
};
this.showlistTablePliginDialog = 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);
});
};
}
})
}));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment