editor-ui
vue 集成 tinymce 富文本编辑器
自定义 tinymce 富文本编辑器,
在原来的编辑器中增加上传 word 模板
最终展示效果:
主要代码:
整体思路:
1,在编辑器原来的基础上增加上传模板按钮
2, 前端上传 word 模板
3, 服务端接收将 word 转换为html 返回前端
4, 前端拿到服务端返回的值,将其放到富文本编辑器中
4.1, 在 data 的中定义个 customEditor 变量,值可以为空
4.2, 填充值的方式: 拿到服务端上传成功之后的返回参数,将其填充到标签中,
你所编辑的所有东西都会呈现在这个标签中,所有富文本编辑器千篇一律
this.customEditor=res.content;
console.log('haoxy'+this.customEditor)
tinymce.get('tinymceEditer').setContent(this.customEditor);
5, 前端点击submit,服务端将其转换成 pdf文件
放到项目中遇到的问题修复
问题描述1:
当上传模板之后点击浏览器刷新编辑框中的内容会变为之前上传的内容
解决方法:
if (localStorage.editorContent) {
tinymce.get('tinymceEditer').setContent(localStorage.editorContent);
}
将这段代码注释掉即可,因为编辑器会自动的将内容保存到本地,当你去点击浏览器刷新的时候他会去本地取出并赋值到编辑框中
问题描述2:
当你在编辑框中进行编辑的时候tinymce编辑器监听了键盘按下的事件,但是键盘按下的前一个字符没有保存,例如:
你在编辑框中输入4个字符 aaaa 你再点击submit生成pdf文件,但是 pdf文件中就只有3个字符aaa
解决方法:
因为编辑器只监听了keydown事件,并没有去监听keyup事件
所以加上如下代码即可
editor.on('keyup', function (e) {
localStorage.editorContent = tinymce.get('tinymceEditer').getContent();
vm.editorModel.content = tinymce.get('tinymceEditer').getContent();
});
问题描述3:
当点击submit 生成pdf文件时,生成的 pdf 文件样式改变了
解决方法:
这是因为将 word 文档转换成 html 的时候自动的加上了这段样式
解决方法可以在前端解决也可以在后端去解决,这里我选择了在后端解决
后端在返回给前端html 的时候,在返回的内容上加上
respInfo.setContent("
