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