Merge pull request #736 from ayobami14/setContent

Expose setContent method on medium

API.md

@@ -3,6 +3,7 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+
 - [Initialization Functions](#initialization-functions)
   - [`MediumEditor(elements, options)`](#mediumeditorelements-options)
   - [`destroy()`](#destroy)
@@ -35,6 +36,7 @@
   - [`delay(fn)`](#delayfn)
   - [`getExtensionByName(name)`](#getextensionbynamename)
   - [`serialize()`](#serialize)
+  - [`setContent(html, index)`](#setcontenthtml-index)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -59,7 +61,7 @@ _**elements** (`String` | `HTMLElement` | `Array`)_:
 
 3. `Array`: If passed as an `Array` of `HTMLElement`s, this will be used as the internal list of **elements**.
 
-_**options** (`Object`)_: 
+_**options** (`Object`)_:
 
 Set of [custom options](OPTIONS.md) used to initialize `MediumEditor`.
 
@@ -91,7 +93,7 @@ Attaches an event listener to specific element via the browser's built-in `addEv
 
   * Element to attach listener to via `addEventListener(type, listener, useCapture)`
 
-2. _**event** (`String`)_: 
+2. _**event** (`String`)_:
 
   * type argument for `addEventListener(type, listener, useCapture)`
 
@@ -114,7 +116,7 @@ Detach an event listener from a specific element via the browser's built-in `rem
 
   * Element to detach listener from via `removeEventListener(type, listener, useCapture)`
 
-2. _**event** (`String`)_: 
+2. _**event** (`String`)_:
 
   * type argument for `removeEventListener(type, listener, useCapture)`
 
@@ -137,7 +139,7 @@ Attaches a listener for the specified custom event name.
 
   * Name of the event to listen to.  See the list of built-in [Custom Events](CUSTOM-EVENTS.md).
 
-2. _**listener(data, editable)** (`function`)_: 
+2. _**listener(data, editable)** (`function`)_:
 
   * Listener method that will be called whenever the custom event is triggered.
 
@@ -161,7 +163,7 @@ Detaches a custom event listener for the specified custom event name.
 
   * Name of the event to detach the listener for.
 
-2. _**listener** (`function`)_: 
+2. _**listener** (`function`)_:
 
   * A reference to the listener to detach.  This must be a match by-reference and not a copy.
 
@@ -211,7 +213,7 @@ Restores the selection using a data representation of previously selected text (
 
   * Data representing the state of the selection to restore.
 
-2. _**favorLaterSelectionAnchor** (`boolen`)_: 
+2. _**favorLaterSelectionAnchor** (`boolean`)_:
 
   * If `true`, import the cursor immediately subsequent to an anchor tag if it would otherwise be placed right at the trailing edge inside the anchor. THis cursor positioning, even though visually equivalent to the user, can affect behavior in Internet Explorer.
 
@@ -286,7 +288,7 @@ _wrapper around the browser's built in `document.queryCommandState(action)` for
 ***
 ## Helper Functions
 
-### `delay(fn)` 
+### `delay(fn)`
 
 Delay any function from being executed by the amount of time passed as the **delay** option.
 
@@ -312,4 +314,16 @@ Get a reference to an extension with the specified name.
 
 Returns a JSON object including the content of each of the **elements** inside the editor.
 
-***
+***
+### `setContent(html, index)`
+
+Sets the innerHTML content for the element at `index`.
+Trigger the `editableInput` event.
+
+**Arguments**
+
+1. _**html** (`string`)_:
+  * The content to set the element to
+
+2. _**index** (`integer`)_:
+  * Index of the element to set the content on. Defaults to 0 when not provided.

README.md

@@ -535,6 +535,7 @@ View the [MediumEditor Object API documentation](API.md) on the Wiki for details
 * __.delay(fn)__: delay any function from being executed by the amount of time passed as the `delay` option
 * __.getExtensionByName(name)__: get a reference to an extension with the specified name
 * __.serialize()__: returns a JSON object with elements contents
+* __.setContent(html, element)__: sets the `innerHTML` to `html` of the element at `index`
 
 ## Capturing DOM changes
 

spec/core-api.spec.js

@@ -37,4 +37,21 @@ describe('Core-API', function () {
             expect(focused).toBe(elementOne);
         });
     });
-});
+
+    describe('setContent', function () {
+        it('should set the content of the editor\'s element', function () {
+            var newHTML = 'Lorem ipsum dolor',
+                otherHTML = 'something different',
+                elementOne = this.createElement('div', 'editor', 'lorem ipsum'),
+                editor = this.newMediumEditor('.editor');
+
+            editor.setContent(newHTML);
+            expect(this.el.innerHTML).toEqual(newHTML);
+            expect(elementOne.innerHTML).not.toEqual(newHTML);
+
+            editor.setContent(otherHTML, 1);
+            expect(elementOne.innerHTML).toEqual(otherHTML);
+            expect(this.el.innerHTML).not.toEqual(otherHTML);
+        });
+    });
+});

spec/events.spec.js

@@ -302,6 +302,39 @@ describe('Events TestCase', function () {
 
                 Events.prototype.InputEventOnContenteditableSupported = originalInputSupport;
             });
+
+            it(namePrefix + ',setContent should fire editableInput when content changes', function () {
+                var newHTML = 'Lorem ipsum dolor',
+                    editor = this.newMediumEditor('.editor'),
+                    spy = jasmine.createSpy('handler'),
+                    originalInputSupport = Events.prototype.InputEventOnContenteditableSupported;
+
+                Events.prototype.InputEventOnContenteditableSupported = inputSupported;
+
+                editor.subscribe('editableInput', spy);
+                expect(spy).not.toHaveBeenCalled();
+
+                editor.setContent(newHTML, 0);
+                var obj = { target: this.el, currentTarget: this.el };
+                expect(spy).toHaveBeenCalledWith(obj, this.el);
+                Events.prototype.InputEventOnContenteditableSupported = originalInputSupport;
+            });
+
+            it(namePrefix + ', setContent should not fire editableInput when content doesn\'t change', function () {
+                var sameHTML = 'lore ipsum',
+                    editor = this.newMediumEditor('.editor'),
+                    spy = jasmine.createSpy('handler'),
+                    originalInputSupport = Events.prototype.InputEventOnContenteditableSupported;
+
+                Events.prototype.InputEventOnContenteditableSupported = inputSupported;
+
+                editor.subscribe('editableInput', spy);
+                expect(spy).not.toHaveBeenCalled();
+
+                editor.setContent(sameHTML, 0);
+                expect(spy).not.toHaveBeenCalled();
+                Events.prototype.InputEventOnContenteditableSupported = originalInputSupport;
+            });
         }
 
         runEditableInputTests(true);

src/js/core.js

@@ -992,6 +992,16 @@ function MediumEditor(elements, options) {
 
         pasteHTML: function (html, options) {
             this.getExtensionByName('paste').pasteHTML(html, options);
+        },
+
+        setContent: function (html, index) {
+            index = index || 0;
+
+            if (this.elements[index]) {
+                var target = this.elements[index];
+                target.innerHTML = html;
+                this.events.updateInput(target, { target: target, currentTarget: target });
+            }
         }
     };
 }());

src/js/events.js

@@ -365,6 +365,9 @@ var Events;
         },
 
         updateInput: function (target, eventObj) {
+            if (!this.contentCache) {
+                return;
+            }
             // An event triggered which signifies that the user may have changed someting
             // Look in our cache of input for the contenteditables to see if something changed
             var index = target.getAttribute('medium-editor-index');