TinyMCE 和 Vuejs 作为组件 [英] TinyMCE and Vuejs as a component

查看：30
本文介绍了TinyMCE 和 Vuejs 作为组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试为 TinyMCE 制作一个 Vue 组件，但我面临一些我无法解决的问题！有谁能够帮助我?或者建议更好的步行方式?

I am trying to make a Vue Component for TinyMCE but I am facing some problems that I can not solve! Can anybody help me? Or maybe advise a better way to walk?

有我的组件

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 组成的，因此有一个模板和一个包装该代码的脚本标签.

PS: It is made up with Vueify so there is a template and a script tag wrapping that code.

我最大的问题是当我尝试实例化多个编辑器时，我无法清除正确的组件，因为此代码 tinyMCE.activeEditor.setContent(value)...我已经尝试过 tinyMCE.get('#' + this.id).setContent() 但它不起作用！

My biggest problem is when I try to instantiate multiple editors I cant clear the right component because of this code tinyMCE.activeEditor.setContent(value)... I've have tried tinyMCE.get('#' + this.id).setContent() but it does not work!

有人知道吗?

另一件事是关于 ja TinyMCE 插件...我使用 Bower + Gulp 来管理我的资产！我想把所有的插件都放到我的gulpfile里(我用的是Laravel 5)……现在TinyMCE的插件都一个一个加载了，好费时间！

Other thing is about ja TinyMCE Plugins... I am using Bower + Gulp to manage my assets! I would like to put all the plugins on my gulpfile (I am using Laravel 5)... Right now the TinyMCE plugins are been loaded one by one and it takes a lot of time!

提前致谢！

推荐答案

你可以使用 getInstanceById 代替 activeEditor:

Instead of using activeEditor you can use getInstanceById:

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

查看可能是tinyMCE旧版本的文档，也可以尝试:

Looking at the docs that might be the old version of tinyMCE, might also try:

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

另请查看这个答案，它使用 Vue 指令自动管理:VueJS 和 tinyMCE, 自定义指令.这允许您简单地使用