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插件......我正在使用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。这允许您使用<textarea v-editor :body="body"></textarea>简单地创建一个tinyMCE编辑器。你需要对它进行调整，但指令是继续这样做的。

另一个示例指令：https://jsfiddle.net/edwindeveloper90/edjc82z0/

Answer 2

您可以使用vue-easy-tinymce作为组件，这是一个简单而强大的软件包，可以在 Vue.js 项目中轻松使用 tinymce 。

或者简单地说：

My Name is khan

TinyMCE和Vuejs作为一个组件

2 个答案: