tinymce MathType 公式在页面上不展示

574 阅读1分钟

在index.html中引入

 <script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">

创建一个MathJax.js文件,跟main.js同级

let isMathjaxConfig = false; //用于标识是否配置
const initMathjaxConfig = () => {
    if (!window.MathJax) {
        return;
    }
    window.MathJax.Hub.Config({
        showProcessingMessages: false, //关闭js加载过程信息
        messageStyle: "none", //不显示信息
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
            inlineMath: [
                ["$", "$"],
                ["\\(", "\\)"]
            ], //行内公式选择符
            displayMath: [
                ["$$", "$$"],
                ["\\[", "\\]"]
            ], //段内公式选择符
            skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
        },
        "HTML-CSS": {
            availableFonts: ["STIX", "TeX"], //可选字体
            showMathMenu: false //关闭右击菜单显示
        }
    });
    isMathjaxConfig = true; //配置完成,改为true
};
const MathQueue = function(elementId) {
    if (!window.MathJax) {
        return;
    }
    window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]);
};


export default {
    isMathjaxConfig,
    initMathjaxConfig,
    MathQueue,
}

在main.js中注册

import MathJax from './MathJax'
Vue.prototype.MathJax = MathJax;

在页面中使用

 created() {
        this.formatMath()
  },
  methods:{
       formatMath() {
            setTimeout(() => {
                this.$nextTick(() => {
                    if (this.MathJax.isMathjaxConfig) {
                        this.MathJax.initMathjaxConfig();
                    }
                    //这个地方的mytinyEdit是对应要渲染数学公式的dom的class
                    this.MathJax.MathQueue('mytinyEdit');
                })
            }, 500)
        },
  
  },
  watch:{
         stemValue(newValue) {
         //stemValue 编译器v-model绑定的值
            this.$nextTick(function () {
                if (this.MathJax.isMathjaxConfig) { // 判断是否初始配置,若无则配置。
                    this.MathJax.initMathjaxConfig()
                }
                this.MathJax.MathQueue('mytinyEdit')// 传入组件id,让组件被MathJax渲染
            })

        },
  }