hi，大家好， 我是徐小夕。之前和大家分享了很多我设计的零代码和可视化解决方案，最近也是一直在研究文档引擎和零代码搭建引擎，今天就来分享一下最新进展。
往期精彩：上一期和大家分享了文档引擎的基础功能， 技术选型， 产品设计思路，接下来先来总结一下最新实现的功能进展：
文档支持配置弹幕支持文章全局评论支持划线评论支持关键词注释，批注支持文章数据统计（访问量，PUV，字数和阅读时间分析）支持文章自定义赞赏配置支持json导入导出支持一键复制内容块支持无限层级目录设计 Nocode/Doc 的主要背景是基于我对零代码积累的大量产品技术实践和1万+的用户反馈，希望通过一种更高效简洁的方式来快速构建企业级应用。文档搭建引擎是一个基础内核，后续2个月内我会通过零代码 + 文档引擎 + AI模型来研发一款AI + 可视化办公解决方案.
下面我就来和大家介绍一下最新的功能和技术方案设计。
效果演示静态演示：
c2896db6b1c2dfb138638094ec36560.png
动态效果：
chrome-capture-2024-4-20.gif
1. 支持无限层级目录对于市面上的知识库产品，支持多级空间目录是非常有必要的，因为这样的设计更利于分类管理。所以我最近也设计了这个功能：
image.png
我们可以无限层级的创建目录，并在指定目录下创建文档，同时在右侧会自动渲染知识库的目录思维导图：
8.gif
目录构建和层级编历大家可以采用了二叉树的遍历算法，比如前序遍历、中序遍历和后序遍历，
代码实现参考：
// 定义二叉树节点类function Node(value) { this.value = value; this.left = null; this.right = null;}// 创建一个示例二叉树var nodeA = new Node("a");var nodeB = new Node("b");var nodeC = new Node("c");var nodeD = new Node("d");var nodeE = new Node("e");var nodeF = new Node("f");var nodeG = new Node("g");nodeA.left = nodeB;nodeA.right = nodeC;nodeB.left = nodeD;nodeB.right = nodeE;nodeC.left = nodeF;nodeC.right = nodeG;// 前序遍历：先打印当前节点，再打印左边子树的节点，再打印右边子树的节点function DLR(root) { if (root == null) return; console.log(root.value); DLR(root.left); DLR(root.right); DLR(nodeA);}// 中序遍历：先打印左边子树的节点，再打印当前节点，再打印右边子树的节点function LDR(root) { if (root == null) return; LDR(root.left); console.log(root.value); LDR(root.right); LDR(nodeA);}// 后序遍历：先打印左边子树的节点，再打印右边子树的节点，再打印当前节点function LRD(root) { if (root == null) return; LRD(root.left); LRD(root.right); console.log(root.value); LRD(nodeA);}2. 支持一键复制内容块这个功能主要是我在使用开发文档编辑器写内容的时候，有很多重复的内容需要使用，如果每次都复制粘贴，效率还是不能达到我的要求，所以就实现了一键复制内容块的功能：
image.png
它可以对任何内容形式进行一键复制，比如在传统文档中不可复制的视频，音频，轮播图，各种组件等。
文档支持配置弹幕弹幕必须得有！作为二次元1年工龄的小朋友，看到B站逼格拉满的弹幕，想一想，文档也是内容消费型，为啥不能有弹幕，更好的和用户互动呢？所以我也实现了文档弹幕的功能， 大家可以选择配置文档弹幕：
image.png
丝滑的弹幕就这样实现了。由于涉及的知识点比较多，后续我会专门分享一下弹幕的前端技术实现。感兴趣的朋友可以体验一下，
文档弹幕案例
支持文章全局评论内容的评论功能是少不了的， 为了让知识博主有个更好的交流环境，我在 Nocode/Doc 产品里实现了评论功能（当然国家规定使用评论必须手机号实名注册~）
image.png
支持划线评论除了对文档进行全局评论，还有很多企业级的场景，需要不同人来协作管理，需要对文档进行更精细的反馈，目前飞书和钉钉文档都支持划线评论，所以 Nocode/Doc 也必须安排！
本来想划线评论功能画个小半天就实现了， 没想到坑还挺多，对于追求代码质量，代码性能，产品体验的我来说，真的是快要把 javascript 祖师爷扒出来了。
image.png
这里分享一下需要考虑的点：
划线评论不能污染文档本身划线评论内容的加载性能划线位置计算和评论列表的位置计算划线评论完整业务数据流设计文档滚动对划线的位置计算的影响本来想用 canvas 实现的， 所以做出来了，但是考虑到后期的扩展性和灵活性，我还是重新选择了离屏dom + js 来实现。 最终效果如下：
88.gif
大家也可以用电脑体验一下划线评论的快感~
划线评论案例
支持关键词注释，批注这块对于知识文档非常有价值，比如对于一些行业术语，专业词汇，如果作者能给一定的解释，对于阅读用户来说是非常有帮助的，所以为了更好的用户体验，这波功能必须加上！
image.png
添加批注的效果：
image.png
支持文章数据统计当然这个功能是为了更好的服务作者和用户，方便大家对文章进行更好的数据把控， 后续会实现更多数据分析能力：
image.png
支持文章自定义赞赏配置当然这块主要是为作者服务的，比如你写了一篇好的文章，可以配置自己的赞赏二维码，如果用户觉得有帮助，有可能给你打赏一杯奶茶？
image.png
支持json导入导出这块主要是为了更好的分享和保存你的内容， 并对内容做程序式修改：
image.png
最后好啦。这就是本周的更新，预计4月29号会做一波更大规模的更新和功能上线，欢迎随时和我反馈，建议，技术交流~
往期精彩：Nocode/Doc，可视化+ 零代码打造下一代文件编辑器爆肝1000小时, Dooring零代码搭建平台3.5正式上线可视化表单&试卷搭建平台技术详解