Cacher is the code snippet organizer for pro developers

<!-- https://jsfiddle.net/edjc82z0/342/ -->

<div id="app">
    <textarea v-tinymce-editor="content"></textarea>
    <textarea v-tinymce-editor="content2"></textarea>
    {{content}}
    {{content2}}
</div>

<script>
    $(function() {
        // tinymce directive
        Vue.directive('tinymce-editor', {
            twoWay: true,
            bind: function (el, binding, vnode) {
                var self = this;
                tinymce.init({
                    target: el,
                    setup: function(editor) {
                        // init tinymce
                        editor.on('init', function() {
                            tinymce.activeEditor.setContent(binding.value);
                        });
                        // when typing keyup event
                        editor.on('keyup', function() {
                            // get new value
                            var new_value = tinymce.activeEditor.getContent(self.value);
                            // set model value
                            Vue.set(vnode.context, binding.expression, new_value);
                        });
                    }
                });
            },
            update: function(el, binding, vnode) {
                if (tinymce.get(el.id)) {
                    tinymce.get(el.id).setContent(binding.value);
                }
            },
            // update: function(newVal, oldVal) {
            //     // set val and trigger event
            //     $(this.el).val(newVal).trigger('keyup');
            // }
        });
        new Vue({
            el: '#app',
            data: {
                content: 'a1',
                content2: 'b2'
            }
        });
    });
</script>