vue3-element-ui ckeditor4 预览和编辑word文档（word数据由后端接口返回-使用DocumentFormat.OpenXml 转成html字符串）

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文档就可以啦…