基于前一篇Vue cli2.0 + MathLive 比较好的富文本编辑器（推荐） 有人问到在cli4.0 无法显示，这里作个简单演示。
效果图跟前一篇一样
示例演示
x01 环境
- webpack cli4.0
- html2canvas 插件
x02 配置
- 在index.html 下 引用 mathlive js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://unpkg.com/mathlive"></script>
<!-- built files will be auto injected -->
</body>
</html>
- main.js 设置 vue对象的 prototype
const MathLive = require('MathLive')
Vue.prototype.$MathLive = MathLive
由于在cli4.0 之后 没有webpack.base.config, 所以根据官方文档参考，在根项目下创建 vue.config.js 文件
并往内编写如下代码：
const path = require('path')
module.exports = {
configureWebpack: {
externals: {
'MathLive': 'MathLive'
}
}
}
vue.config.js
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;
}
</style>
这个时候如果运行会发现 看不到公式
看不到公式
这个插件不知道为何默认将起不显示。
这个时候需要在 App.vue 内 添加CSS样式修改一下
body.ML__fonts-loading .ML__base {
visibility: visible!important;
}
image.png
Reference
Acknowledge
感觉 @小熙 同学配置上的一些指导。
网友评论