Vue: VueJS makes TinyMCE text disappeared unexpectedly even though there is no data binding

[viettranme]

Version

2.2.6

Reproduction link

https://jsfiddle.net/78hqbj8f/

Steps to reproduce

Just run the code at https://jsfiddle.net/78hqbj8f/

What is expected?

If there's no Vue data binding to an element Vue should keep that element as it is.

What is actually happening?

VueJS has made TinyMCE text disappeared and the editor becomes uneditable even though there's no data binding to the textarea/editor.

[posva]

This is expected behaviour because Vue manipulates the dom, you need to integrate this kind of plugins as components. You can use this: https://github.com/j6montoya/vue-tinymce

[viettranme]

Thanks @posva.

I know that Vue manipulates the dom and I also know about that vue-tinymce component.

But are you sure that this is expected behaviour of VueJS?

This is just a problem with the tinymce editor. How can I know if there're not other similar side effects?

[LinusBorg]

But are you sure that this is expected behaviour of VueJS?

Vue replaces the DOM in #main when mounting - if other Javascript libs rely on that DOM., this can lead to all sorts of unexpected behaviour, depending on the lib in question.

That's why you should iniit tinymce after Vue, and preferably from a Vue lifecycle hook like mounted()