tinymce-vue.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. var Editor = (function () {
  2. 'use strict';
  3. /*! *****************************************************************************
  4. Copyright (c) Microsoft Corporation. All rights reserved.
  5. Licensed under the Apache License, Version 2.0 (the "License"); you may not use
  6. this file except in compliance with the License. You may obtain a copy of the
  7. License at http://www.apache.org/licenses/LICENSE-2.0
  8. THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  9. KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
  10. WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
  11. MERCHANTABLITY OR NON-INFRINGEMENT.
  12. See the Apache Version 2.0 License for specific language governing permissions
  13. and limitations under the License.
  14. ***************************************************************************** */
  15. var __assign = function() {
  16. __assign = Object.assign || function __assign(t) {
  17. for (var s, i = 1, n = arguments.length; i < n; i++) {
  18. s = arguments[i];
  19. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
  20. }
  21. return t;
  22. };
  23. return __assign.apply(this, arguments);
  24. };
  25. /**
  26. * Copyright (c) 2018-present, Ephox, Inc.
  27. *
  28. * This source code is licensed under the Apache 2 license found in the
  29. * LICENSE file in the root directory of this source tree.
  30. *
  31. */
  32. var validEvents = [
  33. 'onActivate',
  34. 'onAddUndo',
  35. 'onBeforeAddUndo',
  36. 'onBeforeExecCommand',
  37. 'onBeforeGetContent',
  38. 'onBeforeRenderUI',
  39. 'onBeforeSetContent',
  40. 'onBeforePaste',
  41. 'onBlur',
  42. 'onChange',
  43. 'onClearUndos',
  44. 'onClick',
  45. 'onContextMenu',
  46. 'onCopy',
  47. 'onCut',
  48. 'onDblclick',
  49. 'onDeactivate',
  50. 'onDirty',
  51. 'onDrag',
  52. 'onDragDrop',
  53. 'onDragEnd',
  54. 'onDragGesture',
  55. 'onDragOver',
  56. 'onDrop',
  57. 'onExecCommand',
  58. 'onFocus',
  59. 'onFocusIn',
  60. 'onFocusOut',
  61. 'onGetContent',
  62. 'onHide',
  63. 'onInit',
  64. 'onKeyDown',
  65. 'onKeyPress',
  66. 'onKeyUp',
  67. 'onLoadContent',
  68. 'onMouseDown',
  69. 'onMouseEnter',
  70. 'onMouseLeave',
  71. 'onMouseMove',
  72. 'onMouseOut',
  73. 'onMouseOver',
  74. 'onMouseUp',
  75. 'onNodeChange',
  76. 'onObjectResizeStart',
  77. 'onObjectResized',
  78. 'onObjectSelected',
  79. 'onPaste',
  80. 'onPostProcess',
  81. 'onPostRender',
  82. 'onPreProcess',
  83. 'onProgressState',
  84. 'onRedo',
  85. 'onRemove',
  86. 'onReset',
  87. 'onSaveContent',
  88. 'onSelectionChange',
  89. 'onSetAttrib',
  90. 'onSetContent',
  91. 'onShow',
  92. 'onSubmit',
  93. 'onUndo',
  94. 'onVisualAid'
  95. ];
  96. var isValidKey = function (key) { return validEvents.map(function (event) { return event.toLowerCase(); }).indexOf(key.toLowerCase()) !== -1; };
  97. var bindHandlers = function (initEvent, listeners, editor) {
  98. Object.keys(listeners)
  99. .filter(isValidKey)
  100. .forEach(function (key) {
  101. var handler = listeners[key];
  102. if (typeof handler === 'function') {
  103. if (key === 'onInit') {
  104. handler(initEvent, editor);
  105. }
  106. else {
  107. editor.on(key.substring(2), function (e) { return handler(e, editor); });
  108. }
  109. }
  110. });
  111. };
  112. var bindModelHandlers = function (ctx, editor) {
  113. var modelEvents = ctx.$props.modelEvents ? ctx.$props.modelEvents : null;
  114. var normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
  115. ctx.$watch('value', function (val, prevVal) {
  116. if (editor && typeof val === 'string' && val !== prevVal && val !== editor.getContent({ format: ctx.$props.outputFormat })) {
  117. editor.setContent(val);
  118. }
  119. });
  120. editor.on(normalizedEvents ? normalizedEvents : 'change input undo redo', function () {
  121. ctx.$emit('input', editor.getContent({ format: ctx.$props.outputFormat }));
  122. });
  123. };
  124. var initEditor = function (initEvent, ctx, editor) {
  125. var value = ctx.$props.value ? ctx.$props.value : '';
  126. var initialValue = ctx.$props.initialValue ? ctx.$props.initialValue : '';
  127. editor.setContent(value || (ctx.mounted ? ctx.cache : initialValue));
  128. // checks if the v-model shorthand is used (which sets an v-on:input listener) and then binds either
  129. // specified the events or defaults to "change keyup" event and emits the editor content on that event
  130. if (ctx.$listeners.input) {
  131. bindModelHandlers(ctx, editor);
  132. }
  133. bindHandlers(initEvent, ctx.$listeners, editor);
  134. ctx.mounted = true;
  135. };
  136. var unique = 0;
  137. var uuid = function (prefix) {
  138. var time = Date.now();
  139. var random = Math.floor(Math.random() * 1000000000);
  140. unique++;
  141. return prefix + '_' + random + unique + String(time);
  142. };
  143. var isTextarea = function (element) {
  144. return element !== null && element.tagName.toLowerCase() === 'textarea';
  145. };
  146. var normalizePluginArray = function (plugins) {
  147. if (typeof plugins === 'undefined' || plugins === '') {
  148. return [];
  149. }
  150. return Array.isArray(plugins) ? plugins : plugins.split(' ');
  151. };
  152. var mergePlugins = function (initPlugins, inputPlugins) {
  153. return normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
  154. };
  155. var isNullOrUndefined = function (value) { return value === null || value === undefined; };
  156. /**
  157. * Copyright (c) 2018-present, Ephox, Inc.
  158. *
  159. * This source code is licensed under the Apache 2 license found in the
  160. * LICENSE file in the root directory of this source tree.
  161. *
  162. */
  163. var createState = function () {
  164. return {
  165. listeners: [],
  166. scriptId: uuid('tiny-script'),
  167. scriptLoaded: false
  168. };
  169. };
  170. var CreateScriptLoader = function () {
  171. var state = createState();
  172. var injectScriptTag = function (scriptId, doc, url, callback) {
  173. var scriptTag = doc.createElement('script');
  174. scriptTag.referrerPolicy = 'origin';
  175. scriptTag.type = 'application/javascript';
  176. scriptTag.id = scriptId;
  177. scriptTag.src = url;
  178. var handler = function () {
  179. scriptTag.removeEventListener('load', handler);
  180. callback();
  181. };
  182. scriptTag.addEventListener('load', handler);
  183. if (doc.head) {
  184. doc.head.appendChild(scriptTag);
  185. }
  186. };
  187. var load = function (doc, url, callback) {
  188. if (state.scriptLoaded) {
  189. callback();
  190. }
  191. else {
  192. state.listeners.push(callback);
  193. if (!doc.getElementById(state.scriptId)) {
  194. injectScriptTag(state.scriptId, doc, url, function () {
  195. state.listeners.forEach(function (fn) { return fn(); });
  196. state.scriptLoaded = true;
  197. });
  198. }
  199. }
  200. };
  201. // Only to be used by tests.
  202. var reinitialize = function () {
  203. state = createState();
  204. };
  205. return {
  206. load: load,
  207. reinitialize: reinitialize
  208. };
  209. };
  210. var ScriptLoader = CreateScriptLoader();
  211. /**
  212. * Copyright (c) 2018-present, Ephox, Inc.
  213. *
  214. * This source code is licensed under the Apache 2 license found in the
  215. * LICENSE file in the root directory of this source tree.
  216. *
  217. */
  218. var getGlobal = function () { return (typeof window !== 'undefined' ? window : global); };
  219. var getTinymce = function () {
  220. var global = getGlobal();
  221. return global && global.tinymce ? global.tinymce : null;
  222. };
  223. /**
  224. * Copyright (c) 2018-present, Ephox, Inc.
  225. *
  226. * This source code is licensed under the Apache 2 license found in the
  227. * LICENSE file in the root directory of this source tree.
  228. *
  229. */
  230. var editorProps = {
  231. apiKey: String,
  232. cloudChannel: String,
  233. id: String,
  234. init: Object,
  235. initialValue: String,
  236. inline: Boolean,
  237. modelEvents: [String, Array],
  238. plugins: [String, Array],
  239. tagName: String,
  240. toolbar: [String, Array],
  241. value: String,
  242. disabled: Boolean,
  243. tinymceScriptSrc: String,
  244. outputFormat: {
  245. type: String,
  246. validator: function (prop) { return prop === 'html' || prop === 'text'; }
  247. },
  248. };
  249. /**
  250. * Copyright (c) 2018-present, Ephox, Inc.
  251. *
  252. * This source code is licensed under the Apache 2 license found in the
  253. * LICENSE file in the root directory of this source tree.
  254. *
  255. */
  256. var renderInline = function (h, id, tagName) {
  257. return h(tagName ? tagName : 'div', {
  258. attrs: { id: id }
  259. });
  260. };
  261. var renderIframe = function (h, id) {
  262. return h('textarea', {
  263. attrs: { id: id },
  264. style: { visibility: 'hidden' }
  265. });
  266. };
  267. var initialise = function (ctx) { return function () {
  268. var finalInit = __assign(__assign({}, ctx.$props.init), { readonly: ctx.$props.disabled, selector: "#" + ctx.elementId, plugins: mergePlugins(ctx.$props.init && ctx.$props.init.plugins, ctx.$props.plugins), toolbar: ctx.$props.toolbar || (ctx.$props.init && ctx.$props.init.toolbar), inline: ctx.inlineEditor, setup: function (editor) {
  269. ctx.editor = editor;
  270. editor.on('init', function (e) { return initEditor(e, ctx, editor); });
  271. if (ctx.$props.init && typeof ctx.$props.init.setup === 'function') {
  272. ctx.$props.init.setup(editor);
  273. }
  274. } });
  275. if (isTextarea(ctx.element)) {
  276. ctx.element.style.visibility = '';
  277. }
  278. getTinymce().init(finalInit);
  279. }; };
  280. var Editor = {
  281. props: editorProps,
  282. created: function () {
  283. this.elementId = this.$props.id || uuid('tiny-vue');
  284. this.inlineEditor = (this.$props.init && this.$props.init.inline) || this.$props.inline;
  285. this.mounted = false;
  286. },
  287. watch: {
  288. disabled: function () {
  289. this.editor.setMode(this.disabled ? 'readonly' : 'design');
  290. }
  291. },
  292. mounted: function () {
  293. this.element = this.$el;
  294. if (getTinymce() !== null) {
  295. initialise(this)();
  296. }
  297. else if (this.element && this.element.ownerDocument) {
  298. var channel = this.$props.cloudChannel ? this.$props.cloudChannel : '5';
  299. var apiKey = this.$props.apiKey ? this.$props.apiKey : 'no-api-key';
  300. var scriptSrc = isNullOrUndefined(this.$props.tinymceScriptSrc) ?
  301. "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js" :
  302. this.$props.tinymceScriptSrc;
  303. ScriptLoader.load(this.element.ownerDocument, scriptSrc, initialise(this));
  304. }
  305. },
  306. beforeDestroy: function () {
  307. if (getTinymce() !== null) {
  308. getTinymce().remove(this.editor);
  309. }
  310. },
  311. deactivated: function () {
  312. var _a;
  313. if (!this.inlineEditor) {
  314. this.cache = this.editor.getContent();
  315. (_a = getTinymce()) === null || _a === void 0 ? void 0 : _a.remove(this.editor);
  316. }
  317. },
  318. activated: function () {
  319. if (!this.inlineEditor && this.mounted) {
  320. initialise(this)();
  321. }
  322. },
  323. render: function (h) {
  324. return this.inlineEditor ? renderInline(h, this.elementId, this.$props.tagName) : renderIframe(h, this.elementId);
  325. }
  326. };
  327. /**
  328. * Copyright (c) 2018-present, Ephox, Inc.
  329. *
  330. * This source code is licensed under the Apache 2 license found in the
  331. * LICENSE file in the root directory of this source tree.
  332. *
  333. */
  334. return Editor;
  335. }());