最近项目要求自动生成报告,试了很多种技术栈,最后决定还是用前端的tinymce组件来实现,但是使用过程中遇到很多问题,最麻烦的主要有以下几个问题:
1、图片的本地上传,这个官方文档写的很详细了 https://www.tinymce.com/docs/demo/local-upload/ 加入
在配置中定义images_upload_url,然后在后端写好上传的API就好,这里特别要注意的是,返回值一定要是一个包含location属性,用来指定图片在服务器中的位置。
2、theme.js文件无法加载
因为本人使用webpack管理,所以的build的时候,需要将tinymce包中的文件copy到编译路径,在webpack.dev.config.js(不同项目配置文件不一样)中
的plugins中增加 CopywebpackPlugin,代码:
plugins: [
new CopyWebpackPlugin([
{
from: 'src/components/text-editor/tinymce'
}
], {
ignore: [
'text-editor.vue'
]
})
]
3、图片无法手动拉伸调整大小
根本原因还是因为第二点,没有将tinymce中的文件copy到编译路径下,
建议参考项目https://github.com/iview/iview-admin