基于vue框架数学公式编辑器
特性: 1、支持中文输入 2、字母、数字为斜体 3、支持常见数学、几何符号,支持符号内部嵌套公式 4、支持文本换行、支持数据导入导出
# 开发版
import Vue from 'vue'
import MathEditor from 'vue-math-editor'
import 'vue-math-editor/dist/math-editor.css'
// 在调用 new Vue() 启动应用之前执行
Vue.use(MathEditor)<!--
mode: edit 编辑模式 preview 预览模式 html 预览模式(html)
height 高度
normalFontSize 一级字体大小 (html模式下字体大小源于输入时字体大小)
smallFontSize 二级字体大小 (html模式下字体大小源于输入时字体大小)
-->
<template>
<math-editor
:mode="'edit' || 'preview' || 'html'"
:height="'180px'"
:normalFontSize="20"
:smallFontSize="20"
ref="mathTextEditor">
</math-editor>
</template>// 获取公式编辑器数据
const data = this.$refs.mathTextEditor.getValue()
// 设置公式编辑器的数据
this.$refs.mathTextEditor.setValue(data)| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| mode | 编辑器模式:编辑模式、预览模式, 预览模式无法编辑 |
string | edit / preview / html | preview |
| height | 编辑器高度 | string | - | 100% |
| normalFontSize | 文本字体大小 | number | - | 16 |
| smallFontSize | 角标字体大小, 例如平方的指数部分 |
number | - | 16 |
| textAreaWidth | 编辑器输入框宽度 | string | - | - |
| 方法 | 方法定义 | 参数 | 参数说明 |
|---|---|---|---|
| getValue | 获取公式编辑器的内容数据 | - | - |
| setValue | 设置公式编辑器的内容数据 | string | 公式编辑器的内容数据是具有一定的格式JSON, 因此setValue的数据只能来自getValue获取到的数据 |
| getHtml | 获取公式编辑器的HTML | - | - |
| setHtml | 设置公式编辑器的HTML | - | - |
