TinyMCEとVuejsをコンポーネントとして

Question

TinyMCEのVueコンポーネントを作成しようとしていますが、解決できない問題があります。誰か助けてくれますか？ を歩くより良い方法を教えてください。

は私のコンポーネント

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：テンプレートとそのコードをラップするスクリプトタグがあるので、それはVueifyで構成されています。

私の最大の問題は、複数のエディタをインスタンス化しようとすると、このコードのために正しいコンポーネントをクリアできないということです。tinyMCE.activeEditor.setContent(value) ...私は試しましたtinyMCE.get('#' + this.id).setContent()しかし、それは動作しません！

誰か手掛かりがありますか？

その他のことはja TinyMCE Pluginsについてです...私は資産を管理するためにBower + Gulpを使用しています！すべてのプラグインをgulpfileに入れたいです（私はLaravel 5を使用しています）...今はTinyMCEプラグインが1つずつロードされており、時間がかかります！

ありがとうございます！

Answer 1

代わりのactiveEditorを使用して、あなたがgetInstanceByIdを使用することができます：TinyMCEの古いバージョンであるかもしれないドキュメントを見てみると

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

、また試してみてください：

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

はまた、この答えをチェックアウトVueディレクティブを使ってこれを自動的に管理します：VueJS and tinyMCE, custom directives。これにより、<textarea v-editor :body="body"></textarea>で簡単にtinyMCEエディタを作成することができます。あなたはそれに適応する必要がありますが、指示はこれを行う方法です。

別の例ディレクティブ：https://jsfiddle.net/edwindeveloper90/edjc82z0/

Answer 2

あなたは、これはTinyMCEをでVue.jsプロジェクトの容易な使用のためのシンプルかつ強力なパッケージで、コンポーネントとしてvue-easy-tinymceを使用することができます。

---

それとも単に：

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); 
     } 
    } 

};