summernote-ext-hello.js 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. (function (factory) {
  2. /* global define */
  3. if (typeof define === 'function' && define.amd) {
  4. // AMD. Register as an anonymous module.
  5. define(['jquery'], factory);
  6. } else {
  7. // Browser globals: jQuery
  8. factory(window.jQuery);
  9. }
  10. }(function ($) {
  11. // template
  12. var tmpl = $.summernote.renderer.getTemplate();
  13. /**
  14. * @class plugin.hello
  15. *
  16. * Hello Plugin
  17. */
  18. $.summernote.addPlugin({
  19. /** @property {String} name name of plugin */
  20. name: 'hello',
  21. /**
  22. * @property {Object} buttons
  23. * @property {Function} buttons.hello function to make button
  24. * @property {Function} buttons.helloDropdown function to make button
  25. * @property {Function} buttons.helloImage function to make button
  26. */
  27. buttons: { // buttons
  28. hello: function (lang, options) {
  29. return tmpl.iconButton(options.iconPrefix + 'header', {
  30. event : 'hello',
  31. title: 'hello',
  32. hide: true
  33. });
  34. },
  35. helloDropdown: function (lang, options) {
  36. var list = '<li><a data-event="helloDropdown" href="#" data-value="summernote">summernote</a></li>';
  37. list += '<li><a data-event="helloDropdown" href="#" data-value="codemirror">Code Mirror</a></li>';
  38. var dropdown = '<ul class="dropdown-menu">' + list + '</ul>';
  39. return tmpl.iconButton(options.iconPrefix + 'header', {
  40. title: 'hello',
  41. hide: true,
  42. dropdown : dropdown
  43. });
  44. },
  45. helloImage : function (lang, options) {
  46. return tmpl.iconButton(options.iconPrefix + 'file-image-o', {
  47. event : 'helloImage',
  48. title: 'helloImage',
  49. hide: true
  50. });
  51. }
  52. },
  53. /**
  54. * @property {Object} events
  55. * @property {Function} events.hello run function when button that has a 'hello' event name fires click
  56. * @property {Function} events.helloDropdown run function when button that has a 'helloDropdown' event name fires click
  57. * @property {Function} events.helloImage run function when button that has a 'helloImage' event name fires click
  58. */
  59. events: { // events
  60. hello: function (event, editor, layoutInfo) {
  61. // Get current editable node
  62. var $editable = layoutInfo.editable();
  63. // Call insertText with 'hello'
  64. editor.insertText($editable, 'hello ');
  65. },
  66. helloDropdown: function (event, editor, layoutInfo, value) {
  67. // Get current editable node
  68. var $editable = layoutInfo.editable();
  69. // Call insertText with 'hello'
  70. editor.insertText($editable, 'hello ' + value + '!!!!');
  71. },
  72. helloImage : function (event, editor, layoutInfo) {
  73. var $editable = layoutInfo.editable();
  74. var img = $('<img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg" />');
  75. editor.insertNode($editable, img[0]);
  76. }
  77. }
  78. });
  79. }));