首页 前端知识 CKEditor5导入并解析word功能的集成,实现word转html

CKEditor5导入并解析word功能的集成,实现word转html

2024-05-14 22:05:08 前端知识 前端哥 933 171 我要收藏

概述

说起富文本编辑器,我们大都遇到过,甚至使用过,这种所见即所得的书写方式,以及它灵活的排版,让我们的创作更加流畅和美观。其实你可以把它理解成是把word等软件的功能转成在浏览器里面使用,这样就能通过其他的一些手段进行管理,并融入到相应系统中。但是由于实现方式和语言等的不同,存在着一些出入。

比如我现在正在使用的,也就是此刻我写这篇文章的工具,就是一个富文本编辑器。其实富文本编辑器有很多种,它们的功能类似、产出目的类似、使用方式也类似,只不过在丰富程度上稍有差别,今天的CKEditor5就是其中的一款。

示意图

可以看到,还是很好看的,美而不失实用。它的功能特别多,只不过有一些功能是要收费的,也就是说它只开源了一部分,或者说对于一些更高级的吊吊的功能你需要少买一点零食或者玩具。不过这些基础功能已经足够用了,它的可插拔式插件集成功能非常强大。

示意图

就像上面所示,你可以随意的添加或删除一个扩展功能,下面有非常多的待继承插件供你选择。

示意图

但是像上面这种的,带有premium的插件,那你就需要支付一定的费用才可以使用啦。

细心的你相信一眼就看出来了,这就是我们今天要讲的内容:从word中导入。

这是一个高级功能,虽然不是很常用,但是有一些特殊的场景或者需求,我们可能希望从编辑好的word中,通过导入的方式来让用户在网页中继续编辑它,并尽可能的保留内容和格式。

一个是自己资金不是很充裕,再一个是想自己去动手做做,因此就决定独立实现这样一个功能。自己做的,当然可以随便免费用。

示例

在开始之前,我们先看下做这个功能在完成之后需要满足的效果,虽然这个功能官网是收费的,但是为了给大家演示,官网也提供了示例,我们先看下官网的成品:

示意图

我们先根据提示,在官网示例上面下载了它提供的一个word,然后用CKEditor5的导入word功能,把这个word导入到编辑器中,解析完成之后就看到了效果,它的还原度很高了,官网应该是特意制作的示例word文件,里边包含了段落、列表、图片、表格等等多个技术点。这些都是我们接下来要实现的内容,官网这复杂程度,钱花的挺值。

为了能让大家有一个对比,这里我把原版word也展示出来给你们看一下:

效果图

可以对比着感受下,不过还是有一些地方不太一样的,比如我对这个原文档做一点点更改。体现就稍微有一点略微的不同,但是这个不是毛病,只是看着有点别扭,我给两张图,先来原word的图,这是我改过的列表:

示意图

再来一张官网导入之后渲染的效果图:

示意图

主要有:1.列表距左边的距离。2.列表项之间多出空白。3.不能显示中文序号。

实现

我们要想实现这样一个插件,首先想到有没有现成的word转html的前端或者后端插件,因为富文本编辑器是可以设置内容的,并且这个内容实质就是html代码,然后再在这个基础上进行集成开发。

因为我有自己的node后端,所以如果用后端做的话就找了一些关于node的word转html插件,一共找到了docx2html、mammoth、word2html等,但是经过测试都不太理想,于是决定放弃,换一个思路,我们可以解析word,然后根据word规范,自己生成出html。

word是流式文件,能任意编辑并且回显,那么肯定有一套约定在里边,能够保存格式并重新读取,就看它有没有开放给我们,幸好,docx这个x就是告诉我们,可以的,因为它就是xml的意思,符合xml规范。

好了,我们可以找出两个辅助插件:

第一个就是用来解压缩用的adm-zip包。

第二个就是用来解析xml文件的xml-js包。

为什么这样呢?这是因为一个docx文件,就是一个压缩包,我们把docx文件重命名为zip格式。然后就可以解压看下里面的内容:

示意图

这就是解压之后的目录,里面包含着所有的word内容,我们一会揭开它的面纱。其中一个关键目录就是word文件夹:

示意图

可以看到有很多的xml文件,它们就规定了word的回显机制和渲染逻辑。

还有一个media文件夹,我们看下它里面有什么:

示意图

可以明显的看到有两张图片,这两张图片就是我们在原word中使用的图片,它就隐藏在这里。

另外,其中document.xml文件存储了整个word的结构和内容,numbering.xml文件规定了列表如何渲染,styles.xml告诉了需要应用哪些样式。

我们就以document.xml文件做一个简单的说明,其余不做过多展开:

示意图

文件前面是对该xml的一些声明,body中包含了一个个的段落,也就是w:p。其中又包含了多个系列w:r,系列中就存储着我们的文本,比如上图红框中我圈出的部分。

而且里面还存储着段落属性w:pPr和系列属性w:rPr。我们就是通过对这些一对对的xml标签,来对word进行解析,找出它的渲染规则。

首先使用上面提到的两个包,非常简单:

const dir = join(process.cwd(), 'public/temp/word/' + fn)
const zip = new AdmZip(dir)
let contentXml = zip.readAsText('word/document.xml')
const documentData = xml2js(contentXml)
contentXml = zip.readAsText('word/numbering.xml')
const numberingData = contentXml ? xml2js(contentXml) : {
  elements: ''
}
contentXml = zip.readAsText('word/_rels/document.xml.rels')
const relsData = xml2js(contentXml)
contentXml = zip.readAsText('word/styles.xml')
const styleData = xml2js(contentXml)
let ent = zip.getEntries()
let ind = fn.lastIndexOf('.')
let flag = false
for(let i = 0; i < ent.length; i++) {
  let n = ent[i].entryName
  if(n.substring(0, 11) === 'word/media/') {
    flag = true
    zip.extractEntryTo(n, join(process.cwd(), 'public/temp/word/' + fn.substring(0, ind)), false, true)
  }
}
return {
  documentXML: documentData?.elements[0]?.elements[0]?.elements,
  numberingXML: numberingData?.elements[0]?.elements,
  relsXML: relsData?.elements[0]?.elements,
  styleXML: styleData?.elements[0]?.elements.slice(2),
  imagePath: fn.substring(0, ind),
}

简单对上面的代码做一下说明:

  1. 先说返回值,由于我们解析完word之后,需要将xml文件读取出来,根据语义再转成html,因此我们需要整个document.xml中的内容,因此返回documentXML,而且还要知道列表的渲染机制,因此也需要返回numberingXML,同样我们需要获取到文档中用了哪些图片,以及它们的位置,所以要返回relsXML,并且我要把对应的图片放到另一个地方存储起来以供使用,所以也要返回imagePath,最后整个文档的样式,也就是styleXML也要返回。
  2. 第1行就是获取到上传的word路径,这里是我自己做了一个上传方法。
  3. 第2行通过adm-zip插件对文件进行解压和读取。
  4. 第3行就是指定获取document.xml文件的内容。
  5. 第4行就是用xml-js对读取到的内容进行解析,之后的代码同理,只是去解析不同的文件而已。
  6. 第13行读取该压缩文件中的目录结构。
  7. 第16行至第22行就是找出word里面用到的所有图片,并将它们存储在其他位置。

至此,我们看一下目前解析完成之后,形成的数据结构。

示意图

很好,现在开始集成:

import { Editor } from '/lib/ckeditor5/ckeditor'
import loadConfig from './config'
import filePlugin from './file'
import './style.scss'
loadConfig(Editor)
const container: any = ref(null)
let richEditor: any = null
onMounted(() => {
  Editor.create(container.value, {
    extraPlugins: [filePlugin]
  }).then((editor: any) => {
    richEditor = editor
  }).catch((error: any) => {
    console.log(error.stack)
  })
})

第1行,导入Editor,也就是我们一会要用的富文本编辑器,然后第9行通过create方法创建它,接收的两个参数分别表示:渲染的容器与配置的插件。

因为CKEditor5填入图片的时候,需要自己手动实现一个插件方法,因此我们要把它配置进来,因为跟咱们要讲的内容无关,就不展开了,官方文档说的很清楚了。

第5行,我在初始化编辑器之前,先去加载了一些配置,其中一个就是引入word转pdf的功能,由于CKEditor5插件扩展很容易,直接在Editor的builtinPlugins属性数据里面加上我们实现的插件就可以,所以我们直接讲插件的开发:

import { ButtonView, Plugin } from '/lib/ckeditor5/ckeditor'
import { postData } from '@/request'
import { DocumentWordProcessorReference } from '@/common/svg'
import { serverUrl } from '@/company'
import { ElMessage } from 'element-plus'
import { arrayToMapByKey } from '@/utils'
let numberingList: any = null
let relsList: any = null
let styleList: any = null
let imageUrl: any = null
let docInfo: any = {
  author: {},
  currentAuthor: '',
  currentIndex: -1
}
const colorList = ['#d13438', '#0078d4', '#5c2e91', 'chocolate', 'aquamarine', 'lawngreen', 'hotpink', 'darkblue', 'darkslateblue', 'blueviolet', 'firebrick', 'coral', 'darkcyan', 'indigo', 'greenyellow', 'deeppink', 'indianred', 'blue', 'darkgray', 'darkmagenta', 'darkgreen', 'chartreuse', 'darksalmon', 'dimgray', 'crimson', 'darkolivegreen', 'gold', 'aqua', 'lightcoral', 'goldenrod', 'burlywood', 'green', 'darkkhaki', 'forestgreen', 'fushcia', 'darkorchid', 'deepskyblue', 'darkgoldenrod', 'cyan', 'cornflowerblue', 'brown', 'cadetblue', 'darkviolet', 'dodgerblue', 'darkred', 'gray', 'khaki', 'bisque', 'darkorange', 'darkslategray', 'lightblue', 'darkturquoise', 'darkseagreen']
let BlockType = ''

引入一些必要的组件和方法等,然后定义我们的插件,一定要继承ckeditor5的Plugin:

export default class importFromWord extends Plugin {
}

然后首先在里面实现它的init方法,做一些初始化操作:

init() {
  const editor = this.editor
  editor.ui.componentFactory.add('importFromWord', () => {
    const button = new ButtonView()
    button.set({
      label: '从word导入',
      icon: DocumentWordProcessorReference,
      tooltip: true
    })
    button.on('execute', () => {
      this.input.click()
    })
    return button
  })
}

this.editor就是我们之前使用create创建好的编辑器,通过editor.ui.componentFactory.add给工具栏添加一个按钮,也就是我们要点击导入word的按钮。

示意图

这里面用到了ckeditor5的ButtonView按钮组件生成器,设置它的名称和图标,然后添加一个暴露出来的事件,当点击按钮的时候,触发选择文件弹窗,这个input是我自己写的一个文件上传输入框。

接下来,我们去构造函数中做一些事情,当实例化这个组件的时候,初始化好我们需要的东西:

constructor(editor: any) {
    super(editor)
    this.editor = editor
    this.input = document.createElement('input')
    this.input.type = 'file'
    this.input.style.opacity = 0
    this.input.style.display = 'none'
    this.input.addEventListener('change', (e: any) => {
      const formData: any = new FormData()
      formData.append("upload", this.input.files[0])
      formData.Headers = {'Content-Type':'multipart/form-data'}
      let ms = ElMessage({
        message: "正在解析...",
        type: "info",
      })
      postData({
        service: "lc",
        url: `file/word`,
        data: formData,
      }).then(res => {
        ms.close()
        if (res.data) {
          ElMessage({
            message: "上传文件成功",
            type: "success",
          })
          const { documentXML, numberingXML, relsXML, styleXML, imagePath } = res.data
          numberingList = numberingXML
          relsList = relsXML
          styleList = styleXML
          imageUrl = imagePath
          markList(documentXML)
          const html = listToHTML(documentXML)
          const ckC = this.editor.ui.view?.editable?.element
          const ckP = this.editor.ui.view?.stickyPanel?.element
          if(ckC) {
            let rt = ckC.parentNode.parentNode.parentNode
            rt.style.setProperty('--content-top', docInfo.paddingTop + 'px')
            rt.style.setProperty('--content-right', docInfo.paddingRight + 'px')
            rt.style.setProperty('--content-bottom', docInfo.paddingBottom + 'px')
            rt.style.setProperty('--content-left', docInfo.paddingLeft + 'px')
            rt.style.setProperty('--content-width', docInfo.pageWidth - docInfo.paddingLeft - docInfo.paddingRight + 'px')
          }
          if(ckP) {
            let rt = ckP.parentNode.parentNode.parentNode
            rt.style.setProperty('--sticky-width', docInfo.pageWidth + 'px')
          }
          const div = document.createElement('div')
          div.style.display = 'none'
          div.innerHTML = html
          splitList(div.firstElementChild)
          insertDivToList(div)
          document.body.appendChild(div)
          document.body.removeChild(div)
          this.editor.setData(div.innerHTML)
        } else {
          ElMessage({
            message: "上传文件失败",
            type: "error",
          })
        }
      })
    })
  }

在这里我们主要做了几件事:

首先第4行到第7行定义了一个文件选择器。

然后给这个输入框添加了一个事件。

第9行到第20行我们读取到选择的文件并上传到服务器进行解析。

对返回回来的文档数据,我们首先做一个标记,以方便我们接下来的操作:

function markList(list: any) {
  let cache: any = []
  list.forEach((item: any, index: number) => {
    let isList = false
    if(item.name === 'w:p') {
      let pPr = findByName(item.elements, 'w:pPr')
      if(pPr) {
        let numPr = findByName(pPr.elements, 'w:numPr')
        if(numPr) {
          isList = true
          let ilvl = numPr.elements[0].attributes['w:val']
          let numId = numPr.elements[1].attributes['w:val']
          let c =  cache.at(-1)
          numPr.level = ilvl
          if(c) {
            if(c.ilvl === ilvl && c.numId === numId) {
              cache.pop()
            }else if(c.ilvl === ilvl && c.numId !== numId) {
              numPr.start = true
              c.numPr.end = true
              cache.pop()
            }else if(c.ilvl < ilvl && c.numId === numId) {
              numPr.start = true
              cache.pop()
            }else if(c.ilvl > ilvl && c.numId === numId) {
              c.numPr.end = true
              cache.pop()
            }else if(c.numId !== numId) {
              while(c.ilvl >= ilvl) {
                c.numPr.end = true
                c = cache.pop()
                if(!c) {
                  break
                }
              }
            }
          }else {
            numPr.start = true
          }
          cache.push({
            ilvl,
            numId,
            index,
            numPr
          })
        }
      }
    }
  })
  cache.forEach((c: any) => {
    c.numPr.end = true
  })
}

主要就是对列表进行标记,因为它要做一些特殊化的处理。

拿到数据之后,我们的核心逻辑都在第33行,实现listToHtml进行处理:

function listToHTML(list: any) {
  let html = ''
  list.forEach((item: any, index: number) => {
    let info = getContainer(item)
    html += info
  })
  return html
}

遍历每一项,然后把它们生成的html拼接起来:

function getContainer(item: any) {
  let html = ''
  if(item.name === 'w:p') {
    let n = findByName(item.elements, 'w:pPr')
    let el: any = null
    let pEl: any = null
    let attr: any = {}
    let style = null
    if(n) {
      let ps = findByName(n.elements, 'w:pStyle')
      if(ps) {
        let styleId = getAttributeVal(ps)
        let sy = styleList.find((item: any) => {
          return item.attributes['w:styleId'] === styleId
        })
        let ppr = findByName(sy.elements, 'w:pPr')
        let rpr = findByName(sy.elements, 'w:rPr')
        if(ppr) {
          ppr.elements.forEach((p: any) => {
            if(!findByName(n.elements, p.name)) {
              n.elements.push(p)
            }
          })
        }
        if(rpr) {
          let rs = findsByName(item.elements, 'w:r')
          rs.forEach((r: any) => {
            let rr = findByName(r.elements, 'w:rPr')
            rpr.elements.forEach((p: any) => {
              if(!findByName(rr.elements, p.name)) {
                rr.elements.push(p)
              }
            })
          })
        }
      }
      let info = getPAttribute(n.elements)
      attr = info.attr
      style = info.style
      if(attr.list) {
        let s1: any = {}
        let s2: any = {}
        for(let t in info.style) {
          if(t === 'list-style-type') {
            s1[t] = info.style[t]
          }else{
            s2[t] = info.style[t]
          }
        }
        for(let t in info.liStyle) {
          s1[t] = info.liStyle[t]
        }
        if(attr.order) {
          if(attr.start) {
            if(attr.level !== '0') {
              html += '<li style="list-style-type:none;">'
            }
            html += '<ol'
            html += addStyle(s1)
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }else {
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }
        }else{
          if(attr.start) {
            if(attr.level !== '0') {
              html += '<li style="list-style-type:none;">'
            }
            html += '<ul'
            html += addStyle(s1)
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }else {
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }
        }
      }else{
        html += '<p'
        html += addStyle(info.style)
      }
    }else{
      el = document.createElement('p')
    }
    item.elements.forEach((r: any) => {
      if(r.name === 'w:ins') {
        setAuthor(r.attributes['w:author'])
        r.elements.forEach((ins: any) => {
          html += dealWr(ins, 'ins')
        })
      }else if(r.name === 'w:hyperlink') {
        r.elements.forEach((hyp: any) => {
          html += dealWr(hyp)
        })
      }else if(r.name === 'w:r') {
        html += dealWr(r)
      }else if(r.name === 'w:commentRangeStart') {
        BlockType = 'comment'
      }else if(r.name === 'w:commentRangeEnd') {
        BlockType = ''
      }else if(r.name === 'w:del') {
        setAuthor(r.attributes['w:author'])
        r.elements.forEach((hyp: any) => {
          html += dealWr(hyp, 'del')
        })
      }
    })
    if(attr.list) {
      if(attr.order) {
        if(attr.end) {
          html += '</p></li></ol>'
          if(attr.level !== '0') {
            html += '</li>'
          }
        }else {
          html += '</p></li>'
        }
      }else{
        if(attr.end) {
          html += '</p></li></ul>'
          if(attr.level !== '0') {
            html += '</li>'
          }
        }else {
          html += '</p></li>'
        }
      }
    }else {
      html += '</p>'
    }
  }else if(item.name === 'w:tbl') {
    let n = findByName(item.elements, 'w:tblPr')
    if(n) {
      let info = getTableAttribute(n.elements)
      html += '<figure class="table"'
      html += addStyle(info.figureStyle)
      html += '<table'
      html += addStyle(info.tableStyle)
      html += '<tbody>'
    }
    item.elements.forEach((r: any) => {
      if(r.name === 'w:tr') {
        html += dealWtr(r)
      }
    })
    html += '</tbody></table></figure>'
  }else if(item.name === 'w:sectPr') {
    let ps = findByName(item.elements, 'w:pgSz')
    let pm = findByName(item.elements, 'w:pgMar')
    if(ps) {
      docInfo.pageWidth = Math.ceil(ps.attributes['w:w'] / 20 * 96 / 72) + 1
    }
    if(pm) {
      docInfo.paddingTop = pm.attributes['w:top'] / 1440 * 96
      docInfo.paddingRight = pm.attributes['w:right'] / 1440 * 96
      docInfo.paddingBottom = pm.attributes['w:bottom'] / 1440 * 96
      docInfo.paddingLeft = pm.attributes['w:left'] / 1440 * 96
    }
  }
  return html
}

做了一些逻辑判断,和不同标签的特殊处理。

在刚才input事件中的第34行到47行,主要是做一些编辑器大小等外观设置,因为要配置成word中的宽度与边距。

还需要考虑到,列表可能不是连续的,中间可能被一些段落所隔开,因此到这里还需要对生成的html中的列表进行分割,并修复索引问题:

function splitList(el: any) {
  while(el) {
    if(el.tagName === 'OL' || el.tagName === 'UL') {
      let a = el.querySelectorAll('ol > p, ul > p')
      let path: any = []
      a.forEach((item: any) => {
        let p: any = []
        while(item) {
          p.push(item)
          item = item.parentNode
          if(item === el) {
            break
          }
        }
        path.push(p.reverse())
      })
      let cur = el
      let t: number = 0
      path.forEach((p: any) => {
        let list = cur.cloneNode(false)
        let list2 = list
        cur.parentNode.insertBefore(list, cur)
        p.forEach((l: any, ind: number) => {
          let chi = cur.children
          let t = 0
          for(let i = 0; i < chi.length; i++) {
            if(chi[i] !== l) {
              list.append(chi[i])
              t++
              i--
            }else{
              if(cur.tagName === 'OL') {
                let s = cur.getAttribute('start')
                cur.setAttribute('start', s ? (+s + t) : (t + 1))
              }
              if(ind === p.length - 1) {
                let par = chi[i].parentNode
                el.parentNode.insertBefore(chi[i], el)
                if(par.children.length === 0) {
                  par.remove()
                }
                cur = el
              }else{
                cur.setAttribute('start', cur.getAttribute('start') - 1)
                let cl = chi[i].cloneNode(false)
                list.append(cl)
                list = cl
                cur = chi[i]
              }
              break
            }
          }
        })
      })
    }
    el = el.nextElementSibling
  }
}

并且由于CKEditor5会对相邻的列表进行合并等处理,这不是我们想要的,可以在它们中间插入一些div:

function insertDivToList(div: any) {
  let f = div.firstElementChild
  let k = f.nextElementSibling
  while(k) {
    if(f.tagName === 'UL' && k.tagName === 'UL') {
      let d = document.createElement('div')
      f = k
      div.insertBefore(d, f)
      k = f.nextElementSibling
    }else if(f.tagName === 'OL' && k.tagName === 'OL') {
      let d = document.createElement('p')
      d.setAttribute('list-separator', "true")
      f = k
      div.insertBefore(d, f)
      k = f.nextElementSibling
    }else {
      f = k
      k = f.nextElementSibling
    }
  }
}

最后我们用this.editor.setData方法,将刚才生成的html设置到编辑器中去。

到此我们基本就已经把需要的功能实现了。

效果

该来看一下我们所做的工作成果了,首先同样导入CKEditor5官网中的文档:

效果图

可以看到,内容与格式等,基本跟原word一样,与CKEditor5官网的示例也相同。然后我们再用另一个刚才修改过的文件测试一下:

效果图

这个是用咱们刚才开发的插件导入的word的效果图,几乎与原word一模一样,也没有了CKEditor官网中的那几个小问题。

至此,我们针对CKEditor5导入word的功能已经开发完毕,同时我又找了各种类型的word测试,均未发现问题,还原度都非常高。

结语

感谢docx的规范,使得我们自己解析word成为可能,虽然不可能100%还原word的格式,但是能够将它导入到我们的富文本编辑器中,以进行二次创作,这对我们来说是非常方便的。

本次word转html,并导入富文本编辑器的开发过程,希望能给大家带来启发。

每一次创作都是快乐的,每一次分享也都是有益的,希望能够帮助到你!

谢谢

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8595.html
标签
word
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!