这篇文章主要介绍公式编辑器渲染部分的实现，包括原生的渲染能力，react 渲染，vue 渲染
相关文章
第一篇文章中介绍了公式编辑器的基本使用方法：（1）公式编辑器: shuttle-formula
第二篇文章中介绍了公式编辑器的核心包部分的实现：（2）公式编辑器: shuttle-formula
原生渲染能力
可以直接从 shuttle-formula/render 部分导出，公式编辑器的渲染主要包括三个部分：用户输入、公式解析、相关提示
用户输入
- 在用户输入的节点需要支持用户可以直接输入任意的字符，同时可以从提示选择的方式输入
- 另外需要特别处理的是显示的内容并非公式中真实的内容，（例如：求和函数在公式中用"@sum" 表示，但是显示到界面上应该是"@求和"，或者变量其路径可能是生成的唯一键，但是显示到界面上的应该是用户能够理解的名称），所以一旦识别为一个变量或者函数，在显示界面上需要使用其 label 来替换，同时这将被视作一个字符，光标不可以被定位到 label 中间，若删除时也将被一同删除，例如显示为"@求和"，应该将"求和"看为一个字符，删除时也将一次删除"求和"
- 实现思路：
- 利用 html 的 contenteditable 属性，用户可以直接输入任意的字符
- 手动处理光标的位置，防止光标出现在 label 中间
- 拦截 keydown 事件，处理特殊的字符，例如：空格、制表符、换行符、删除键、箭头键等
- 拦截 copy、cut、paste 等事件，使其复制操作复制的并非显示的内容，而是公式中的实际内容
- 拦截 compositionstart、compositionupdate、compositionend 事件来处理组合字符的输入，例如：中文
- 拦截 click、focus、blur 等事件，处理光标的位置
公式解析
在用户每次输入后都需要将新的输入内容解析（利用 shuttle-formula/core 进行解析），以获得相关的提示信息，例如输入变量时可以提示其下一层级的变量；若经过语法检查发现公式中有错误，则可以将对应错误提示出来
由于公式解析是一个比较耗时的过程，同时又不影响用户的输入，所以这里可以采用 webWorker，将复杂的解析过程都放到 webWorker 中处理，处理完成后再将结果返回给主线程，主线程再将结果展示到界面上
相关提示
- 变量提示：在用户输入变量时，可以以当前输入的为搜索内容来筛选变量，并展示出来，用户可以直接点击进行变量的输入
- 函数提示：在用户输入函数时，可以以当前输入的为搜索内容来筛选函数，并展示出来，用户可以直接点击惊喜函数的输入
- 错误提示：当公式解析中有错误时，可以获取到错误，并定位到错误的位置，将错误展示出来
react 渲染
可以直接从 shuttle-formula/render-react 部分导出，这部分将原生渲染封装为一个 react 组件，更符合 react 编码的习惯
同时提供了自定义 token 渲染、函数提示、变量提示、错误提示的组件，组件会通过 createPortal 将 react 渲染后的结果挂载到原生 dom 上
vue 渲染
可以直接从 shuttle-formula/render-vue 部分导出，这部分将原生渲染封装为一个 vue 组件，更符合 vue 编码的习惯
同时提供了自定义 token 渲染、函数提示、变量提示、错误提示的组件，组件会通过 Teleport 将 vue 渲染后的结果挂载到原生 dom 上
总结
公式编辑器支持原生 js 渲染、react 渲染、vue 渲染；react 和 vue 渲染都是基于原生的基础之上，封装了与 react 和 vue 对接的方式；更加符合 react 和 vue 的开发习惯。
最后推荐一下低代码平台我的应用，可以直接去下载后私有化部署且完全免费。开源不易，望多多支持，也可通过平台提出宝贵意见，感谢！