本教程介绍了如何在VUE.js项目中集成TinyMCE 5.0富文本编辑器，并与MySQL数据库进行交互。教程强调不指定TinyMCE版本，直接使用组件并存储生成的HTML代码到数据库，提醒注意多媒体内容可能导致的数据库存储问题，建议使用TEXT系列字段。此外，还提示了如何调整axios配置以增大请求载荷量。
这个教程实用性可能不算很高。对于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'
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
