Vue2中TinyMCE行内编辑无法实现，请求排查问题原因

你的代码存在几个关键问题，导致TinyMCE行内编辑无法正常生效：

1. 初始化时机错误 #

你直接在<script>全局作用域执行tinymce.init()，此时Vue组件还未完成挂载，DOM中的.tinymce-heading元素尚未生成，TinyMCE找不到目标元素，自然无法完成初始化。

2. 冗余组件引入（未实际使用） #

你导入了Vue2TinymceEditor组件，但模板里完全没用到它，这部分代码属于冗余内容，要么移除，要么调整为组件方式实现行内编辑。

修复方案 #

方案一：调整初始化时机（原生TinyMCE方式） #

将tinymce.init()移到Vue组件的mounted钩子中，确保DOM渲染完成后再初始化编辑器，同时在组件销毁时清理实例避免内存泄漏：

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

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    // 组件挂载后初始化TinyMCE
    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',
    })
  },
  beforeDestroy() {
    // 组件销毁时移除TinyMCE实例
    tinymce.remove('.tinymce-heading')
  }
}
</script>

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

方案二：使用组件方式实现行内编辑 #

如果你想通过vue2-tinymce-editor组件实现，需要在模板中直接使用组件并配置inline属性：

<template>
  <v-container fluid>
    <Vue2TinymceEditor 
      v-model="editorContent"
      :init="{
        menubar: false,
        inline: true,
        plugins: ['lists', 'powerpaste', 'autolink'],
        toolbar: 'undo redo | bold italic underline',
        powerpaste_word_import: 'clean',
        powerpaste_html_import: 'clean',
      }"
    />
  </v-container>
</template>

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

export default {
  components: {
      Vue2TinymceEditor
  },
  data() {
    return {
      editorContent: 'An editor for every project'
    }
  },
}
</script>

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

额外注意：Turbolinks适配 #

你的项目引入了Turbolinks，页面切换时可能需要监听turbolinks:load事件确保编辑器能重新初始化：

mounted() {
  const initTinymce = () => {
    tinymce.init({
      // 你的配置项
    })
  }

  // 监听Turbolinks加载事件
  document.addEventListener('turbolinks:load', initTinymce)
  
  // 组件销毁时移除监听和编辑器实例
  this.$once('hook:beforeDestroy', () => {
    document.removeEventListener('turbolinks:load', initTinymce)
    tinymce.remove('.tinymce-heading')
  })
}

内容的提问来源于stack exchange，提问作者ToddT