support tinymce to 5.x

lpreterite · Jan 17, 2020 · c9c4402 · c9c4402
1 parent 4550c06
commit c9c4402
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 33 deletions.
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,5 @@
-import TinymceSetting from './setting'
 import VueTinymce from './vue-tinymce.vue'
-export { TinymceSetting, VueTinymce }
+export { VueTinymce }
 class VuePlugin{
     constructor(){
         const { prefix } = { prefix: "" }

diff --git a/src/setting.js b/src/setting.js
diff --git a/src/vue-tinymce.vue b/src/vue-tinymce.vue
@@ -6,8 +6,12 @@ const CHANGED = 2;
 
 export default {
     name: "VueTinymce",
+    model: {
+        prop: "content",
+        event: "change"
+    },
     props: {
-        value: {
+        content: {
             type: String,
             default: ''
         },
@@ -41,11 +45,11 @@ export default {
         }
     },
     watch: {
-        value(val){
+        content(val){
             // console.log('value change', val, this.status);
             if(this.status === CHANGED) return this.status = INPUT;
             if(!this.editor || !this.editor.initialized) return; // fix editor plugin is loading and set content will throw error.
-            this.editor.setContent(val);
+            this.setContent(this.editor, val);
         }
     },
     created(){
@@ -60,17 +64,17 @@ export default {
                     this.setup(editor);
                     // console.log('setup');
                     editor.on('init', ()=>{
-                        // console.log('init', this.value);
-                        editor.setContent(this.value);
+                        // console.log('init', this.content);
+                        this.setContent(editor, this.content)
                         //fix execCommand not change ,more see issues#2
                         editor.on('input change undo redo execCommand KeyUp', ()=>{
                             if(this.status === INPUT || this.status === INIT) return this.status = CHANGED;
-                            this.$emit('input', editor.getContent());
+                            this.$emit('change', editor.getContent());
                             // console.log('editor change', editor.getContent());
                         });
-                        //fix have chang not to emit input,more see issues #4
+                        //fix have chang not to emit change,more see issues #4
                         editor.on('NodeChange', ()=>{
-                            this.$emit('input', editor.getContent());
+                            this.$emit('change', editor.getContent());
                         });
                     });
                 }
@@ -88,6 +92,11 @@ export default {
     },
     beforeDestroy: function(){
         this.editor.remove();
+    },
+    methods: {
+        setContent(editor, val){
+            return editor.setContent(val)
+        }
     }
 }
 </script>