use official tinymce package for vuejs

FabianHippmann · Aug 25, 2018 · 285e614 · 285e614
1 parent 62b8037
commit 285e614
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 67 deletions.
diff --git a/resources/assets/js/Editor.vue b/resources/assets/js/Editor.vue
@@ -1,5 +1,10 @@
 <template>
-  <textarea :id="id" :value="value" class="main-content"></textarea>
+  <editor
+    :plugins="settings.plugins"
+    :toolbar="settings.toolbar"
+    :init="settings"
+    :initial-value="value"
+    @input="changed"/>
 </template>
 
 <script>
@@ -16,78 +21,42 @@ import "tinymce/plugins/media/plugin";
 import "tinymce/plugins/searchreplace/plugin";
 import "tinymce/plugins/contextmenu/plugin";
 
+import Editor from "@tinymce/tinymce-vue";
 export default {
+    components: {
+        editor: Editor // <- Important part
+    },
     props: {
-        id: {
-            type: String,
-            default: "editor"
-        },
         value: {
             type: String,
             default: ""
         }
     },
-    data: function() {
-        return {
-            myeditor: undefined
-        };
-    },
-    watch: {
-        value: function(newVal, oldVal) {
-            if (tinymce) {
-                if (newVal != null && oldVal == "" && this.myeditor != null) {
-                    this.myeditor.setContent(newVal);
-                }
-            }
-        }
-    },
-    mounted() {
-        if (tinymce) {
-            tinymce.init({
-                selector: `#${this.id}`,
-                theme: "modern",
-                setup: editor => {
-                    editor.on("init", e => {
-                        if (this.value != undefined)
-                            editor.setContent(this.value);
-                        this.$emit("input", this.value);
-                    });
-                },
-                plugins: [
-                    "autoresize autolink lists link image anchor",
-                    "searchreplace visualblocks code",
-                    "media contextmenu paste code"
-                ],
-                forced_root_block: "", //!important
-                force_br_newlines: true, //!important
-                force_p_newlines: false, //!important
-                convert_urls: false,
-                relative_urls: false,
+    data: () => ({
+        settings: {
+            plugins: [
+                "autoresize autolink lists link image anchor",
+                "searchreplace visualblocks code",
+                "media contextmenu paste code"
+            ],
+            toolbar:
+                "undo redo | eyecatcher | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
+            theme: "modern",
 
-                toolbar:
-                    "undo redo | eyecatcher | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
-                menubar: false,
-                image_advtab: true,
-                templates: [
-                    { title: "Test template 1", content: "Test 1" },
-                    { title: "Test template 2", content: "Test 2" }
-                ],
-                init_instance_callback: editor => {
-                    editor.on("KeyUp", e => {
-                        this.$emit("input", editor.getContent());
-                    });
-                    editor.on("Change", e => {
-                        this.$emit("input", editor.getContent());
-                    });
+            forced_root_block: "", //!important
+            force_br_newlines: true, //!important
+            force_p_newlines: false, //!important
+            convert_urls: false,
+            relative_urls: false,
 
-                    this.myeditor = editor;
-                }
-            });
+            menubar: false,
+            image_advtab: true
         }
-    },
-    destroyed() {
-        if (tinymce) {
-            this.myeditor.destroy();
+    }),
+
+    methods: {
+        changed(value) {
+            this.$emit("input", value);
         }
     }
 };

diff --git a/resources/assets/js/Snippet.vue b/resources/assets/js/Snippet.vue
@@ -30,7 +30,6 @@
         class="snippet__editor"
         v-show="editorToggleState">
         <editor
-          :id="editorId"
           :value="item.value"
           @input="updateValue"/>
       </div>
@@ -44,7 +43,7 @@ export default {
   computed: {
     editorId() {
       let namespace = this.item.namespace.replace(/\//g, "-");
-      return `${this.item.locale}-${namespace}-${this.item.key}`;
+      return `${Math.random().toString(36).substr(2, 5)}-${this.item.locale}-${namespace}-${this.item.key}`;
     }
   },
   mounted() {},

diff --git a/resources/assets/js/TranslationManager.vue b/resources/assets/js/TranslationManager.vue
@@ -105,7 +105,6 @@ export default {
             let snippets = this.snippets;
             Object.keys(this.filter).forEach(key => {
                 if(this.filter[key]){
-                    debugger;
                     snippets = snippets.filter(snippet => (snippet[key] == this.filter[key]))
                 }
             });
@@ -126,7 +125,6 @@ export default {
         },
         selectFilter(type, tag){
             this.filter[type] = tag;
-            debugger;
         },
         getGroups() {
             axios.get(this.prefix + "/groups").then(({data}) => {