6

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 つずつロードされており、多くの時間がかかります!

前もって感謝します！

4

2 に答える 2

2

コンポーネントとしてvue-easy-tinymceを使用できます。これは、Vue.jsプロジェクトで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);
        }
    }

};
于 2018-01-19T16:09:06.913 に答える