VueJS + TinyMCE：TinyMCE只显示一次

Question

请尝试使用代码片段。

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

如果有人有解决方案我appriciate！

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

var Foo = Vue.extend({ 
 
    template: '#foo', 
 
    \t 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', 
 
    \t 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

Intialize tinyMCE的只有一次，你可以在你的应用程序的开始

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

使用准备和beforeDestroy Vue公司的事件重新加载在每个初始化编辑

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

链接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