Init only one default RTE when necessary

src/rich_text_editor/index.js

@@ -72,10 +72,7 @@ export default () => {
      * @private
      */
     init(opts = {}) {
-      config = {
+      config = { ...defaults, ...opts };
-        ...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) {
+      if (!globalRte) {
-        this.actionbar = rte.actionbar;
+        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) {
+      if (globalRte.actions) {
-        this.actions = rte.actions;
+        this.actions = globalRte.actions;
       }
 
-      return rte;
+      return globalRte;
     },
 
     /**

src/rich_text_editor/model/RichTextEditor.js

@@ -78,8 +78,8 @@ const defActions = {
 
 export default class RichTextEditor {
   constructor(settings = {}) {
-    const el = settings.el;
+    const { el, em } = settings;
-    this.em = settings.em;
+    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');
       }