需求：使用编辑器编辑数学公式，右侧实时预览

mathjax官网：https://www.mathjax.org/

1、在vue项目中index.html文件中引入mathjax.js（插件在官网github）

<script type="text/javascript" async src="xxx/MathJax-2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

2、配置js

MathJax.Hub.Config({
   //去掉加载信息
    showProcessingMessages: false,
    messageStyle: "none",
    tex2jax: {
        processEscapes:true,
        inlineMath: [['$', '$'], ["\\(", "\\)"]], //行内公式选择符
        displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
        skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
    },
    "HTML-CSS": {
      showMathMenu: false,//关闭右键菜单
    }
});

3、封装components通用组件

<template>
       <div :id="'question-id'+id" v-if='showType' class="qBoxssss"> 
            {{this.value}}
        </div>
</template>

<script>
    export default {
        props: {
            id:{
                type:String,
                default:'zzz',
            },
            paperType:{
                type: Boolean,
                default: false
            },
            qid: {
                type: [String,Number],
                default: 1
            },
            scores: {
                type: [String,Number],
                default: 0
            },
            value: {}
        },
        data() {
            return {
                showType:true,
                rawHtml:'',
                heightString: 'height: 500px;', 
                answer: '',
                imgIndex: 0,
            };
        },
        mounted(){
            var ids = 'question-id'+this.id
            document.getElementById(ids).innerHTML = ''
            // if(this.paperType === true){
            //     document.getElementById(ids).innerHTML = this.id+'：'+'（分数：'+this.scores+'）<div class="qBoxFixedssss">' + this.value +'</div>'
            // }else{
                document.getElementById(ids).innerHTML = this.value
            // }
            this.commonsVariable.MathQueue(ids);//传入组件id，让组件被MathJax渲染
        },
        methods: {

        },
        watch: {
            //监听prop传的value，如果父级有变化了，将子组件的myValue也跟着变，达到父变子变的效果
            //这里看需求，若不使用监听，直接放在axios请求方法中也是可以的
            value(value) {
                this.showType = false
                // titleDiv
                this.value = value;
                this.answer = '';
                this.showType = true
                this.$nextTick(function () { //这里要注意，使用$nextTick等组件数据渲染完之后再调用MathJax渲染方法，要不然会获取不到数据
                    if(this.commonsVariable.isMathjaxConfig){//判断是否初始配置，若无则配置。
                        this.commonsVariable.initMathjaxConfig();
                    }
                    var ids = 'question-id'+this.id
                    document.getElementById(ids).innerHTML = ''
                    this.commonsVariable.MathQueue(ids);//传入组件id，让组件被MathJax渲染
                })
            },
            answer(newVal) {
                this.$emit('trouble', newVal)
            }
        },

    }
</script>
<style >
    #question-id{ padding: 30px 0;}
    .qBoxssss{line-height:22px; font-size:12px; font-family: '宋体'; color: #000; width:100%;line-height: 30px !important;}
    .qBoxssss p{ line-height: 30px !important;}
    .qBoxFixedssss{ display: block;}
</style>

4、引入组件，在页面中调用(value为实时获取编辑器内容的html,一个页面调用多次需要id是唯一的)

<mathjax :value='value' :id="'gapFillingQuestions'+info.refs+item.id" ></mathjax>