Vue2.x安装Tinymce依赖冲突解决

原创 已于 2025-03-21 13:53:42 修改 · 911 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本博客为博主个人原创文章，如若转载请附上本文出处链接和本声明。请勿未声明随意转载与恶意修改！
文章标签：

#vue.js #javascript #前端

于 2024-04-01 21:52:46 首次发布

Vue2.x安装Tinymce依赖冲突原因

  • 使用vue整合tinymce富文本编辑器，安装依赖时报错

在这里插入图片描述

  • 报错的原因是下载版本与vue的版本对不上
  • Vue2.x版本且Vue-cli 4.x应该使用如下指定版本依赖更合适
npm install --save @tinymce/tinymce-vue@^3.0.1
  • 额外依赖为
npm install --save tinymce@^5.1.0

  • 在使用tinymce富文本编辑器，页面没有显示编辑器的图标，而是显示！not found！

  • 或是查看控制台显示Uncaught SyntaxError: Unexpected token ‘<’

  • 解决办法：找到引入Editor

最低0.47元/天 解锁文章

200万优质内容无限畅学
vue2 中使用 Tinymce 富文本编辑器详解
前端探险家的博客
09-20 1487
有一些博主，安装推荐的是tinymce@5.1.0，最后会遇到报错，import “tinymce/icons/default” 路径找不到，故需要升级tinymce版本，所以我这里直接安装的是tinymce@5.10.9；在node_modules中tinymce依赖包，找到其下面的skins文件下，直接复制，粘贴到src/assets/tinymce目录下；查询资料的时候遇到一篇文章，是一些扩展插件，可用可不用，了解一下就行，文章里有详细的插件介绍，安装命令和使用方法；想了解的可以自己查看；
Vue 3.x 集成tinymce 5.x富文本编辑器
cblstc的博客
11-18 2117
文章目录前言步骤如何自定义插件？IE浏览器编辑器加载慢的问题Uncaught SyntaxError: Unexpected token <问题 前言 以前用过百度编辑器，一把辛酸泪，各种坑+长期无人维护。于是新项目用上了号称世界第一的tinymce. 去官网溜达一圈后，果断放弃，一是访问速度慢，二是文档不友好。参考了很多博主的文章，总算是集成成功。 步骤 安装tinymce npm i...
vue引用tinymce时，报错UncaughtSyntaxError:Unexpected token
weixin_45016440的博客
08-20 1285
这是由于tinymce没有正确解析所致，在安装tinymce后，将node_modules目录下的tinymce内容复制到static文件夹下，然后在引用tinymce地方根据报错位置引用配置项文件，如果是plugins.js报错，将tinymce.init中plugins对应的文件引用上。如果引用文件配置完成后，没有报错，但是不显示内容，查看一下是不是样式没有正确引用进来，如果是，在js中引用对应的样式文件。
Vue 项目中引入 tinymce 富文本编辑器
lovethewind_1的博客
07-30 976
官网文档链接：这里采用vue2的版本。
TinyMce富文本编辑器使用【详细】
TeroZhang的博客
11-10 2725
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
终端运行npm install @tinymce/tinymce-vue -S报错的解决办法
默然相爱鱼鱼鱼的博客
09-16 1906
我的是2.0版本，此时我输入第一条命令就能成功的安装。用vue整合tinymce富文本编辑器，报错。报错的原因是下载版本与vue的版本对不上。更详细的在官网里写有，点击。vue2.0版本应该使用。vue3.0版本应该使用。
PS D:\桌面\开发项目\审计微信服务号项目\管理平台\qiya-ui> npm install @tinymce/tinymce-vue highlight.js quill tinymce --save npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: qiya@3.6.6 npm ERR! Found: vue@2.6.14 npm ERR! node_modules/vue npm ERR! vue@"2.6.14" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^3.0.0" from @tinymce/tinymce-vue@6.3.0 npm ERR! node_modules/@tinymce/tinymce-vue npm ERR! @tinymce/tinymce-vue@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\dell\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\dell\AppData\Local\npm-cache\_logs\2025-08-20T08_48_06_856Z-debug-0.log PS D:\桌面\开发项目\审计微信服务号项目\管理平台\qiya-ui>
最新发布
08-21
我们面临的核心问题是：在Vue 2.6.14项目中安装@tinymce/tinymce-vue时出现依赖冲突，因为最新版本的@tinymce/tinymce-vue（5.x）需要Vue 3，而我们的项目是Vue 2。 根据引用[1]和引用[3]的信息，我们可以知道： - ...
适用于Vue和HTML5的TinyMCE附件上传插件功能介绍
通常插件的安装会包含在TinyMCE编辑器的配置过程中，开发者需要按照插件提供的文档或示例代码进行操作。具体可能包括引入插件的JavaScript和CSS文件、配置编辑器的初始化参数以及可能需要的后端处理逻辑。 9. 插件...
vue2 使用 tinymce富文本编辑器
03-19
> 注意：Vue2需使用兼容版本，`@tinymce/tinymce-vue@3.x`为Vue2适配版本[^4]。 --- #### 2. 创建 TinyMCE 组件 在 `components/tinymce/index.vue` 中定义组件： ```vue <div class="tinymce-container"> v-...
Tinymce vue2 dialog 不显示
04-03
在 Vue2 中集成 TinyMCE 并处理对话框无法正常显示的问题，通常涉及以下几个方面： #### 1. **Vue 组件初始化** 确保 `tinymce` 和其对应的 Vue 插件已正确安装并配置。可以使用官方推荐的 `@tinymce/tinymce-vue` ...
tinymce-vue：TinyMCE Vue官方组件
02-06
TinyMCE Vue官方组件 关于 该软件包是的薄包装，可以更轻松地在Vue应用程序中使用。 如果您需要有关TinyMCE的详细文档，请参阅： 。 有关TinyMCE Vue快速入门，请参阅： 。 有关TinyMCE Vue技术参考，请参阅： 。 支持 版本4.0旨在支持Vue3。对于Vue 2.x及以下版本，请使用包装的早期版本。 问题 您是否发现了tinymce-vue或有功能要求？ 打开一个，让我们知道或提交。 注意：有关TinyMCE的问题，请访问。
vue 2.0项目中使用tinymce富文本框遇到的问题
nanupup的博客
06-24 1042
富文本编辑器tinymce
Vue 富文本编辑器tinymce的安装教程（前端必备小知识）
热门推荐
qq_63299825的博客
06-07 1万+
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强，但绝对能够满足大部分网站的需求，并且功能配置灵活简单。另一特点是加载速度非常快，如果你的服务器采用的脚本语言是PHP，那还可以进一步优化。最重要的是，TinyMCE是一个根据LGPL license发布的自由软件，你可以把它用于商业应用。
ant design vue2.X 使用tinymce
alan_ji198573的专栏
02-25 576
ant design vue2.X 使用tinymce
tinyMCE-vue使用遇到的问题
weixin_45924425的博客
01-06 3604
tinymce 使用 的小问题
vue引入tinymce被拦截
qq_39572257的博客
10-31 1315
vue使用TinyMCE是unpkg.com被拦截
TinyMce富文本编辑器 针对Vue2
qq_36770411的博客
10-26 952
针对Vue2 安装超文本插件TinyMce 包括封装TInyMce 后续会更新对TinyMce得配置内容
关于npm install @tinymce/tinymce-vue -S报错的解决办法
weixin_44967580的博客
03-31 8972
报错如图： 当我们想使用vue封装tinymce富文本编辑器时，cmd输入 npm install @tinymce/tinymce-vue -S报错： 报错原因： 报错的原因是下载版本与vue的版本对不上 vue2.0版本应该使用 npm install --save "@tinymce/tinymce-vue@^3" vue3.0版本应该使用 npm install --save "@tinymce/tinymce-vue@^4" 我的是2.0版本，此时我输入第一条命令就能成功的安装 更详细的在
vue中引用tinymce图标不显示解决方法
一片天空
07-29 4745
vue中引用tinymce图标不显示解决方法 通过官网查到一篇博客，按照上面步骤可以实现tinymce富文本编辑器的封装和使用。https://www.cnblogs.com/zhongchao666/p/11142537.html在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面（vue） 在node_modules里面找到tinymce,将skins目录复制到static/tinymce里面（nuxt） 由于公司需要使用nuxt.js，再次使.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

【无痕干货营】

如果帮助到您，欢迎打赏一下我

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值