构建类似漫游,网络化,高度自定义的实时编辑器,第1部分

2020-11-22 23:02:20

双向网络工具(如漫游研究和黑曜石)目前处于流行趋势。它们背后的想法并不是崭新的,但是基于网络的技术的不断发展使它们成为可能。

我在这一系列开发文章中记录了我的fibre-note建筑,我要构建的是:

高度自定义的编辑器强制执行自定义架构以控制文档的布局,比如说所有内容都是列表项,段落中可能只有文本和标签,等等。

我将源放在这里,可以自己托管。甚至还为一键式托管配置了“部署到heroku”按钮。

我始终将Rails用作Web项目的首选,并且该项目的第一个代号是roam-on-rails,这是一个很不好的玩笑,因为我已经有了一个名为ruby on rust的项目。

我对此很不好,所以我只是从词库中选择了纤维一词作为网络的同义词。

整个数据库被构造为有向图。基本单位是一个块,是图中的一个节点,代表一个段落,承载着类似其内容和可选标签的数据。

每个块节点可以有一个父节点。因此,从根(无父级块节点)产生的注释形成一棵树,而整个数据库形成一个森林。

显然,我们需要维护一个图形,但是我没有选择像neo4j这样的面向图形的数据库。使用良好的旧SQL来模拟一个就足够了。

这两个插件都可以在数据库级别(Postgresql的AGE)和Rails级别(如Edge)进行图形绘制。对于最初的实现,我选择从头开始手写所有内容,以加快迭代速度,因为我不断地进行更改。

这将是一个繁重的前端项目,我必须选择编辑器作为第一步。

将文档限制为一组特殊的内容类型(例如列表,列表项,内联标签)

检查和操作来自用户的输入,从而限制了可以输入哪种类型的内容(列表项,段落,内联跨度等)

我尝试了一些选择。最后,由于详尽的指南和参考资料,最新的维护以及一个友好的论坛,我与散文镜定居下来,建立了纤维笔记。

作为Rails用户,我的第一个想法是actiontext和trix。 Trix非常适合将常规的Rails应用(例如rails)添加开箱即用的富文本编辑功能。

它与动作视图(渲染)和活动存储(图像上传)之类的Rails组件完全交织在一起,如果不侵入隐藏的方法,就很难对保存的内容进行变异。

会将内容另存为原始HTML片段,这很不好,因为解析和处理内容的速度很慢(例如标记检测,图像处理,表格突变等)。

它没有附带有关生成的HTML文档格式的详细文档/规范,当您的系统依赖于即时处理内容时,这是不可靠的。

在详细的文档,数据格式规范,主题和打字稿支持方面,鹅毛笔是另一个有竞争力的候选人。

可以轻松集成库,调整一些配置并应用不同的主题。您可以在10分钟内添加markdown语法支持。

限制文档中允许的内容种类或粘贴特殊格式的文本会发生什么都不容易。

很难实用地控制数据的突变以手动实现以下功能:“按下回车键时创建另一个具有相同缩进的列表项,并且当前光标位于列表项的末尾,包括列表项的内联跨度的结尾”。

这并非不可能,但是如果您需要许多这样的变异,它将变得过于复杂。

散文镜的结构最复杂。您必须导入至少十个软件包才能构建一个简单的演示,每个软件包都管理编辑器的一个方面(模型,视图,模式定义,键映射等)。

有一种入门工具包(prosemirror-example-setup),可以使旅途更轻松。我建议向只需要基本功能的用户使用该套件,而对于复杂功能,则必须将每个部分组成并将它们拼凑在一起以实现更好的控制。就像高级用户几乎不希望使用预设的默认首选项或Rails支架一样。

详尽和冗余意味着完全控制,反之亦然,只是必须这样。您将具有以下能力:自定义架构,听每一次按键,监督模型的每笔交易,以及安排如何创建(在拖放过程中也分析,包装和截断)不同类型的对象。元件。

您将花费大量时间在指南,各个软件包的参考乃至源代码之间切换。我可以向您保证,该指南将对复杂的模块化系统的设计有所帮助。

谢谢,在下一章中,让我们讨论如何构建和调整编辑器以满足我们的需求。