TinyMCE und Vuejs als Komponente

Question

Ich versuche, eine Vue-Komponente für TinyMCE zu erstellen, aber ich habe einige Probleme, die ich nicht lösen kann! Kann mir jemand helfen? Oder vielleicht einen besseren Weg zu gehen beraten?

Es ist meine Komponente

import Vue from 'vue' 
import _ from 'lodash' 

export 
default { 

    props: { 
    model: { 
     default() { 
     return null 
     } 
    }, 
    showLeadInfo: { 
     default() { 
     return false 
     } 
    } 
    }, 

    data() { 
    return { 
     id: 'editor_' + _.random(10000, 99999) 
    } 
    }, 

    watch: { 
    model() { 
     if (this.model == null) 
     tinyMCE.activeEditor.setContent(''); 
    } 
    }, 

    ready() { 
    var vm = this; 
    tinyMCE.baseURL = "/vendor/tinymce/"; 
    tinymce.init({ 
     selector: "#" + vm.id, 
     theme: "modern", 
     height: 200, 
     plugins: [ 
     "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker", 
     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
     "save table contextmenu directionality emoticons template paste textcolor" 
     ], 
     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons", 
     style_formats: [{ 
     title: 'Bold text', 
     inline: 'b' 
     }, { 
     title: 'Red text', 
     inline: 'span', 
     styles: { 
      color: '#ff0000' 
     } 
     }, { 
     title: 'Red header', 
     block: 'h1', 
     styles: { 
      color: '#ff0000' 
     } 
     }, { 
     title: 'Example 1', 
     inline: 'span', 
     classes: 'example1' 
     }, { 
     title: 'Example 2', 
     inline: 'span', 
     classes: 'example2' 
     }, { 
     title: 'Table styles' 
     }, { 
     title: 'Table row 1', 
     selector: 'tr', 
     classes: 'tablerow1' 
     }], 
     setup: function(editor) { 
     editor.on('keyup', function(e) { 
      vm.model = editor.getContent(); 
     }); 
     } 
    }); 

    }, 

    events: { 
    updateTinyValue(value) { 
     tinyMCE.activeEditor.setContent(value); 
    } 
    } 

} 

HTML

<textarea :id="id" v-model="model" v-el:editor></textarea> 

PS: Es ist mit Vueify aus, so gibt es eine Vorlage und ein Skript-Tag ist, dass Code wickeln.

Mein größtes Problem ist, wenn ich versuche, mehrere Editoren instanziieren Ich kann nicht die richtige Komponente wegen dieses Codes tinyMCE.activeEditor.setContent(value) ... Ich habe versucht tinyMCE.get('#' + this.id).setContent(), aber es funktioniert nicht!

Jemand hat eine Ahnung?

Andere Sache ist über TinyMCE Plugins ... Ich benutze Bower + Gulp, um meine Vermögenswerte zu verwalten! Ich würde gerne alle Plugins auf meinem gulpfile ablegen (ich benutze Laravel 5) ... Momentan werden die TinyMCE Plugins einzeln geladen und es braucht viel Zeit!

Vielen Dank im Voraus!

Answer 1

Statt activeEditor der Verwendung können Sie getInstanceById verwenden:

tinyMCE.getInstanceById(this.id).setContent(value); 

bei der Dokumentation suchen, das die alte Version von TinyMCE sein könnte, könnte auch versuchen:

tinymce.editors[this.id].setContent(value); 

Auch diese Antwort Check-out, Das verwendet eine Vue-Direktive, um dies automatisch zu verwalten: VueJS and tinyMCE, custom directives. Dies ermöglicht Ihnen, einen tinyMCE-Editor einfach mit <textarea v-editor :body="body"></textarea> zu erstellen. Sie müssen es anpassen, aber Richtlinien sind der Weg, um dies weiter zu gehen.

Eine weiteres Beispiel Richtlinie: https://jsfiddle.net/edwindeveloper90/edjc82z0/

Answer 2

Sie vue-easy-tinymce als Komponente verwenden kann, ist dies ein einfaches und leistungsstarkes Paket für die einfache Nutzung von tinymce in Vue.js Projekt.

---

Oder einfach:

var yourComponent = { 

    props: { 
     id: {type: String, default: 'editor'}, 
     value: {default: ''} 
    }, 

    data: function() { 
     return { 
      objTinymce: null 
     } 
    }, 

    template: '<textarea :id="id" :value="value"></textarea>', 

    mounted: function() { 

     var component = this; 
     var initialOptions = { 
      target: this.$el, 
      init_instance_callback: function (editor) { 
       editor.on('Change KeyUp Undo Redo', function (e) { 
        component.value = editor.getContent(); 
       }); 
       component.objTinymce = editor; 
      } 
     }; 
     tinymce.init(initialOptions); 
    }, 

    watch: { 
     value: function (newValue, oldValue) { 
      var component = this; 
      if (component.value !== this.objTinymce.getContent()) 
       this.objTinymce.setContent(component.value); 
      else 
       component.$emit('input', newValue); 
     } 
    } 

};