TinyMCE Vue2 and Inline Editing

Question

I'm trying to enable inline editing with TinyMCE and Vue.js 2.x

I have a very simple example that I cannot get to work. The "normal" editor works fine, so its not the installation of TinyMCE, but it appears to be my implementation.

Here is my code:

<template>
  <v-container fluid>
  <h2 class="tinymce-heading">An editor for every project</h2>
</v-container>
</template>

<script>
import { Vue2TinymceEditor } from "vue2-tinymce-editor";

export default {
  components: {
      Vue2TinymceEditor
  },
  data() {
    return {
    }
  },
}

tinymce.init({
  selector: '.tinymce-heading',
  menubar: false,
  inline: true,
  plugins: [
    'lists',
    'powerpaste',
    'autolink'
  ],
  toolbar: 'undo redo | bold italic underline',
  powerpaste_word_import: 'clean',
  powerpaste_html_import: 'clean',
})
</script>

<style scoped>
@import '../styles/global_styles.css';
</style>

And then my package.json

{
  "name": "fresh_credit_vue",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^5.4.3",
    "@shopify/app-bridge": "^3.4.3",
    "@shopify/app-bridge-utils": "^3.5.1",
    "@shopify/cli": "^3.48.1",
    "@shopify/theme": "^3.48.1",
    "actioncable-vue": "^2.5.1",
    "axios": "^0.24.0",
    "babel-preset-vue-app": "^2.0.0",
    "lodash": "^4.17.21",
    "qs": "^6.10.2",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.8",
    "vue-lodash": "^2.1.2",
    "vue-moment": "^4.1.0",
    "vue-router": "^3.5.3",
    "vue-template-compiler": "^2.6.14",
    "vue-the-mask": "^0.11.1",
    "vue2-tinymce-editor": "^0.0.1",
    "vuetify": "^2.6.2",
    "vuex": "^3.6.2",
    "vuex-persistedstate": "^4.1.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "~3"
  },
  "engines": {
    "node": "16.x"
  }
}

Where did I go astray?

Answer 1

I got it!! I moved the init to the mounted property and everything is working well now!

Nothing needed to be updated anywhere else.

<template>
  <v-container fluid>
  <h2 class="tinymce-heading">An editor for every project</h2>
</v-container>
</template>

<script>
import { Vue2TinymceEditor } from "vue2-tinymce-editor";

export default {
  components: {
      Vue2TinymceEditor
  },
  data() {
    return {
    }
  },
  mounted() {
    tinymce.init({
      selector: '.tinymce-heading',
      menubar: false,
      inline: true,
      plugins: [
        'lists',
        'powerpaste',
        'autolink'
      ],
      toolbar: 'undo redo | bold italic underline',
      powerpaste_word_import: 'clean',
      powerpaste_html_import: 'clean',
    })
  },
}
</script>

<style scoped>
@import '../styles/global_styles.css';
</style>