这个教程实用性可能不算很高。对于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'