嗨, 大家好, 我是徐小夕.
最近一直在研究多模态文档引擎, 最近2周对 flowmix/docx文档编辑器又进行了一波功能迭代, 在迭代的过程中也学到很多新的技术, 接下来就和大家一起分享一下, 如果你恰好也在研究类似的产品, 相信会有很多收获.
演示地址: http://flowmix.tunrtip.cn/docx
先说一下1.3.5版本迭代的内容:
编辑器支持AI侧边栏, 可以轻松集成各种AI模型实现内容生成 文档支持划词评论功能 文档支持一键导入Docx文件 支持实时获取当前光标在文档中的位置 优化文档元素插入文档的顺序 新增高级思维导图组件 内联工具条UI优化
后面还会持续迭代更多功能, 比如多人协同, 一键生成PPT等, 如果大家有好的建议也可以随时在评论区反馈.
最新版Demo演示
接下来我会具体介绍一下更新的功能和技术实现, 给大家一个参考.
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 的案例如下:
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, 后续我会详细和大家分享它的应用场景. 实现代码如下:
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 }5. 优化文档元素插入文档的顺序
这个问题主要是为了解决文档编辑器当失去焦点时, 仍能争取插入到文档光标最近停留的位置. 之前一直用了“比较笨”的方案, 最近研究了一下,终于用 window.getSelection 实现了.(其实也是用的上述获取光标位置的方式实现的)
6. 新增高级思维导图组件
思维导图的实现方式我也在之前文章中有详细的分享, 大家感兴趣可以参考我之前的文章.
7. 内联工具条UI优化
内联工具条我最近对样式做了进一步统一和优化.
后续规划
最近我们也在花时间做一款文档管理类Saas系统, 底层基于Flowmix/Docx 多模态文档引擎, 这里简单和大家分享一下:
每个月我们都会根据用户的需求和规划的迭代计划持续迭代, 大家可以关注flowmix视界公众号获取最新更新的信息.
后面的一些规划:
这个月除了会上线文档Saas版1.0之外, 在下个月带给大家更强大的编辑器体验:
支持文档图层面板 支持高级可视化组件 支持文档AI工作流 文档支持演示模式 支持多人协同编辑 支持一键生成PPT
当然从体验上来讲, 文档还有很多优化的空间, 这块我们会持续优化和迭代, 并结合业界最佳体验实践, 将文档搭建能力发挥出最大的价值.
编辑器版本体验地址: http://flowmix.turntip.cn/docx
如果你有好的想法和建议, 也欢迎随时留言区交流讨论~
