> 注意:本项目利用了mathquill.js 实现可视化编辑功能,该库必须要jquery支持,并采用Mathjax3以上版本版本渲染
npm install formula-editor-plus> 注意:本项目利用了mathquill.js 实现可视化编辑功能,该库必须要jquery支持,并采用Mathjax3以上版本版本渲染
##### 一、引入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
toolsData | Array
titleTools | Array
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