summernote-ext-hello.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. (function(factory) {
  2. if (typeof define === 'function' && define.amd) {
  3. // AMD. Register as an anonymous module.
  4. define(['jquery'], factory);
  5. } else if (typeof module === 'object' && module.exports) {
  6. // Node/CommonJS
  7. module.exports = factory(require('jquery'));
  8. } else {
  9. // Browser globals
  10. factory(window.jQuery);
  11. }
  12. }(function($) {
  13. // Extends plugins for adding hello.
  14. // - plugin is external module for customizing.
  15. $.extend($.summernote.plugins, {
  16. /**
  17. * @param {Object} context - context object has status of editor.
  18. */
  19. 'hello': function(context) {
  20. var self = this;
  21. // ui has renders to build ui elements.
  22. // - you can create a button with `ui.button`
  23. var ui = $.summernote.ui;
  24. // add hello button
  25. context.memo('button.hello', function() {
  26. // create button
  27. var button = ui.button({
  28. contents: '<i class="fa fa-child"/> Hello',
  29. tooltip: 'hello',
  30. click: function() {
  31. self.$panel.show();
  32. self.$panel.hide(500);
  33. // invoke insertText method with 'hello' on editor module.
  34. context.invoke('editor.insertText', 'hello');
  35. },
  36. });
  37. // create jQuery object from button instance.
  38. var $hello = button.render();
  39. return $hello;
  40. });
  41. // This events will be attached when editor is initialized.
  42. this.events = {
  43. // This will be called after modules are initialized.
  44. 'summernote.init': function(we, e) {
  45. // eslint-disable-next-line
  46. console.log('summernote initialized', we, e);
  47. },
  48. // This will be called when user releases a key on editable.
  49. 'summernote.keyup': function(we, e) {
  50. // eslint-disable-next-line
  51. console.log('summernote keyup', we, e);
  52. },
  53. };
  54. // This method will be called when editor is initialized by $('..').summernote();
  55. // You can create elements for plugin
  56. this.initialize = function() {
  57. this.$panel = $('<div class="hello-panel"/>').css({
  58. position: 'absolute',
  59. width: 100,
  60. height: 100,
  61. left: '50%',
  62. top: '50%',
  63. background: 'red',
  64. }).hide();
  65. this.$panel.appendTo('body');
  66. };
  67. // This methods will be called when editor is destroyed by $('..').summernote('destroy');
  68. // You should remove elements on `initialize`.
  69. this.destroy = function() {
  70. this.$panel.remove();
  71. this.$panel = null;
  72. };
  73. },
  74. });
  75. }));