VueJS + TinyMCE：TinyMCE 只显示一次

Question

请尝试代码片段。

我在 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>

Answer 1

尝试为您的文本区域提供相同的 class 并选择 class 作为选择器：

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

准备就绪

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

Answer 2

只需初始化一次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');
  }
}

link 至 updated jsfiddle

Answer 3

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

// 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

VueJS + TinyMCE：TinyMCE 只显示一次

VueJS + TinyMCE: TinyMCE is only displayed once

javascript

tinymce

vue.js