在引擎上开发一个插件是相对比较简单的。引擎提供了以下几个抽象类:
Plugin
最基础的插件抽象类ElementPlugin
节点插件,继承自Plugin
抽象类BlockPlugin
块级节点插件,继承自ElementPlugin
抽象类MarkPlugin
样式节点插件,继承自ElementPlugin
抽象类InlinePlugin
行内节点插件,继承自ElementPlugin
抽象类ListPlugin
列表插件,继承自BlockPlugin
抽象类在比较复杂的插件里面,我们需要操作 DOM 树还有光标,所以仅仅继承还是不够的,我们还需要配合节点 API 来制作一个比较完善的插件。
在这里我们只需要了解有关插件的基本知识,如果需要开发插件的完整教程请在"插件"菜单里面查看。
我们已经提供了足够多的基础插件,基本上你可能不再需要定义基础插件,大概率会需要使用 card
结合 React
或者 Vue
等前端库来定义一个复杂的插件,例如:调查问卷、画图、选择题,card
组件都能胜任
插件在编辑器实例化时,就会初始化插件。所以我们得在一开始就需要把插件传入引擎
const engine = new Engine(渲染节点, {plugins: [...插件列表],});
插件都继承自Plugin
抽象类,必须实现 execute
方法。引擎会把他们加入到可执行命令列表里,并且在执行插件命令时,引擎会帮助处理好光标位置、历史记录等等
/*** 执行插件* @param args 插件需要的参数*/abstract execute(...args: any): void;
我们可以通过 engine.command.execute("插件名称", ...插件参数)
这种形式来执行一个插件命令
除了前面的无 UI 渲染的命令式和固定操作节点类型的插件外,我们还可以结合 Card
来完成自定义内容渲染的插件。同样的, Card
也是一个抽象类,我们需要继承它,它也有一个必须实现的方法 render
(卡片渲染方法),如何渲染卡片内的节点节点完全取决于你。
除了自定义插件比较麻烦的方法外,我们还可以在现有基础插件上去继承它,然后重写插件的部分方法,获取到插件的节点添加事件等等。不过,你首先要对插件的逻辑和定义有一定的了解。