公式软键盘组件

[ForeverPx]

背景

团队一开始在富文本编辑器选型上受限于公式编辑器的集成问题，最终采用的是百度开发的UEditor，该富文本编辑器很好的集成了公式编辑器插件-kityformula-editor。在当时的版本，很好的支持了公式输入输出的基本功能。随着后续的版本迭代，为了符合产品的交互风格和功能设计，团队将kityformula-editor进行了二次的封装，最终在web端和android端实现了公式软键盘的效果。

特性

一、视觉

视觉上倾向于软键盘的风格，web端设计为弹窗式，android端设计的更像原生键盘。默认支持android和web两种视觉风格。

二、配置

默认支持设备、协议和宽度三组配置信息，均通过url的query传入。

设备（device）：支持web端和android端风格切换

协议（protocol）：默认支持iframe、webview、document custom event三种协议，用户如果想要拓展其他通信协议，可参考src/editor/Message下的文件实现自定义协议。

宽度（width）：公式软键盘支持等比例缩放，默认容器宽度使用window.innerWidth，如果想要自定义宽度，可通过该参数进行限制。

三、功能

• 支持调起和关闭
• 支持常用数学符号，英文字母等功能
• 支持以base64格式导出数据

效果预览

源码地址

https://github.com/SugarTurboS/Formula-Editor