Updated all methods that set/get the editor content, extensions can c…

…hange the html that is being set/get. Moved the extension init before the addElements method to allow extension hook into the setContent and getContent. Because of the move the elements are not available in the extension init method, the extension should subscribe to the add addElement and removeElement events. Always enable toolbar when not disabled in options, even when all elements on page have data-disable-toolbar set, it is possible that elements are added later that require the toolbar.
yabwe · Jul 18, 2017 · 901ce97 · 901ce97
1 parent 4ba4fff
commit 901ce97
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/spec/toolbar.spec.js b/spec/toolbar.spec.js
@@ -528,12 +528,15 @@ describe('MediumEditor.extensions.toolbar TestCase', function () {
             expect(document.getElementsByClassName('medium-editor-toolbar-actions').length).toBe(0);
         });
 
+        /*
+        // Only disable using options, it is possible to add elements later who don't have the disable-toolbar attr and will not work
         it('should not create the toolbar if all elements has data attr of disable-toolbar', function () {
             this.el.setAttribute('data-disable-toolbar', 'true');
             var editor = this.newMediumEditor('.editor');
             expect(document.getElementsByClassName('medium-editor-toolbar-actions').length).toBe(0);
             expect(editor.getExtensionByName('toolbar')).toBeUndefined();
         });
+        */
 
         it('should not show the toolbar when one element has a data attr of disable-toolbar set and text is selected', function () {
             var element = this.createElement('div', 'editor', 'lorem ipsum'),

diff --git a/src/js/core.js b/src/js/core.js
@@ -200,7 +200,10 @@
     function handleEditableInput(event, editable) {
         var textarea = editable.parentNode.querySelector('textarea[medium-editor-textarea-id="' + editable.getAttribute('medium-editor-textarea-id') + '"]');
         if (textarea) {
-            textarea.value = editable.innerHTML.trim();
+            var index = this.elements.indexOf(editable);
+            if (index !== -1) {
+                textarea.value = this.getContent(index);
+            }
         }
     }
 
@@ -315,14 +318,6 @@
     }
 
     function isToolbarEnabled() {
-        // If any of the elements don't have the toolbar disabled
-        // We need a toolbar
-        if (this.elements.every(function (element) {
-                return !!element.getAttribute('data-disable-toolbar');
-            })) {
-            return false;
-        }
-
         return this.options.toolbar !== false;
     }
 
@@ -694,17 +689,13 @@
             this.events = new MediumEditor.Events(this);
             this.elements = [];
 
-            this.addElements(this.origElements);
-
-            if (this.elements.length === 0) {
-                return;
-            }
-
-            this.isActive = true;
-
             // Call initialization helpers
             initExtensions.call(this);
             attachHandlers.call(this);
+
+            this.addElements(this.origElements);
+
+            this.isActive = true;
         },
 
         destroy: function () {
@@ -722,11 +713,9 @@
 
             this.events.destroy();
 
-            this.elements.forEach(function (element) {
-                // Reset elements content, fix for issue where after editor destroyed the red underlines on spelling errors are left
-                if (this.options.spellcheck) {
-                    element.innerHTML = element.innerHTML;
-                }
+            this.elements.forEach(function (element, i) {
+                // Call the getContent to set innerHTML, extensions can do some cleanup
+                element.innerHTML = this.getContent(i);
 
                 // cleanup extra added attributes
                 element.removeAttribute('contentEditable');
@@ -798,7 +787,7 @@
             for (i = 0; i < len; i += 1) {
                 elementid = (this.elements[i].id !== '') ? this.elements[i].id : 'element-' + i;
                 content[elementid] = {
-                    value: this.elements[i].innerHTML.trim()
+                    value: this.getContent(i)
                 };
             }
             return content;
@@ -1190,7 +1179,15 @@
 
             if (this.elements[index]) {
                 var target = this.elements[index];
+
+                this.extensions.forEach(function (extension) {
+                    if (typeof extension.setContent === 'function') {
+                        html = extension.setContent(html);
+                    }
+                }, this);
+
                 target.innerHTML = html;
+
                 this.checkContentChanged(target);
             }
         },
@@ -1199,8 +1196,17 @@
             index = index || 0;
 
             if (this.elements[index]) {
-                return this.elements[index].innerHTML.trim();
+                var html = this.elements[index].innerHTML.trim();
+
+                this.extensions.forEach(function (extension) {
+                    if (typeof extension.getContent === 'function') {
+                        html = extension.getContent(html);
+                    }
+                }, this);
+
+                return html;
             }
+
             return null;
         },