Flowmix/Docx 多模态文档编辑器：V1.3.5版本，全面升级

嗨, 大家好, 我是徐小夕.

最近一直在研究多模态文档引擎, 最近2周对 flowmix/docx文档编辑器又进行了一波功能迭代, 在迭代的过程中也学到很多新的技术, 接下来就和大家一起分享一下, 如果你恰好也在研究类似的产品, 相信会有很多收获.

先说一下1.3.5版本迭代的内容:

编辑器支持AI侧边栏, 可以轻松集成各种AI模型实现内容生成
文档支持划词评论功能
文档支持一键导入Docx文件
支持实时获取当前光标在文档中的位置
优化文档元素插入文档的顺序
新增高级思维导图组件
内联工具条UI优化

后面还会持续迭代更多功能, 比如多人协同 , 一键生成PPT等, 如果大家有好的建议也可以随时在评论区反馈.

1. 编辑器支持AI侧边栏

编辑器之前虽然支持了AI问答组件, 但是为了更好的挖掘文的价值, 我集成了AI侧边栏, 大家可以轻松集成市面上的AI大模型, 来实现AI辅助创作.

我们可以轻松的点击右下角的AI按钮, 打开侧边栏和AI对话:

对话组件我采用的是开源的方案 @ant-design/pro-chat , 大家有其他好的插件也可以分享一下哈~

2. 文档支持划词评论功能

划词评论我在之前的文章中有详细的分析, 感兴趣的可以参考一下:

市面上大多数文档编辑器的【划线评论】功能，是如何实现的？

3. 文档支持一键导入Docx文件

文档一键导入docx文件功能可以高效的帮助我们解析docx的内容, 并在flowmix/docx中快速编辑. 接下来给大家看看原始的word文件:

在第一个版本中其实也实现了docx文件的导入, 但是之前对图片, 表格这些docx特有的格式无法支持, 最近研究出来了一个方案, 可以很好的支持docx文件中的表格, 图片等, 并一键转化为flowmix/docx 中支持的数据结构 .

在实现Docx解析方案中我采用了DOMParser API, 这里我给大家介绍一下这个兼容性良好且功能强大的浏览器API.

DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。

我的实现思路是将 Docx 文件解析为 html 字符串, 在基于DOMParser 将html 字符串转化为Dom, 最后对Dom进行分割, 输出 flowmix/docx 支持的json结构.

将 html 字符串转化为 dom 的案例如下:

ini 复制代码

const parser = new DOMParser()
const doc = parser.parseFromString(html, 'text/html')

这样, 我们就能通过节点遍历的方式一键将dom转化为json结构了:

目前 flowmix/docx 已经支持解析的docx格式有:

标题(h1-h6)
文本段落(p)
序号(ul, lo)
图片
表格

后续还会支持更多docx元素, 大家感兴趣的可以参考一下这个方案.

4. 支持实时获取当前光标在文档中的位置

实时获取光标位置的方案主要是为了实现多人协同的光标位置确认, 这里我也基本实现了. 主要是用到了 window.getSelection API, 后续我会详细和大家分享它的应用场景. 实现代码如下:

go 复制代码

const saveSelection = () => {
        const selection = window.getSelection()
        if (selection && selection.rangeCount > 0) {
            const range = selection.getRangeAt(0)
            return {
            anchorNode: range.startContainer,
            anchorOffset: range.startOffset,
            focusNode: range.endContainer,
            focusOffset: range.endOffset
            }
        }
        return null    }