Hung Tran Hung Tran - 5 months ago 56
Javascript Question

VueJS + TinyMCE: TinyMCE is only displayed once

Please try the code snippet.

I have many components in Vue Router, every component has its own TinyMCE editor to edit content. However, TinyMCE is only displayed for the first loaded router. There is an error in the console:

Permission denied to access property "document"
which only occurs when I use TinyMCE and Vue together, I don't know if it is the reason of my problem.

I appriciate if anyone has a solution!

I have another version of this problem at jsfillde: http://jsfiddle.net/tranduyhung/NF2jz/5105/ . I don't get the error
Permission denied to access property "document"
at 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

Try giving your textareas the same class and choose that class as selector:

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

On ready use

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