记录下Tinymce富文本插件遇到的问题

已于 2023-03-20 16:31:12 修改
阅读量902 收藏 1
点赞数
文章标签： react.js 前端
于 2023-03-20 16:31:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BlakeSteele/article/details/129667905
版权
在React项目中，由于兼容性问题，作者从Brief Editor转向了Tinymce。然而，在使用Tinymce时遇到了在Electron打包后因缺失referer头导致的错误。通过将Tinymce本地化解决了此问题。文章详细介绍了如何在React+Umi项目中安装本地依赖、下载Tinymce并引入到项目中，以及在document.ejs中引用，确保Tinymce从本地加载。
摘要由CSDN通过智能技术生成

在邮件系统中使用到了富文本框，之前用的时Breaf Editor，但是兼容性不是太好，邮件转发时，会有源码的显示bug，后面换成了Tinymce，使用时也是会有很多问题，记录下解决的方法，供大家参考

 正式环境报错：We’re unable to check your domain because the referer header is missing.

 官方解释：Cloud Troubleshooting | TinyMCE Documentation

 大概的问题就是tinymce向 cloud发起请求时 ，出现了问题。浏览器不存在这个问题，而如果使用Electron将项目打包成APP时，就会出现此问题。虽然项目中已经在node_module中引入了本地包，但是Tinymce还是会从云端请求数据，所以可以将Tinymce本地化来解决这个问题。

现在的项目 使用了 react+ umi框架

1、安装本地依赖 

npm install &

最低0.47元/天 解锁文章
BlakeSteele
关注
tinymce 编辑器踩坑之旅----------自定义插件
weixin_44191425的博客
10-21 4427
先贴个官网地址 https://www.tiny.cloud/docs/ 最近开发项目中产品有很多需求，比如说在编辑器里面html代码，本来一开始用的是vue集成的那个编辑器，然后就发现，不能显示table！！！！样式 无奈之下找了找好像tinymce这个编辑器可以满足，但是在此之前没用过，所以去通读了一边官方网址，了解了一些基本东西。 然后开干 最开始么肯定是先安装一下插件 npm install tinymce/tinymce-vue --save npm install tinymce --s
vue中引入TinyMCE实现富文本编辑器
小球的博客
02-28 3618
vue tinymce 富文本编辑器
tinymce富文本编辑器使用遇到问题记录
qq_43409827的博客
09-19 398
卸载重现安装tinymce版本为。
vue 2.0项目中使用tinymce富文本框遇到的问题
Charonmomo的博客
02-10 6489
安装Tinymce 现在tinymce-vue最新版本是4.0，用的vue3.0的了，所以搭建的vue2.0项目要使用之前的版本 ( 安装指定版本 ). 首先安装tinymce的vue组件，因为没有注册服务: npm install @tinymce/tinymce-vue@2.0.0 -S 接着安装tinymce: npm install tinymce@5.0.3 -S 当然也可以安装其他版本的. 我的vue2.0项目一开始直接使用以下命令安装最新版的tinymce, 然后报错了. 如果是vue3
TinyMce使用问题记录
long的博客
06-04 3002
TinyMce 5.2.0使用问题记录。无法通过本地上传的方式上传视频，编辑器里的视频无法播放，编辑器的超链接点击无效
jeecgboot vue3打包以后富文本框tinymce不显示
weixin_44934104的博客
04-17 1156
skins文件夹：node_modules/tinymce中找到skins文件夹，也复制到public/tinymce里。本人并不熟悉前端，遇到了问题基本靠百度，用此博客用来记录一下，如果有什么疑问或者有更好的解决方式请问评论区留言~打包到服务器以后，富文本框不会展示，搞了好久才搞出来，不确定是方法1还是方法2起效了，记录一下吧。2、打包的dist文件夹中，加入static文件夹，放入1中整理的tinymce文件夹。第一种方法：在public文件夹下放置tinymce文件夹，加入文件。
富文本编辑器Tinymce vue3项目使用以及遇到的问题
最新发布
HL0512的博客
05-11 1698
富文本编辑器Tinymce的使用以及使用过程中遇到的问题
MVC+API 实现tinymce富文本编辑器上传图片、上传视频
growb的博客
05-09 846
首先是要下载一个版本，这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的，但都会报错，我也没搞清楚原因，你们可以自己去试试，我的这个里面是已经包括中文包以及多图片上传需要的插件axupimgs 我这里是放到项目的Content里面的Scripts里面 首先是引用插件和中文包 <script src="~/Content/Scripts/tinymce/js/tinymce/tinymce.min.js"&gt
Tinymce富文本图片的插入
m0_47408822的博客
07-23 2318
在开发当中我们不可避免的会使用到富文本编辑器 富文本编辑器插件又是很多 小编经过尝试感觉Tinymce还是不错的 在使用中遇到啦关于图片插入的问题 这里就记录一下 希望能帮到有需要的小伙伴 在Tinymce的配置项中 插入images_upload_handler 这个配置项是针对用户对图片自定义处理的 我们可以自己写一个函数 images_upload_handler: (blobInfo, succFun, failFun) => { //前台读取文件
使用富文本编辑器TinyMCE+react踩坑
baishichuo1186的博客
08-16 1434
使用富文本编辑器TinyMCE+react踩坑 <Editor inline={false} initialValue={newsStore.content} onChange = {(value) => { /*this.props.newsStore.setEditFieldContents(value.level.content)...
vue3使用tinymce富文本编辑器出现的问题
queen_rain的博客
02-22 2499
vue3中使用tinymce富文本编辑器遇到的坑
使用tinyMCE富文本过程中，上传较大的图片，生成base64位后，post到后台字符串过大导致无法访问接口
shakspers的博客
03-24 3757
参考文章：https://blog.csdn.net/u013810234/article/details/81136416
vue中使用tinymce界面出现乱码notound
我心坚持
08-10 924
因为没有引入默认图标， 在tinymce组件中引入： import 'tinymce/icons/default/icons.min.js'
简单使用 tinymce
dazhongliu666的博客
03-31 1548
第一次使用 tinymce，遇到的坑却不少。 首先官网下载 tinymce ，开发版和社区版都可以。 附上下载链接： https://www.tiny.cloud/get-tiny/self-hosted/ 现在简单 html 文件中上上手，完整代码如下： <!DOCTYPE html> <html> <head> <script src="./tinymce.js"></script> <script> tinymce
Element-UI中调用tinymce6实现本地化加载，并解决提示：This domain is not registered with TinyMCE Cloud，省去api-key
暂时先用这个名字
02-01 8498
最新的tinymce会提示”This domain is not registered with TinyMCE Cloud“，意思就是要求注册tinymce官方云才能下载所需组件类库。既然这样，那么解决办法就简单了，要么去注册云，要么屏蔽掉提示~~，要么全部由本地加载。网上大部分文章都没有细化其实现，希望本文看完你就能完全领会tinymce6的开发了。
TinyMCE富文本编辑器的使用
weixin_38673922的博客
03-28 1905
一、引入TinyMCE 1、获取自己的API密钥 地址 2、下载tinymce.min.js到本地 地址 3、下载汉化js zh_CN.js 放到 langs目录下 汉化包下载 4、引入 <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=官方申请的API_KEY"></script&g...
VM2655:1 Uncaught SyntaxError: Unexpected end of JSON input错误分析解决
weixin_42279822的博客
04-12 7870
这种错误可能是由于后台返回的 JSON 数据不完整，例如在传输过程中发生了中断或截断，导致前端接收到了不完整的 JSON 数据。解决方法通常是确保后台在传输 JSON 数据时完整地发送所有数据，并且前端在接收 JSON 数据时进行错误处理，以确保接收到的数据是有效的 JSON 格式。前端错误处理：在前端接收 JSON 数据时，进行错误处理，包括检查接收到的数据是否为空或不完整。后台传输 JSON 数据时确保完整性：确保后台在传输 JSON 数据时，将所有数据完整地发送到前端。符号和对应的结束符号。
使用tinymce富文本编辑器部署到环境报错：/js/skins/ui/oxide/content.min.css net::ERR_ABORTED 404 (Not Found)
migexiaoliang的博客
09-20 4920
在本地调试的时候不会报错，但是部署到环境后报以下错误： /js/skins/ui/oxide/skin.min.css net::ERR_ABORTED 404 (Not Found) /js/skins/ui/oxide/content.min.css net::ERR_ABORTED 404 (Not Found) /js/skins/content/default/content.css net::ERR_ABORTED 404 (Not Found)打包后找不到这几个css文件。在init富文本框的
Tinymce富文本编辑器新增导出功能插件介绍
总结，TinyMCE 富文本编辑器导出插件是一个功能强大的扩展，它不仅扩展了TinyMCE编辑器的功能，使其能够导出内容为Word和PDF格式，还提供了对文件名称等进行自定义配置的能力。这使得该插件成为需要文档导出功能的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值