Vue cli4.0 + MathLive 比较好的富文本编辑器（推荐）

基于前一篇Vue cli2.0 + MathLive 比较好的富文本编辑器（推荐） 有人问到在cli4.0 无法显示，这里作个简单演示。

效果图跟前一篇一样

示例演示

x01 环境

1. webpack cli4.0
2. html2canvas 插件

x02 配置

• 在index.html 下 引用 mathlive js

• 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文件内编写一个简单示例。

这个时候如果运行会发现 看不到公式

看不到公式

这个插件不知道为何默认将起不显示。

这个时候需要在 App.vue 内 添加CSS样式修改一下

body.ML__fonts-loading .ML__base {
    visibility: visible!important;
}

image.png

---

Reference

1. https://mathlive.io/
2. https://segmentfault.com/q/1010000017056065

Acknowledge
感觉 @小熙 同学配置上的一些指导。