- 零基础即可编辑公式
- 支持自定义编辑器配置和风格
- 支持二次编辑公式
- 支持作为插件和富文本编辑器一起使用
介绍
基于Latex语法和MathJax渲染的公式编辑器插件,易用、可二次编辑、内容可视化。
标题为什么会开发该插件?
之前调研过很多开源的公式编辑插件,主要有以下几个问题:
- 编辑好的公式最终只能通过生成图片使用
- 纯粹基于Latex语法,没有对应的基础无从下手
- 体积大或非开源
安装和使用
// 编辑器容器
<div id="test"></div>
NPM
npm i easy-formula-editor
import formulaEditor from "easy-formula-editor";
const editor = new formulaEditor();
editor.create('#test');
CDN
<script type="text/javascript" src="../dist/formula-editor.min.js"></script>
<script type="text/javascript">
const editor = new formulaEditor();
editor.create('#test');
</script>
导出
// latex 公式
editor.latex.text()
// html 公式
editor.$textSvgElem.html()
在线示例
公式编辑器
配置项
editor.config
属性 |
类型 |
描述 |
默认值 |
width |
number |
编辑器宽度 |
620 |
height |
number |
编辑器高度 |
272 |
mathJaxUrl |
string |
MathJax的加载链接 |
https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjax/3.2.0/es5/tex-svg.min.js |
zIndex |
number |
容器的z-index |
无 |
editor.menusConfig
属性 |
类型 |
描述 |
默认值 |
presets |
object[] |
菜单预设公式 |
// |
operators |
string[] |
菜单运算符 |
// |
greekLetters |
string[] |
菜单希腊字母 |
// |
inequation |
string[] |
菜单不等式 |
// |
calculus |
string[] |
菜单微积分 |
// |
arrows |
string[] |
菜单箭头符号 |
// |
trigonometric |
string[] |
菜单三角函数 |
// |
修改编辑器配置
const editor = new formulaEditor();
// 例如:修改高度
editor.config.height = 400;
editor.create('#test');
配置菜单
const editor = new formulaEditor();
// 例如:增加预设公式
editor.menusConfig.presets.push({ label: "自定义", value: "x+2y=7" });
editor.create('#test');
自定义风格
:root {
--me-theme: #bcd4e7;
--me-theme-light: #d0e3f2;
--me-hover: #f1f2f4;
--me-border: #ddd;
--me-gray: ##666;
}
编辑器颜色是通过以上的5个css变量控制,要自定义色彩搭配只需要修改对应的值,例如:
// 打开控制台,输入
var r = document.querySelector(':root');
r.style.setProperty('--me-theme', '#9b8ea9');
r.style.setProperty('--me-theme-light', '#d3ccd6');
公式颜色和大小
编辑器生成的公式未自带颜色和字体大小,因为这些功能有点鸡肋,你可以通过以下方式去控制:
<div style="font-size: 20px;color: red;">获取到的公式</div>
新增自定义菜单
如果你有这个需求,请联系邮箱:hanson247@163.com
多语言
暂未支持
与富文本编辑器一起使用
本项目的主要实现借鉴了wangeditor,所以如果与wangeditor深度集成,可以减少60%以上的代码量。
下面示范了如何作为wangeditor的菜单插件:
源码
https://github.com/hansonGong/formula-editor
最后:如果该插件能够帮助到你,麻烦动动小手给个 star 吧~