TinyMCE и Vuejs как компонент

Question

Я пытаюсь создать компонент Vue для TinyMCE, но у меня есть некоторые проблемы, которые я не могу решить! Кто-нибудь может мне помочь? Или, может быть, посоветуйте лучший способ прогулок?

Существует мой компонент

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 ... Я использую Bower + Gulp для управления своими активами! Я хотел бы поместить все плагины в свой gulpfile (я использую Laravel 5) ... Прямо сейчас плагины TinyMCE загружаются один за другим, и это занимает много времени!

Заранее благодарен!

Answer 1

Вместо использования activeEditor вы можете использовать getInstanceById:

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

Глядя на документы, которые могли бы быть старая версия TinyMCE, может также попробовать:

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

Также проверить этот ответ, который использует директиву Vue для управления этим автоматически: VueJS and tinyMCE, custom directives. Это позволяет сделать редактор tinyMCE просто с <textarea v-editor :body="body"></textarea>. Вам нужно будет адаптировать его, но но директивы - это путь к этому.

Другой пример директивы: https://jsfiddle.net/edwindeveloper90/edjc82z0/

Answer 2

Вы можете использовать vue-easy-tinymce как компонент, это простой и мощный пакет для легкого использования TinyMCE в Vue.js проекта.

---

Или просто:

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

};