TinyMCE with Vue 3 configuration

I'm trying to use tinyMCE in VueJS. In numerous examples I'm seeing tinymce.init() being used within script tags:

<script>
  tinymce.init({
    selector: '#myTextarea',
    setup: function (editor) {
      editor.on('init', function (e) {
        editor.setContent('<p>Hello world!</p>');
      });
    }
  });
</script>

However, when I look at the TinyMCE Vue Integration documents, I see init being done directly in the HTML:

<div>
<editor
   id="editor"
   api-key="no-api-key"
   :init="{
      height: 500,
      plugins: [
         ...
      ],
      toolbar: '...'
  }"
/>
</div>

The WYSIWYG initializes properly for me with init being done in the HTML section, but there are numerous instances where a function needs to go within init (see first code block) to load initial content, or deal with image uploads etc. This doesn't work with init being done within the <editor/> tag.

In VueJS with init being done within the <editor/> tag, how can I add the 'setup' function seen in the first codeblock?

TinyMCE with Vue 3 configuration

0 Answers