Run TinyMCE with Vue

Try this

    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/modern/theme'

    Vue.directive('tinymce', {
        bind(el) {
            tinymce.init({
              target: el, // The element the directive is bound to. See here https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments
              theme: 'modern',
              skin_url: '/css/tinymce/skins/lightgray' // point your tinymce skin directory here
          })
        }
    })

@viktorivanov I tried your approach but get this error now in console: TypeError: Cannot read property 'setAttribute' of undefined

@matthiascw this sounds like your textarea element is not available... Please double check you're passing target: el where el comes from bind(el)

Here I've made a quick fiddle so you can see how it works

So if I am right I need to do this:

new Vue({
  el: '#tinymce'
})

And then append this id to my <textarea id="tinymce"></textarea>?

Because now I have

new Vue({
  el: '#app'
})

And the el in the tinymce directive is referencing to app then? Or am I totally wrong?

Here I've made a quick fiddle so you can see how it works

I don't get what I did wrong I have the exact same as in your fiddle.

In my component.vue

<textarea v-tinymce class="form-control" rows="6" placeholder="Text" name="body" v-model="body"></textarea>

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'

  Vue.directive('tinymce', {
    bind(el) {
      tinymce.init({
        target: el, // The element the directive is bound to. See here https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments
        theme: 'modern',
        skin_url: '/css/tinymce/skins/lightgray' // point your tinymce skin directory here
      })
    }
  });

In my app.js

const app = new Vue({
  el: '#app'
});

Still getting the app.js:92527 TypeError: Cannot read property 'setAttribute' of undefined error.

Please make a fiddle or codepen to make the debugging more easy...

p.s. I'm also noticing you've putted v-model on the textarea which will make the syncing of the value between tinymce and the v-model not so straightforward... 'cause tinymce doesn't update the value of the textarea on every keystroke, so for that reason you would have to use its API and passing that value to the v-model would require additional work also...