Nuxt.js集成TinyMCE编辑器遇版本不匹配等问题求解决方案

开发者阿泽

2026-8-17

问题解决：Nuxt.js 2.15.7 集成 TinyMCE 编辑器的版本冲突问题

问题概述

初始报错：Cannot find module '@tinymce/tinymce-vue'
安装@tinymce/tinymce-vue@5.0.0后触发Nuxt致命错误：Vue包版本不匹配（vue@3.2.40与vue-server-renderer@2.6.14版本不一致）

核心原因

Nuxt.js 2.15.7 依赖Vue 2.x，而你安装的@tinymce/tinymce-vue@5.0.0是适配Vue 3的版本，它会自动引入Vue 3，导致项目中同时存在两个版本的Vue，引发冲突。

解决步骤

1. 卸载不兼容的TinyMCE Vue组件

执行命令移除Vue 3版本的包：

npm uninstall @tinymce/tinymce-vue

2. 安装适配Vue 2的版本

选择@tinymce/tinymce-vue的4.x版本（专为Vue 2设计）：

npm install @tinymce/tinymce-vue@4

3. 沿用现有组件代码

你的组件代码完全兼容4.x版本，无需修改：

<template>
   <div id="app">
     <editor
       api-key="no-api-key"
       :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | help'
       }"
     />
   </div>
</template>

<script>
 import Editor from '@tinymce/tinymce-vue'

 export default {
   name: 'app',
   components: {
     'editor': Editor
   }
 }
</script>