cp.wysiwyg.pell.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  3. typeof define === 'function' && define.amd ? define(['exports'], factory) :
  4. (factory((global.pell = {})));
  5. }(this, (function (exports) { 'use strict';
  6. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  7. var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
  8. var formatBlock = 'formatBlock';
  9. var addEventListener = function addEventListener(parent, type, listener) {
  10. return parent.addEventListener(type, listener);
  11. };
  12. var appendChild = function appendChild(parent, child) {
  13. return parent.appendChild(child);
  14. };
  15. var createElement = function createElement(tag) {
  16. return document.createElement(tag);
  17. };
  18. var queryCommandState = function queryCommandState(command) {
  19. return document.queryCommandState(command);
  20. };
  21. var queryCommandValue = function queryCommandValue(command) {
  22. return document.queryCommandValue(command);
  23. };
  24. var exec = function exec(command) {
  25. var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  26. return document.execCommand(command, false, value);
  27. };
  28. var defaultActions = {
  29. bold: {
  30. icon: '<b>B</b>',
  31. title: 'Bold',
  32. state: function state() {
  33. return queryCommandState('bold');
  34. },
  35. result: function result() {
  36. return exec('bold');
  37. }
  38. },
  39. italic: {
  40. icon: '<i>I</i>',
  41. title: 'Italic',
  42. state: function state() {
  43. return queryCommandState('italic');
  44. },
  45. result: function result() {
  46. return exec('italic');
  47. }
  48. },
  49. underline: {
  50. icon: '<u>U</u>',
  51. title: 'Underline',
  52. state: function state() {
  53. return queryCommandState('underline');
  54. },
  55. result: function result() {
  56. return exec('underline');
  57. }
  58. },
  59. strikethrough: {
  60. icon: '<strike>S</strike>',
  61. title: 'Strike-through',
  62. state: function state() {
  63. return queryCommandState('strikeThrough');
  64. },
  65. result: function result() {
  66. return exec('strikeThrough');
  67. }
  68. },
  69. heading1: {
  70. icon: '<b>H<sub>1</sub></b>',
  71. title: 'Heading 1',
  72. result: function result() {
  73. return exec(formatBlock, '<h1>');
  74. }
  75. },
  76. heading2: {
  77. icon: '<b>H<sub>2</sub></b>',
  78. title: 'Heading 2',
  79. result: function result() {
  80. return exec(formatBlock, '<h2>');
  81. }
  82. },
  83. paragraph: {
  84. icon: '&#182;',
  85. title: 'Paragraph',
  86. result: function result() {
  87. return exec(formatBlock, '<p>');
  88. }
  89. },
  90. quote: {
  91. icon: '&#8220; &#8221;',
  92. title: 'Quote',
  93. result: function result() {
  94. return exec(formatBlock, '<blockquote>');
  95. }
  96. },
  97. olist: {
  98. icon: '&#35;',
  99. title: 'Ordered List',
  100. result: function result() {
  101. return exec('insertOrderedList');
  102. }
  103. },
  104. ulist: {
  105. icon: '&#8226;',
  106. title: 'Unordered List',
  107. result: function result() {
  108. return exec('insertUnorderedList');
  109. }
  110. },
  111. code: {
  112. icon: '&lt;/&gt;',
  113. title: 'Code',
  114. result: function result() {
  115. return exec(formatBlock, '<pre>');
  116. }
  117. },
  118. line: {
  119. icon: '&#8213;',
  120. title: 'Horizontal Line',
  121. result: function result() {
  122. return exec('insertHorizontalRule');
  123. }
  124. },
  125. link: {
  126. icon: '&#128279;',
  127. title: 'Link',
  128. result: function result() {
  129. var url = window.prompt('Enter the link URL');
  130. if (url) exec('createLink', url);
  131. }
  132. },
  133. image: {
  134. icon: '&#128247;',
  135. title: 'Image',
  136. result: function result() {
  137. var url = window.prompt('Enter the image URL');
  138. if (url) exec('insertImage', url);
  139. }
  140. }
  141. };
  142. var defaultClasses = {
  143. actionbar: 'pell-actionbar',
  144. button: 'pell-button',
  145. content: 'pell-content',
  146. selected: 'pell-button-selected'
  147. };
  148. var init = function init(settings) {
  149. var actions = settings.actions ? settings.actions.map(function (action) {
  150. if (typeof action === 'string') return defaultActions[action];else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
  151. return action;
  152. }) : Object.keys(defaultActions).map(function (action) {
  153. return defaultActions[action];
  154. });
  155. var classes = _extends({}, defaultClasses, settings.classes);
  156. var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
  157. var actionbar = createElement('div');
  158. actionbar.className = classes.actionbar;
  159. appendChild(settings.element, actionbar);
  160. var content = settings.element.content = createElement('div');
  161. content.contentEditable = true;
  162. content.className = classes.content;
  163. content.oninput = function (_ref) {
  164. var firstChild = _ref.target.firstChild;
  165. if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
  166. settings.onChange(content.innerHTML);
  167. };
  168. content.onkeydown = function (event) {
  169. if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
  170. setTimeout(function () {
  171. return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
  172. }, 0);
  173. }
  174. };
  175. appendChild(settings.element, content);
  176. actions.forEach(function (action) {
  177. var button = createElement('button');
  178. button.className = classes.button;
  179. button.innerHTML = action.icon;
  180. button.title = action.title;
  181. button.setAttribute('type', 'button');
  182. button.onclick = function () {
  183. return action.result(settings.element, content, this) && content.focus();
  184. };
  185. if (action.state) {
  186. var handler = function handler() {
  187. return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
  188. };
  189. addEventListener(content, 'keyup', handler);
  190. addEventListener(content, 'mouseup', handler);
  191. addEventListener(button, 'click', handler);
  192. }
  193. appendChild(actionbar, button);
  194. });
  195. if (settings.styleWithCSS) exec('styleWithCSS');
  196. exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
  197. return settings.element;
  198. };
  199. var pell = { exec: exec, init: init };
  200. exports.exec = exec;
  201. exports.init = init;
  202. exports['default'] = pell;
  203. Object.defineProperty(exports, '__esModule', { value: true });
  204. })));