(3)公式编辑器: shuttle-formula

这篇文章主要介绍公式编辑器渲染部分的实现,包括原生的渲染能力,react 渲染,vue 渲染

相关文章

第一篇文章中介绍了公式编辑器的基本使用方法:(1)公式编辑器: shuttle-formula

第二篇文章中介绍了公式编辑器的核心包部分的实现:(2)公式编辑器: shuttle-formula

原生渲染能力

可以直接从 shuttle-formula/render 部分导出,公式编辑器的渲染主要包括三个部分:用户输入、公式解析、相关提示

用户输入

  1. 在用户输入的节点需要支持用户可以直接输入任意的字符,同时可以从提示选择的方式输入
  2. 另外需要特别处理的是显示的内容并非公式中真实的内容,(例如:求和函数在公式中用"@sum" 表示,但是显示到界面上应该是"@求和",或者变量其路径可能是生成的唯一键,但是显示到界面上的应该是用户能够理解的名称),所以一旦识别为一个变量或者函数,在显示界面上需要使用其 label 来替换,同时这将被视作一个字符,光标不可以被定位到 label 中间,若删除时也将被一同删除,例如显示为"@求和",应该将"求和"看为一个字符,删除时也将一次删除"求和"
  3. 实现思路:
    • 利用 html 的 contenteditable 属性,用户可以直接输入任意的字符
    • 手动处理光标的位置,防止光标出现在 label 中间
    • 拦截 keydown 事件,处理特殊的字符,例如:空格、制表符、换行符、删除键、箭头键等
    • 拦截 copy、cut、paste 等事件,使其复制操作复制的并非显示的内容,而是公式中的实际内容
    • 拦截 compositionstart、compositionupdate、compositionend 事件来处理组合字符的输入,例如:中文
    • 拦截 click、focus、blur 等事件,处理光标的位置

公式解析

在用户每次输入后都需要将新的输入内容解析(利用 shuttle-formula/core 进行解析),以获得相关的提示信息,例如输入变量时可以提示其下一层级的变量;若经过语法检查发现公式中有错误,则可以将对应错误提示出来

由于公式解析是一个比较耗时的过程,同时又不影响用户的输入,所以这里可以采用 webWorker,将复杂的解析过程都放到 webWorker 中处理,处理完成后再将结果返回给主线程,主线程再将结果展示到界面上

相关提示

  1. 变量提示:在用户输入变量时,可以以当前输入的为搜索内容来筛选变量,并展示出来,用户可以直接点击进行变量的输入
  2. 函数提示:在用户输入函数时,可以以当前输入的为搜索内容来筛选函数,并展示出来,用户可以直接点击惊喜函数的输入
  3. 错误提示:当公式解析中有错误时,可以获取到错误,并定位到错误的位置,将错误展示出来

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 的开发习惯。

最后推荐一下低代码平台我的应用,可以直接去下载后私有化部署且完全免费。开源不易,望多多支持,也可通过平台提出宝贵意见,感谢!

相关推荐
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发4 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码5 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记5 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante6 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam7 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript