发现一款更优秀的 公式 + 编辑器的插件 MathLive, 对比之前写的那篇文章 Vue + 富文本编辑器 编辑数学公式,个人感觉这个数学公式编辑更优美。
先上个图片直观看看。
示例演示
x01 环境
- webpack cli2.0
- html2canvas 插件
x02 配置
- 在index.html 下 引用 mathlive js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>hello_mathlive</title>
<link rel="stylesheet" href="./static/style.css" />
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/mathlive"></script>
<!-- built files will be auto injected -->
<script type="text/javascript">
</script>
</body>
</html>
- main.js 设置 vue对象的 prototype
const MathLive = require('MathLive')
Vue.prototype.$MathLive = MathLive
- 在 webpack.base.conf.js 设置 externals
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
externals:{
'MathLive':'MathLive'
}
}
x03 编写代码
在vue文件内编写一个简单示例。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<main>
<div class="mathfield" id="mf">
$$\nexists \exists f(x)+\frac{3i}{y\cdot h}$$
<!-- $$\frac{\text{a\textit{b\textbf{\textsf{c}d}}}}{\mathbf{e\mathit{f}\mathbb{G}}}$$ -->
</div>
<!-- <div class="output" id="latex"></div>
<div class="output" id="mathjson"></div>-->
</main>
<h3>---------- 测试 -----------</h3>
<button @click="bntClick">测试将公式转图片</button>
<button @click="bntClick2">清除公式</button>
<br />
<p>演示效果</p>
<img :src="testImg" alt />
<br />
<h3>--- 测试 canvas ---</h3>
<div class="myCanvas">
<canvas id="canvas" width="880" height="680" ref="canvas" />
</div>
</div>
</template>
<script>
import html2canvas from "html2canvas";
export default {
name: "HelloWorld",
data() {
return {
msg: "测试 mathlive",
testImg: "",
MathLive: null,
};
},
methods: {
bntClick() {
// var copyDom = this.$refs.ff.cloneNode(true); //克隆dom节点
var dom = document.querySelector(".ML__mathlive");
var copyDom = dom.cloneNode(true);
copyDom.style.position = "absolute"; // 绝对位置
copyDom.style.top = "0px"; // 顶部
copyDom.style.zIndex = "-100"; // 图层下面，好似不起作用 会先闪现一下，暂时未想到如何一开始就让其在图层下
document.body.appendChild(copyDom); //把copy的截图对象追加到body后面
var rect = copyDom.getBoundingClientRect(); //获取元素相对于视察的偏移量
var width = rect.width; //dom宽
// var height = rect.height; //dom高
var height = copyDom.clientHeight; //dom高
console.log(width, height);
console.log(rect);
var scale = 1; //放大倍数
var canvas = document.createElement("canvas"); //创建画布
canvas.width = width * scale; //canvas宽度
canvas.height = height * scale; //canvas高度
var ctx = canvas.getContext("2d");
ctx.scale(scale, scale);
html2canvas(copyDom, {
scale: scale,
canvas: canvas,
width: width,
heigth: height,
background: "#fff",
scrollY: 0,
scrollX: 0,
x: 0,
y: 0,
}).then((canvas) => {
let dataUrl = canvas.toDataURL("image/png");
console.log(dataUrl);
this.testImg = dataUrl;
copyDom.remove();
var img = new Image();
this.ctx.drawImage(canvas, 150, 150);
});
},
bntClick2() {
console.log(this.$MathLive)
// document
// .querySelector("#mathf")
// .mathfield.$insert("AAA", { insertionMode: "replaceAll" });
this.MathLive.$insert("AAA", { insertionMode: "replaceAll" })
console.log(this.MathLive.$text())
},
initCanvas() {
this.canvas = this.$refs.canvas; //指定canvas
this.ctx = this.canvas.getContext("2d"); //设置2D渲染区域
// this.ctx.lineWidth = 5; //设置线的宽度
},
initMathlive() {
this.MathLive = this.$MathLive.makeMathField("mf", {
smartMode: true,
virtualKeyboardMode: "manual",
onContentDidChange: (mf) => {
const latex = mf.$text();
},
});
},
},
mounted() {
console.log(this.$MathLive);
console.log(this);
this.initMathlive()
this.initCanvas();
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
body.ML__fonts-loading .ML__base {
visibility: visible !important;
}
</style>
x04 运行
yarn install
yarn run dev
你就可以看到 如下的效果
演示效果
Reference
Acknowledge
感觉 @小熙 同学配置上的一些指导。
