VueJS + TinyMCE：TinyMCE 只显示一次答案

【问题标题】：VueJS + TinyMCE: TinyMCE is only displayed onceVueJS + TinyMCE：TinyMCE 只显示一次
【发布时间】：2015-12-03 06:23:09
【问题描述】：

请尝试使用代码 sn-p。

我在 Vue Router 中有很多组件，每个组件都有自己的 TinyMCE 编辑器来编辑内容。但是，TinyMCE 仅显示在第一个加载的路由器上。控制台报错：Permission denied to access property "document" 只有在我同时使用 TinyMCE 和 Vue 时才会出现，不知道是不是我的问题的原因。

如果有人有解决方案，我很感激！

我在 jsfillde 有这个问题的另一个版本：http://jsfiddle.net/tranduyhung/NF2jz/5105/。我在 jsfiddle 没有收到错误 Permission denied to access property "document"。

var Foo = Vue.extend({
    template: '#foo',
  	ready: function() {
      // This doesn't help
      //tinyMCE.remove()

      tinyMCE.init({selector: "#tinymcefoo"})

      // This is not working
      //tinyMCE.execCommand('mceAddControl', false, '#tinymcefoo');
      //tinyMCE.execCommand('mceAddEditor', false, '#tinymcefoo');
    }
})

var Bar = Vue.extend({
    template: '#bar',
  	ready: function() {
      // This doesn't help
      //tinyMCE.remove()

      tinyMCE.init({selector: "#tinymcebar"})

      // This is not working
      //tinyMCE.execCommand('mceAddControl', false, '#tinymcefoo');
      //tinyMCE.execCommand('mceAddEditor', false, '#tinymcefoo');
    }
})

var App = Vue.extend({})
var router = new VueRouter()

router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

router.redirect({
  '*': '/foo'
})

router.start(App, '#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.7/vue-router.min.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>


<div id="app">
  <p>Menu: <a v-link="{ path: '/foo' }">Working</a> | <a v-link="{ path: '/bar' }">Not working</a></p>
  <hr>
  <router-view></router-view>
  
<script type="text/x-template" id="foo">
  <p>Working</p>
  <textarea id="tinymcefoo"></textarea>
</script>

<script type="text/x-template" id="bar">
  <p>Not working</p>
  <textarea id="tinymcebar"></textarea>
</script>
</div>

【问题讨论】：

标签： javascript tinymce vue.js

【解决方案1】：

只需初始化一次 tinyMCE，您可以在应用程序开始时进行

tinceMCE.init({
  mode: 'none'
});

使用 Vue 的 ready 和 beforeDestroy 事件在每次初始化时重新加载编辑器

var Foo = Vue.extend({
  // ...
  ready: function() {
    tinyMCE.execCommand('mceAddEditor', true, 'tinymcebar'); // id without '#'
  },
  beforeDestroy: function() {
    tinyMCE.execCommand('mceRemoveEditor', true, 'tinymcebar');
  }
}

链接到updated jsfiddle

【讨论】：

这行得通，但我怎样才能以这种方式为 TinyMCE 添加配置？（例如添加或删除 tinymce 插件）
@Robert 我以前用过，你能找到办法吗？

【解决方案2】：

是的，我找到了这样的解决方案：

// load tinymce placeholder plugin from from local static file
tinymce.PluginManager.load('placeholder', '/static/js/tinymce/plugins/tinymce-placeholder.plugin.js');

这是我的 TinyMceComponent 的完整源代码： https://github.com/Doogiemuc/liquido-vue-frontend/blob/master/src/components/TinyMceComponent.vue

【讨论】：

【解决方案3】：

尝试为您的 textareas 提供相同的类并选择该类作为选择器：

<textarea id="tinymcefoo" class="my_editor"></textarea>
<textarea id="tinymcebar" class="my_editor"></textarea>

准备使用

tinyMCE.init({selector: ".my_editor"});

【讨论】：