VueJS + TinyMCE: TinyMCE只显示一次

Question

请试一下代码片段。

我在Vue路由器中有很多组件，每个组件都有自己的TinyMCE编辑器来编辑内容。但是，只为第一个加载路由器显示TinyMCE。控制台中有一个错误：Permission denied to access property "document"，只有当我将TinyMCE和Vue一起使用时，才会发生这种错误，我不知道这是否是问题的原因。

如果有人有解决办法，我就当学徒！

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

​

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

尝试将文本区域设置为相同的类，并选择该类作为选择器：

<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的就绪事件和beforeDestroy事件在每次初始化时重新加载编辑器

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

链接到更新的小提琴

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的完整来源