support v-model, and fix input bug

lpreterite · May 31, 2017 · bde4214 · bde4214
1 parent 15c14ee
commit bde4214
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 30 deletions.
diff --git a/example/index.html b/example/index.html
@@ -14,11 +14,11 @@ <h1>{{ title }}</h1>
 
       <h2>TEST1</h2>
       <code v-html="content"></code>
-      <vue-tinymce ref="test1" :value="content" :setting="tinymceSetting" @change="content=arguments[0]"></vue-tinymce>
+      <vue-tinymce ref="test1" v-model="content" :setting="tinymceSetting" @change="content=arguments[0]"></vue-tinymce>
 
       <h2>TEST2</h2>
       <code v-html="content2"></code>
-      <vue-tinymce ref="test2" :value="content2" :setting="tinymceSetting" @change="content2=arguments[0]"></vue-tinymce>
+      <vue-tinymce ref="test2" v-model="content2" :setting="tinymceSetting" @change="content2=arguments[0]"></vue-tinymce>
     </div>
     <script src="/tinymce.min.js"></script>
     <script src="/build.js"></script>

diff --git a/example/main.js b/example/main.js
@@ -6,6 +6,10 @@ Vue.component('vue-tinymce', VueTinymce);
 var vm = new Vue({
     el: '#app',
     data: function(){
+        setTimeout(()=>{
+            this.content = '<p>html content'+ Date.now() +'</p>';
+        }, 1000);
+
         return {
             title: 'VueTinymce',
             content: '<p>html content</p>',

diff --git a/src/vue-tinymce.vue b/src/vue-tinymce.vue
@@ -1,5 +1,9 @@
 <script>
 
+const INIT = 0;
+const INPUT = 1;
+const CHANGED = 2;
+
 const tinymceSetting = {
     "menubar": false,
     "height": 500,
@@ -19,19 +23,6 @@ const tinymceSetting = {
 };
 
 export default {
-    render(createElement){
-        return createElement('textarea', {
-            attrs: {
-                id: this.id
-            }
-        });
-    },
-    data(){
-        return {
-            id: 'vue-tinymce-'+Date.now(),
-            editor: null
-        }
-    },
     props: {
         value: {
             type: String,
@@ -58,16 +49,30 @@ export default {
             }
         }
     },
+    render(createElement){
+        return createElement('textarea', {
+            attrs: {
+                id: this.id
+            }
+        });
+    },
+    data(){
+        return {
+            id: 'vue-tinymce-'+Date.now(),
+            editor: null,
+            status: INIT
+        }
+    },
+    watchs:{
+        value(val){
+            if(this.status === CHANGED || selt.status === INIT) return this.status = INPUT;
+            tinymce.get(this.id).setContent(val);
+        }
+    },
     created(){
         if(typeof tinymce === "undefined") throw new Error('tinymce undefined');
     },
     mounted(){
-        const selt = this;
-
-        const unwatch = this.$watch('value', val => {
-            tinymce.get(this.id).setContent(val);
-        })
-
         const setting = Object.assign(
             {
                 plugins: this.plugins
@@ -78,24 +83,23 @@ export default {
                 selector: '#'+this.id,
                 theme: 'modern',
                 setup: (editor)=> {
-                    selt.setup(editor);
+                    this.setup(editor);
                     this.editor = editor;
                     editor.on('init', ()=>{
-                        function change(){
-                            if(editor.undoManager.data.length<=1) return unwatch();
-                            selt.$emit('change', editor.getContent());
-                        };
-                        editor.setContent(selt.value);
-                        editor.on('change undo redo', change);
+                        editor.setContent(this.value);
+                        editor.on('input change undo redo', ()=>{
+                            if(this.status === INPUT || this.status === INIT) return this.status = CHANGED;
+                            this.$emit('input', editor.getContent());
+                        });
                     });
                 }
             }
         );
 
-        tinymce.init(setting)
+        tinymce.init(setting);
     },
     beforeDestroy: function(){
-        tinymce.remove(this.id)
+        tinymce.remove(this.id);
     }
 }
 </script>