基于前一篇Vue cli2.0 + MathLive 比較好的富文本編輯器（推薦） 有人問到在cli4.0 無法顯示，這里作個簡單演示。
效果圖跟前一篇一樣
示例演示
x01 環(huán)境
- 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, 所以根據官方文檔參考，在根項目下創(chuàng)建 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節(jié)點
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"); //創(chuàng)建畫布
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渲染區(qū)域
// 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>
這個時候如果運行會發(fā)現 看不到公式
看不到公式
這個插件不知道為何默認將起不顯示。
這個時候需要在 App.vue 內 添加CSS樣式修改一下
body.ML__fonts-loading .ML__base {
visibility: visible!important;
}
image.png
Reference
Acknowledge
感覺 @小熙 同學配置上的一些指導。
