TinyMCE Vue2 和内联编辑

Question

我正在尝试使用 TinyMCE 和 Vue.js 2.x 启用内联编辑

我有一个非常简单的例子，我无法开始工作。 “普通”编辑器工作正常，所以它不是 TinyMCE 的安装，但它似乎是我的实现。

这是我的代码：

<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>

然后是我的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"
  }
}

我哪里误入歧途了？

Answer 1

我明白了！！我将

init

移至

mounted

属性，现在一切正常！

其他任何地方都不需要更新。

<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>