diff --git a/src/rich_text_editor/index.js b/src/rich_text_editor/index.js index 408f03c64..ff84b46a0 100644 --- a/src/rich_text_editor/index.js +++ b/src/rich_text_editor/index.js @@ -72,10 +72,7 @@ export default () => { * @private */ init(opts = {}) { - config = { - ...defaults, - ...opts, - }; + config = { ...defaults, ...opts }; const ppfx = config.pStylePrefix; if (ppfx) { @@ -88,7 +85,6 @@ export default () => { if (!hasWin()) return this; toolbar = document.createElement('div'); toolbar.className = `${ppfx}rte-toolbar ${ppfx}one-bg`; - globalRte = this.initRte(document.createElement('div')); //Avoid closing on toolbar clicking on(toolbar, 'mousedown', e => e.stopPropagation()); @@ -97,7 +93,7 @@ export default () => { destroy() { const { customRte } = this; - globalRte && globalRte.destroy(); + globalRte?.destroy(); customRte && customRte.destroy && customRte.destroy(); this.actionbar = 0; this.actions = 0; @@ -134,25 +130,30 @@ export default () => { inactive: `${pfx}inactive`, disabled: `${pfx}disabled`, }; - const rte = new RichTextEditor({ - em, - el, - classes, - actions, - actionbar, - actionbarContainer, - }); - globalRte && globalRte.setEl(el); - if (rte.actionbar) { - this.actionbar = rte.actionbar; + if (!globalRte) { + globalRte = new RichTextEditor({ + em, + el, + classes, + actions, + actionbar, + actionbarContainer, + }); + } else { + globalRte.em = em; + globalRte.setEl(el); + } + + if (globalRte.actionbar) { + this.actionbar = globalRte.actionbar; } - if (rte.actions) { - this.actions = rte.actions; + if (globalRte.actions) { + this.actions = globalRte.actions; } - return rte; + return globalRte; }, /** diff --git a/src/rich_text_editor/model/RichTextEditor.js b/src/rich_text_editor/model/RichTextEditor.js index 62d991df4..6db3c01f5 100644 --- a/src/rich_text_editor/model/RichTextEditor.js +++ b/src/rich_text_editor/model/RichTextEditor.js @@ -78,8 +78,8 @@ const defActions = { export default class RichTextEditor { constructor(settings = {}) { - const el = settings.el; - this.em = settings.em; + const { el, em } = settings; + this.em = em; if (el[RTE_KEY]) { return el[RTE_KEY]; @@ -241,7 +241,7 @@ export default class RichTextEditor { */ syncActions() { this.getActions().forEach(action => { - if (this.settings.actionbar) { + if (this.actionbar) { if (!action.state || (action.state && action.state(this, this.doc) >= 0)) { const event = action.event || 'click'; action.btn[`on${event}`] = e => { @@ -323,7 +323,7 @@ export default class RichTextEditor { * @param {string} value HTML string */ insertHTML(value, { select } = {}) { - const { em, doc } = this; + const { em, doc, el } = this; const sel = doc.getSelection(); if (sel && sel.rangeCount) { @@ -343,7 +343,7 @@ export default class RichTextEditor { sel.removeAllRanges(); sel.addRange(range); - this.el.focus(); + el.focus(); if (select) { const cmp = em.getSelected(); @@ -351,7 +351,7 @@ export default class RichTextEditor { const toSel = cmp.find(`[${customElAttr}]`)[0]; if (!toSel) return; toSel.removeAttributes(customElAttr); - editor.select(toSel); + em.setSelected(toSel); }); cmp.trigger('disable'); }