How to Emit an Event from TinyMCE Component to Parent?

Question

I'm using Vue 2.0. TinyMCE version:

"tinymce": "^6.6.2",
"@tinymce/tinymce-vue": "^3.2.8"

I have created a custom component which is a tinyMCE text editor. It looks like this:

<template>
  <Editor
    :init="init"
    @change="emit()" --- Doesn't work at all
  />
</template>
<script>
import Editor from '@tinymce/tinymce-vue';
import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
import 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/icons/default';
import 'tinymce/skins/ui/oxide/skin.css';
import 'tinymce/models/dom';

export default {
  components: { Editor },
  emits: ['value'],
  data: () => ({
    init: {
    //   setup: (editor) => {
    //     editor.on('input', () => {
    //       this.$emit('something', payload) --- this is undefined, but works at input
    //     });
    //   },
      skin: false,
      plugins: ['wordcount'],
      content_css: false,
      content_style: contentUiCss.toString(),
      promotion: false,
    },
  }),
  methods: {
    emit() {
      console.log('test');
    },
  },
};
</script>

I want to react to change event and emit results to the parent component. The commented out section works, but I'm unable to reference 'this' so i can't use this.$emit('smth', payload) and i think i need to use directives. The problem is, directives like @change don't work.

Why? Does anybody have an idea? Thank you for help.

How to Emit an Event from TinyMCE Component to Parent?

0 Answers0