[教程]VUE.js + TinyMCE 5.0 富文本编辑器 + 数据库

本教程介绍了如何在VUE.js项目中集成TinyMCE 5.0富文本编辑器,并与MySQL数据库进行交互。教程强调不指定TinyMCE版本,直接使用组件并存储生成的HTML代码到数据库,提醒注意多媒体内容可能导致的数据库存储问题,建议使用TEXT系列字段。此外,还提示了如何调整axios配置以增大请求载荷量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这个教程实用性可能不算很高。对于VUE.js我也还是新手,请多多指教

前提条件:
1, VUE.js,vue-cli脚手架;
2, Express被用于连接数据库;
3, 数据库(我使用的是MySQL)。
不需要安装TinyMCE,也不需要注册或登录。

主要的代码请参考博主LiuBing https://liub37.com/vue-tinymce-5.html 的教程(该博主关于VUE.js和TinyMCE经验丰富,此前在TinyMCE 4.x时代就比较活跃),可以直接复制tinymce-editor.vue,建议存在components目录下以方便调用。请合理调整调用时导入的文件路径。

这个代码和其他博客上收录的有一个很大的区别,在演示中可以查看编辑器内容生成的HTML代码(封装后使用时有一个名为msg的参数),因此有很大的拓展空间。

简单提几个细节
1, 这两行指令几乎每个教程里都有,但是有些人喜欢指定版本搞事,请勿模仿指定版本。

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

2, 这句话基本上每个教程都有,请不要盲从,因为TinyMCE官网的文件条理性不好,看了相当于白看,不然也不至于每个教程都自带封装后的成品。

初始化配置项,具体参考官网文档

3, 这些组件请酌情使用,如果不需要的请千万不要画蛇添足,因为多媒体生成的代码为二进制,会使数据库存储难度变大。

import 'tinymce/themes/silver'
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值