可视化数学公式编辑器&latex公式编辑器

> 注意：本项目利用了mathquill.js 实现可视化编辑功能，该库必须要jquery支持，并采用Mathjax3以上版本版本渲染

$3

> 注意：使用前需要在页面引入

##### 一、引入JS
``javascript


`
上述两个我采用bootcdn，此方式为demo，大家需要自己把js放到自己服务器下，安全一点

##### 二、配置好渲染latex的js配置，目前我采用一MathJax3+，配置如下
`javascript

`

##### 三、引入formula-editor
1. main.js
`javascript
npm install formula-editor-plus
`
`javascript
// es
import FormulaEditor from 'formula-editor-plus/es'
import 'formula-editor-plus/dist/es/style.css'
app.use(FormulaEditor);
`
2. 组件中使用
`javascript
import { FormulaEditor } from 'formula-editor-plus/es'
import 'formula-editor-plus/dist/es/style.css'
`

`javascript



`

##### 方法和属性
类型
`javascript
// 公式
interface DataItem {
text: string,
latex: string,
id: number | string
}

// 顶部菜单说明
interface IListItem {
id: number | string,
column: number,
title: string,
data: DataItem[]
}
``

参数 | 类型 | 说明 | 默认值
---|-----------------|---|---
latex | String | 编辑器初始化渲染的latex公式 | ''
commonMath | Array | 右侧常用公式 list | 默认值查看预览效果
toolsData | Array | 顶部菜单公式 list | []
titleTools | Array | 编辑器中title常用latex list | 默认值查看预览效果
latexText() | Function | 组件实例方法，获取公式的latex代码，ref.latexText()| /
svgHtml() | Function | 组件实例方法，获取公式的svg代码，ref.svgHtml() | /
exportSvg() | Function | 组件实例方法，获取公式为svg进行导出，ref.exportSvg() | /
svgToImage() | Function | 组件实例方法，获取公式为图片进行导出下载，ref.svgToImage() | /
insertLatex(DataItem) | Function | 组件实例方法，在编辑器光标处插入latex ref.insertLatex() | /

###### 部分预览
1.可视化编辑
!Example Image

2.latex编辑
!Example Image

3.顶部符号
!Example Image

4.字体设置
!Example Image

5.颜色设置
!Example Image