tinymce-vue.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  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. editor.on(normalizedEvents ? normalizedEvents : 'change input undo redo', function () {
  116. ctx.$emit('input', editor.getContent({ format: ctx.$props.outputFormat }));
  117. });
  118. };
  119. var initEditor = function (initEvent, ctx, editor) {
  120. var value = ctx.$props.value ? ctx.$props.value : '';
  121. var initialValue = ctx.$props.initialValue ? ctx.$props.initialValue : '';
  122. editor.setContent(value || (ctx.initialized ? ctx.cache : initialValue));
  123. // Always bind the value listener in case users use :value instead of v-model
  124. ctx.$watch('value', function (val, prevVal) {
  125. if (editor && typeof val === 'string' && val !== prevVal && val !== editor.getContent({ format: ctx.$props.outputFormat })) {
  126. editor.setContent(val);
  127. }
  128. });
  129. // checks if the v-model shorthand is used (which sets an v-on:input listener) and then binds either
  130. // specified the events or defaults to "change keyup" event and emits the editor content on that event
  131. if (ctx.$listeners.input) {
  132. bindModelHandlers(ctx, editor);
  133. }
  134. bindHandlers(initEvent, ctx.$listeners, editor);
  135. ctx.initialized = true;
  136. };
  137. var unique = 0;
  138. var uuid = function (prefix) {
  139. var time = Date.now();
  140. var random = Math.floor(Math.random() * 1000000000);
  141. unique++;
  142. return prefix + '_' + random + unique + String(time);
  143. };
  144. var isTextarea = function (element) {
  145. return element !== null && element.tagName.toLowerCase() === 'textarea';
  146. };
  147. var normalizePluginArray = function (plugins) {
  148. if (typeof plugins === 'undefined' || plugins === '') {
  149. return [];
  150. }
  151. return Array.isArray(plugins) ? plugins : plugins.split(' ');
  152. };
  153. var mergePlugins = function (initPlugins, inputPlugins) {
  154. return normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
  155. };
  156. var isNullOrUndefined = function (value) { return value === null || value === undefined; };
  157. /**
  158. * Copyright (c) 2018-present, Ephox, Inc.
  159. *
  160. * This source code is licensed under the Apache 2 license found in the
  161. * LICENSE file in the root directory of this source tree.
  162. *
  163. */
  164. var createState = function () {
  165. return {
  166. listeners: [],
  167. scriptId: uuid('tiny-script'),
  168. scriptLoaded: false
  169. };
  170. };
  171. var CreateScriptLoader = function () {
  172. var state = createState();
  173. var injectScriptTag = function (scriptId, doc, url, callback) {
  174. var scriptTag = doc.createElement('script');
  175. scriptTag.referrerPolicy = 'origin';
  176. scriptTag.type = 'application/javascript';
  177. scriptTag.id = scriptId;
  178. scriptTag.src = url;
  179. var handler = function () {
  180. scriptTag.removeEventListener('load', handler);
  181. callback();
  182. };
  183. scriptTag.addEventListener('load', handler);
  184. if (doc.head) {
  185. doc.head.appendChild(scriptTag);
  186. }
  187. };
  188. var load = function (doc, url, callback) {
  189. if (state.scriptLoaded) {
  190. callback();
  191. }
  192. else {
  193. state.listeners.push(callback);
  194. if (!doc.getElementById(state.scriptId)) {
  195. injectScriptTag(state.scriptId, doc, url, function () {
  196. state.listeners.forEach(function (fn) { return fn(); });
  197. state.scriptLoaded = true;
  198. });
  199. }
  200. }
  201. };
  202. // Only to be used by tests.
  203. var reinitialize = function () {
  204. state = createState();
  205. };
  206. return {
  207. load: load,
  208. reinitialize: reinitialize
  209. };
  210. };
  211. var ScriptLoader = CreateScriptLoader();
  212. /**
  213. * Copyright (c) 2018-present, Ephox, Inc.
  214. *
  215. * This source code is licensed under the Apache 2 license found in the
  216. * LICENSE file in the root directory of this source tree.
  217. *
  218. */
  219. var getGlobal = function () { return (typeof window !== 'undefined' ? window : global); };
  220. var getTinymce = function () {
  221. var global = getGlobal();
  222. return global && global.tinymce ? global.tinymce : null;
  223. };
  224. /**
  225. * Copyright (c) 2018-present, Ephox, Inc.
  226. *
  227. * This source code is licensed under the Apache 2 license found in the
  228. * LICENSE file in the root directory of this source tree.
  229. *
  230. */
  231. var editorProps = {
  232. apiKey: String,
  233. cloudChannel: String,
  234. id: String,
  235. init: Object,
  236. initialValue: String,
  237. inline: Boolean,
  238. modelEvents: [String, Array],
  239. plugins: [String, Array],
  240. tagName: String,
  241. toolbar: [String, Array],
  242. value: String,
  243. disabled: Boolean,
  244. tinymceScriptSrc: String,
  245. outputFormat: {
  246. type: String,
  247. validator: function (prop) { return prop === 'html' || prop === 'text'; }
  248. },
  249. };
  250. /**
  251. * Copyright (c) 2018-present, Ephox, Inc.
  252. *
  253. * This source code is licensed under the Apache 2 license found in the
  254. * LICENSE file in the root directory of this source tree.
  255. *
  256. */
  257. var renderInline = function (h, id, tagName) {
  258. return h(tagName ? tagName : 'div', {
  259. attrs: { id: id }
  260. });
  261. };
  262. var renderIframe = function (h, id) {
  263. return h('textarea', {
  264. attrs: { id: id },
  265. style: { visibility: 'hidden' }
  266. });
  267. };
  268. var initialise = function (ctx) { return function () {
  269. 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) {
  270. ctx.editor = editor;
  271. editor.on('init', function (e) { return initEditor(e, ctx, editor); });
  272. if (ctx.$props.init && typeof ctx.$props.init.setup === 'function') {
  273. ctx.$props.init.setup(editor);
  274. }
  275. } });
  276. if (isTextarea(ctx.element)) {
  277. ctx.element.style.visibility = '';
  278. ctx.element.style.display = '';
  279. }
  280. getTinymce().init(finalInit);
  281. }; };
  282. var Editor = {
  283. props: editorProps,
  284. created: function () {
  285. this.elementId = this.$props.id || uuid('tiny-vue');
  286. this.inlineEditor = (this.$props.init && this.$props.init.inline) || this.$props.inline;
  287. this.initialized = false;
  288. },
  289. watch: {
  290. disabled: function () {
  291. this.editor.setMode(this.disabled ? 'readonly' : 'design');
  292. }
  293. },
  294. mounted: function () {
  295. this.element = this.$el;
  296. if (getTinymce() !== null) {
  297. initialise(this)();
  298. }
  299. else if (this.element && this.element.ownerDocument) {
  300. var channel = this.$props.cloudChannel ? this.$props.cloudChannel : '5';
  301. var apiKey = this.$props.apiKey ? this.$props.apiKey : 'no-api-key';
  302. var scriptSrc = isNullOrUndefined(this.$props.tinymceScriptSrc) ?
  303. "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js" :
  304. this.$props.tinymceScriptSrc;
  305. ScriptLoader.load(this.element.ownerDocument, scriptSrc, initialise(this));
  306. }
  307. },
  308. beforeDestroy: function () {
  309. if (getTinymce() !== null) {
  310. getTinymce().remove(this.editor);
  311. }
  312. },
  313. deactivated: function () {
  314. var _a;
  315. if (!this.inlineEditor) {
  316. this.cache = this.editor.getContent();
  317. (_a = getTinymce()) === null || _a === void 0 ? void 0 : _a.remove(this.editor);
  318. }
  319. },
  320. activated: function () {
  321. if (!this.inlineEditor && this.initialized) {
  322. initialise(this)();
  323. }
  324. },
  325. render: function (h) {
  326. return this.inlineEditor ? renderInline(h, this.elementId, this.$props.tagName) : renderIframe(h, this.elementId);
  327. }
  328. };
  329. /**
  330. * Copyright (c) 2018-present, Ephox, Inc.
  331. *
  332. * This source code is licensed under the Apache 2 license found in the
  333. * LICENSE file in the root directory of this source tree.
  334. *
  335. */
  336. return Editor;
  337. }());