Add's v-model ability and quick access to set placeholder prop

README.md

@@ -25,7 +25,7 @@ new Vue {
 ```
 ```vue
 <!-- index.html -->
-<medium-editor :text='myText' :options='options' custom-tag='h2' v-on:edit='applyTextEdit'>
+<medium-editor v-model='myText' :options='options' custom-tag='h2'/>
 ```
 
 > Full usage example at [github.com/FranzSkuffka/vue-medium-editor/tree/gh-pages](https://github.com/FranzSkuffka/vue-medium-editor/tree/gh-pages)

dist/vueMediumEditor.js

@@ -286,7 +286,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 exports.default = {
   name: 'medium-editor',
   props: {
-    text: [String],
+    value: [String],
     customTag: {
       type: [String],
       default: function _default() {
@@ -323,21 +323,25 @@ exports.default = {
       // bind edit operations to model
       // we need to store the handler in order to later on detach it again
       this.emit = function (event) {
-        return _this.$emit('edit', { event: event, api: _this.api });
+        // Enable full access to medium api.
+        _this.$emit('edit', { event: event, api: _this.api });
+        // Enables v-model ability
+        _this.$emit('value', _this.api.origElements.innerHTML);
       };
+      //subscribe to editable input event.
       this.api.subscribe('editableInput', this.emit);
 
       // emit event to give parent access to MediumEditor instance
       this.$emit('editorCreated', this.api);
     }
   },
   watch: {
-    text: function text(newText) {
+    value: function value(newValue) {
       // innerHTML MUST not be performed if the text did not actually change.
       // otherwise, the caret position will be reset.
-      if (newText !== this.$refs.element.innerHTML) {
-        this.api.setContent(this.text, 0);
-        this.$refs.element.innerHTML = this.text;
+      if (newValue !== this.$refs.element.innerHTML) {
+        this.api.setContent(this.value, 0);
+        this.$refs.element.innerHTML = this.value;
       }
     },
 
@@ -347,9 +351,13 @@ exports.default = {
      * We only tear down the editor, if the options actually changed.
      * See: https://github.com/yabwe/medium-editor/issues/1129
      */
-    options: function options(newOptions) {
-      this.tearDown();
-      this.createAndSubscribe();
+    options: {
+      handler: function handler(newOptions) {
+        this.tearDown();
+        this.createAndSubscribe();
+      },
+
+      deep: true
     }
   },
   MediumEditor: _mediumEditor2.default
@@ -366,9 +374,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = {
-  name: 'medium-editor-nuxt',
+  name: 'medium-editor-ssr',
   props: {
-    text: [String],
+    value: [String],
     customTag: {
       type: [String],
       default: function _default() {

interactive.js

@@ -3,15 +3,16 @@ import MediumEditor from 'medium-editor'
 export default {
   name: 'medium-editor',
   props: {
-    text: [String],
+    value: [String],
     customTag: {
       type: [String],
       default: () => 'div'
     },
     options: {
       type: [Object],
       default: () => {}
-    }
+    },
+    placeholder: [String]
   },
   render (h) {
     return h(this.customTag, { ref: 'element' })
@@ -30,26 +31,38 @@ export default {
       this.api.destroy()
     },
     createAndSubscribe () {
-      this.$refs.element.innerHTML = this.text
+      this.$refs.element.innerHTML = this.value
 
-      this.api = new MediumEditor(this.$refs.element, this.options)
+      let placeholder = this.placeholder ? {
+        placeholder: {
+          text: this.placeholder
+        }
+      } : {}
+
+      this.api = new MediumEditor(this.$refs.element, { ...placeholder, ...this.options })
 
       // bind edit operations to model
       // we need to store the handler in order to later on detach it again
-      this.emit = event => this.$emit('edit', {event, api: this.api})
+      this.emit = (event) => {
+        // Enable full access to medium api.
+        this.$emit('edit', {event, api: this.api})
+        // Enables v-model ability
+        this.$emit('input', this.api.origElements.innerHTML)
+      }
+      //subscribe to editable input event.
       this.api.subscribe('editableInput', this.emit)
 
       // emit event to give parent access to MediumEditor instance
       this.$emit('editorCreated', this.api);
     }
   },
   watch: {
-    text (newText) {
+    value (newValue) {
       // innerHTML MUST not be performed if the text did not actually change.
       // otherwise, the caret position will be reset.
-      if (newText !== this.$refs.element.innerHTML) {
-        this.api.setContent(this.text, 0)
-        this.$refs.element.innerHTML = this.text
+      if (newValue !== this.$refs.element.innerHTML) {
+        this.api.setContent(this.value, 0)
+        this.$refs.element.innerHTML = this.value
       }
     },
     /**

renderOnly.js

@@ -1,7 +1,7 @@
 export default {
-  name: 'medium-editor-nuxt',
+  name: 'medium-editor-ssr',
   props: {
-    text: [String],
+    value: [String],
     customTag: {
       type: [String],
       default: () => 'div'