flowmix/docx, 一款可拖拽支持多模态的文档引擎

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

之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:

  • H5-Dooring(页面可视化搭建平台)

  • V6.Dooring(可视化大屏搭建平台)

  • 橙子6试卷(表单搭建引擎)

  • Nocode/WEP 文档知识引擎

之前和大家分享了我研发的AI+知识库平台Nocode/WEP, 收到了很多朋友的热心反馈, 同时也帮助了 1000+ 用户构建了自己丰富的知识库.

3b4130bf27af8dc2f1c0d70e1a38b6cd.png

当然也有很多小伙伴希望基于Nocode/WEP的文档编辑器, 集成到自己的内容系统, 所以我花了1周的时间, 将Nocode/WEP的编辑器进行了抽离, 并提供了一个纯前端编辑器的演示版本, 供大家学习参考, 同时也支持以很低的成本, 一键源码部署.

b449cd89373790e74c75b9661d16ae48.png

该编辑器主要部分由 js 编写, 大概占70%, 附加UI采用 react 组件来实现, 所以大家不管是vue技术栈还是React技术栈, 都能低成本接入.

demo演示

c28aefcc3deca0d561269260d8e555c9.gif

这个编辑器之所以起名叫flowmix/docx, 是因为它是我未来产品规划中的一个拼图. 

我们可以使用它实现具有交互(弹幕, 评论, 点赞) 和多模块组件的能力, 甚至能集成任何第三方开源组件:

84159c23a7b96bcff64d14e0ce0adcef.gif

该文档引擎的体验地址:

http://react-flow.com/docx

我在官网还写了一个文档案例, 来更方便的帮大家理解这款编辑器, 当然在我往期的文章中对它也有比较详细的介绍, 大家感兴趣的可以参考一下.

从零到一打造面向AI的文档可视化搭建引擎

就在上周,文档知识引擎Nocode/WEP又新增了3大炸裂功能!

爆肝开发3个月,第三款可视化产品终于上线了

功能亮点介绍

今天再和大家介绍一下编辑器版本的能力。

1. 文档支持思维导图编辑

7e652b57feffdcf8ec07a88487b37bb3.png

没错,用过飞书和钉钉的朋友也许很熟悉,我们可以在文档里内嵌思维导图,让自己的思路更清晰生动。目前我实现的Nocode/Doc文档引擎也支持了思维导图的编辑,大家可以直接在文档中编写思维导图,当然,有了这个能力,后期我会和更多系统场景打通, 实现业务级别的思维导图动态渲染

2. 文档支持内嵌白板,展示更多原型,设计稿等效果

ebee91493da5cf3ebcb67e5b9e802a59.png

产品经理写的原型,如果用文档轻松展示出来,是不是很酷炫呢?

3. 插入自定义表格

e70445c380f23eabd612e1530b1a0410.png

4. 插入网页 8c076f9d93af6b141b606940015ee283.png

我们通过输入链接可以自动生成网页的信息, 这块采用类似爬虫的技术来实现对网址的解析。

5. 插入视频

7a05fa329eb2b5998d6a585ffb82f8fa.png

我们可以输入视频网址来一键渲染视频:

40c5c827e5f49dc6bce633175a0174d1.png

6. 插入第三方网页

48c122d2705b05dafd792adf0c33cb12.png

我们可以在自己的文档里内嵌一个第三方网址,并能提供相关的服务。

7. 插入数学公式

1939d9f738871735a86b4425f6c9aa2b.png

我们可以通过可视化的方式来编写高级数学公式,比如微积分,三角函数,矩阵变换等,而无需懂 Latex 语法。

8. AI内容生成格式化优化

de931e331f165109c135c8e55719ec5a.png

之前有用户在留言区评论说AI生成的内容保存后格式没了,我最近修复了一下,目前可以完美保留AI生成的内容格式,帮助大家快速创作内容:

ea79018ef38c750f016631e74777c3e1.png

上面是让AI帮助我们生成一个前端学习大纲的需求,大家可以看到生成的效果,如果觉得不满意,还可以重新生成:

58075a5d5bc502ff2ecd26a778f0750d.png

我们保存之后, 目前可以和文档完美融合,并且保留了AI的格式:

5391d952c6da8b6db6513428817b8f9c.png

9. 文档内嵌表单组引擎, 可以配置自定义表单

这个功能也是之前网友提的一个比较实用的建议, 最近也花了点时间,实现了一个表单引擎,方便用户可以在文档里轻松制作表单,并进行数据收集:

5488023bd1f35b345e1f5a071fa14832.png

上图我们可以看到,我们可以在文档中轻松制作表单,而且一个文档可以制作多个表单,非常有价值。

目前表单引擎我使用的是原生js实现,由于dom操作,难免性能上会超过传统框架诸如reactvue等,所以大家可以参考学习一下,后面我也会做一些技术分享。

整个引擎代码大概不到400行:

aade160c0442d45af2a32883fc0efb5b.png

我们来看看表单制作好之后保存的效果:

349b941bed62be7abdc5f600f76bd2a4.png

10. 文档支持配置弹幕

弹幕必须得有!作为二次元1年工龄的小朋友,看到B站逼格拉满的弹幕,想一想,文档也是内容消费型,为啥不能有弹幕,更好的和用户互动呢?所以我也实现了文档弹幕的功能, 大家可以选择配置文档弹幕:

62d45647e1ad8ae7b7158e09417d71c4.png
image.png

丝滑的弹幕就这样实现了。由于涉及的知识点比较多,后续我会专门分享一下弹幕的前端技术实现。感兴趣的朋友可以体验一下,

11. 支持文章全局评论

内容的评论功能是少不了的, 为了让知识博主有个更好的交流环境,我在 Nocode/Doc 产品里实现了评论功能(当然国家规定使用评论必须手机号实名注册~)

8cf60009ba59421fa8ea13690fa18f15.png
image.png

12. 支持关键词注释,批注

这块对于知识文档非常有价值,比如对于一些行业术语,专业词汇,如果作者能给一定的解释,对于阅读用户来说是非常有帮助的,所以为了更好的用户体验,这波功能必须加上!

a895e227b9f2c90e490e5e3177a7c76f.png
image.png

添加批注的效果:

f893302d59df642243a77fd4e5cb64d6.png
image.png

13. 支持文章数据统计

当然这个功能是为了更好的服务作者和用户,方便大家对文章进行更好的数据把控, 后续会实现更多数据分析能力:

f387c25828b2074a847bc20e330e14ac.png

最后

好啦, 欢迎随时和我留言反馈,建议,技术交流~

文档编辑器版本体验地址:

http://react-flow.com/docx

大家也可以关注我的视频号,后续会做更多的零代码技术产品分享~

往期精彩:
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值