0
点赞
收藏
分享

微信扫一扫

一款基于Latex语法和MathJax渲染的零基础公式编辑器,数学公式插件

悲催博士僧 2022-04-13 阅读 26

介绍

基于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

属性类型描述默认值
widthnumber编辑器宽度620
heightnumber编辑器高度272
mathJaxUrlstringMathJax的加载链接https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mathjax/3.2.0/es5/tex-svg.min.js
zIndexnumber容器的z-index

editor.menusConfig

属性类型描述默认值
presetsobject[]菜单预设公式//
operatorsstring[]菜单运算符//
greekLettersstring[]菜单希腊字母//
inequationstring[]菜单不等式//
calculusstring[]菜单微积分//
arrowsstring[]菜单箭头符号//
trigonometricstring[]菜单三角函数//

修改编辑器配置

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 吧~

举报

相关推荐

0 条评论