[教程]VUE.js + TinyMCE 5.0 富文本编辑器 + 数据库
这个教程实用性可能不算很高。对于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'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
4, 目前环境下的vue-cli不存在public目录，因此使用static目录替代
1、在public目录下新建tinymce，将上面下载的语言包解压到该目录
2、在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面
同时将tinymce-editor.vue代码中46-48行变更为
language_url: 'static/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: 'static/tinymce/skins/ui/oxide',
5, 大部分教程都逼着用户追加语言包，如果因为特定需求想保留英文设定的（例如我本次的开发），删去tinymce-editor.vue代码中46-47行，即
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN'
数据库存储
重头戏，相比起普通输入框，富文本编辑器可以加载多媒体并设定少量特殊格式，可以最大限度地还原用户喜好，因此选择将富文本编辑器的内容生成的代码完整存入数据库。
上文提到msg这个参数，代码已经预置，可以直接调用。
数据库内对应字段类型请使用TEXT系列，不要使用BLOB，具体类型可以参考这个表（一般带多媒体的选用MEDIUMTEXT或LONGTEXT比较保险）
| TINYTEXT | 256 bytes | |
|---|---|---|
| TEXT | 65,535 bytes | ~64kb |
| MEDIUMTEXT | 16,777,215 bytes | ~16MB |
| LONGTEXT | 4,294,967,295 bytes | ~4GB |
然后是正常的前后端设置，这个部分就不多说了，很多教程都有，主要提一个问题：
因为多媒体生成的代码量很大，在发送请求时大多会超过单次请求的载荷量（好像是1M左右？），需要增加载荷量
在index.js（或部分版本为main.js）中，将
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
修改为
app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.urlencoded({ extended: true, limit: '10mb' }));
（参考https://gist.github.com/Maqsim/857a14a4909607be13d6810540d1b04f）
一般请求都不会超过这个量
从数据库查找并使用时，只能用非常传统的方式–指定某个区块的id后嵌入HTML代码，即
document.getElementById('你的区块id').innerHTML = msg
（完）