文档引擎+AI可视化打造下一代零代码编辑器
上一期和大家分享了文档引擎的基础功能， 技术选型， 产品设计思路，接下来先来总结一下最新实现的功能进展：
- 文档支持配置弹幕
- 支持文章全局评论
- 支持划线评论
- 支持关键词注释，批注
- 支持文章数据统计（访问量，PUV，字数和阅读时间分析）
- 支持文章自定义赞赏配置
- 支持json导入导出
- 支持一键复制内容块
- 支持无限层级目录
设计 Nocode/Doc 的主要背景是基于我对零代码积累的大量产品技术实践和1万+的用户反馈，希望通过一种更高效简洁的方式来快速构建企业级应用。文档搭建引擎是一个基础内核，后续2个月内我会通过零代码 + 文档引擎 + AI模型来研发一款AI + 可视化办公解决方案.
下面我就来和大家介绍一下最新的功能和技术方案设计。
效果演示
静态演示：
c2896db6b1c2dfb138638094ec36560.png
动态效果：
chrome-capture-2024-4-20.gif
1. 支持无限层级目录
对于市面上的知识库产品，支持多级空间目录是非常有必要的，因为这样的设计更利于分类管理。所以我最近也设计了这个功能：
image.png
我们可以无限层级的创建目录，并在指定目录下创建文档，同时在右侧会自动渲染知识库的目录思维导图：
目录构建和层级编历大家可以采用了二叉树的遍历算法，比如前序遍历、中序遍历和后序遍历，
代码实现参考：
// 定义二叉树节点类
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号会做一波更大规模的更新和功能上线，欢迎随时和我留言反馈，建议，技术交流~
大家也可以关注我的视频号，后续会做更多的零代码技术产品分享~