Vue-aditor NPM

Aditor

基于Vue3的多模态HTML编辑器组件，你可以使用Aditor扩展你的编辑器，接入各种开源组件，实现一个所见即所得的多模态HTML编辑器！

存储上，所有Aditor的文档最终以JSON格式存储，经过AditorState的JSON转AditorNode函数过程，JSON数据会转成一颗有序号多叉树（虚拟DOM），接着AditorRenderer会将AditorNode转成VUE3的实际组件，并通过VUE3的渲染机制，转成最终的真实HTML DOM；

Aditor虽然支持无限嵌套的AditorNode数据结构，但是在实际项目运用中，最推荐的是深度不超过3个深度的数据结构，即"文档根节点-块节点-子节点"的数据结构；如果子节点需要实现如表格等复杂的嵌套数据结构，推荐子节点通过AditorView提供的函数，完全劫持AditorView的相关系统输入事件，这样，你可以丝滑的将各种开源TS,JS的第三方接入自己的Aditor，虽然劫持了组件内部的交互，但是在文档整体（即当光标在组件真实DOM前后时）你可以放心的交给Aditor，Aditor会正确的识别组件位置以及用户的回车，删除，后退，编辑等交互，而不必担心交互和AditorNode数据产生不一致的情况。

在事件和Aditor树的交互和同步上，和其他大部分主流的编辑器理念一样，每次事件Aditor会产生一个完全新的AditorNode，并在其进行修改，最后同步给Vue3的渲染器，通过Vue3的diff机制，进行局部渲染。同时，对于中文等输入事件情况，Aditor会在自身的树结构进行校验，并标注特殊更新情况给Vue3，从而使得Vue3的diff机制能够正确生效，保证真实HTML DOM和Aditor树结构的完全一致！

Aditor本身只提供基础框架（如Parser框架，通过定义过程，用户可以将复制的文本或者markdown等文档转成自己所需的组件）和一些基础自定义组件（AditorLink），以及一个接入第三方组件（Katex）案例。为了保持框架的简洁和易维护，Aditor不提供如Menu，ContextMenu等视图相关的组件，但提供相关的API，方便用户扩展。