vue3-element-ui + ckeditor4 预览和编辑word文档(word数据由后端接口返回-使用DocumentFormat.OpenXml 转成html字符串)
- 需求描述
- 需求现状
- 第一步,ckeditor组件的下载与安装
- 第二步,预览word文档
- 解决显示乱码问题
- 第三步,使用编辑器工具栏中的保存按钮来保存word文档
需求描述
最近遇到一个需求:对已上传服务器的word文档使用ckeditor富文本编辑器实现预览和编辑功能。
之前没有接触过ckeditor组件,只能一边查资料一边自己摸索。
需求现状
1、目前已实现word文档的在线预览(word数据由后端API获取返回)
2、文档编辑后点击工具栏的”保存“按钮保存编辑后的数据
第一步,ckeditor组件的下载与安装
这一点就不多说了,网上有很多详细教程,我也是按照网上的教程进行安装的。
但是网上的大神们侧重的是教会大家安装,安装成功后没有把word文档中的信息显示到编辑器中逻辑,
一般是前端直接扔一句简单的字符串显示就结束了。
第二步,预览word文档
作为初次接触该组件的人,试了传入文件流和byte数组等方式结果显示乱码,如下图:
解决显示乱码问题
后端API读取word文档后使用DocumentFormat.OpenXml 把文档内容转成html字符串再返回。不知道这么做对不对,反正实现正常预览了。
API部分代码:
// word文档保存路径
var filePath = ".\\doc.docx";
byte[] byteArray = System.IO.File.ReadAllBytes(filePath);
using (MemoryStream memoryStream = new MemoryStream())
{
memoryStream.Write(byteArray, 0, byteArray.Length);
using (WordprocessingDocument doc = WordprocessingDocument.Open(memoryStream, true))
{
HtmlConverterSettings settings = new HtmlConverterSettings();
XElement html = HtmlConverter.ConvertToHtml(doc, settings);
return html.ToString();
}
}
}
正确预览
第三步,使用编辑器工具栏中的保存按钮来保存word文档
ckeditor4组件基础版和标准版的工具栏中是没有保存按钮的,完整版里面有,安装的时候根据个人需要来选择版本。组件引用进来后,保存按钮默认是置灰的,扒了下官方API,需要把editor放在表单中才会亮起。
前端vue代码:
<template>
<div>
<form>
<textarea :id="id" name="content"></textarea>
</form>
</div>
</template>
下一步就是重写保存按钮来实现编辑word文档后保存到服务器了。
重写工具栏保存按钮
// 重写保存事件
this.ckeditor.on('instanceReady', () => {
this.ckeditor.addCommand('save', {
modes: { wysiwyg: 1, source: 1 },
exec: () => {
this.$emit('saveContnet', this.ckeditor.getData())
}
})
})
重写工具栏保存方法后,就可以在使用组件的地方进行保存到后台的方法了
最后再保存到word文档就可以啦…