把图片公式转化为文本内容。vue项目中引入MathJax.js

这是个图片的公式，有img标签引入。

我们想要转成下面的效果：

在vue项目中引入MathJax.js

首先在index.html页面

 <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>  <!--不使用图片显示数学公式插件-->

因为有很多页面需要用到这个插件，所以我封装到了一个公共的js文件里面，想用的时候直接调用。

下面是自定义的util.js

export default {

            //公式转换的配置文件
    MathConfig(){

            this.loadjs('../../../static/js/jquery-1.9.1.min.js');//使用公式必须先加载js

            window.MathJax.Hub.Config({
                    showProcessingMessages: false,
                    messageStyle: "none",
                    extensions: ["tex2jax.js"],
                    jax: ["input/TeX", "output/HTML-CSS"],
                    tex2jax: {
                        inlineMath:  [ ["$", "$"] ],
                        displayMath: [ ["$$","$$"] ],
                        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
                        ignoreClass:"comment-content"
                    },
                    "HTML-CSS": {
                        availableFonts: ["STIX","TeX"],
                        showMathMenu: true
                    }
               });
        },

        //把图片公式替换成字符
    MathComputed(resourceLists){//resourceLists就是我想替换的里面可能有图片公式的内容。他如果是个数组直接用data接收，如果不是数组，push进data，让他成为数组。因为下面循环的所以这里必须放在数组里面。
        var data=[];
        if(resourceLists.length>0){data=resourceLists;}
        else{data.push(resourceLists);}

           for(var k=0;k<data.length;k++){//循环里面的题干内容

               var html ='<div><div class="mathDiv">'+data[k].questionstem+'</div></div>';

                var htmlObj = $(html); //将字符串转为jquery的dom对象
                var filterObj = htmlObj.find(".kfformula"); //对转换后的对象进行查询
               if(filterObj.length>0){//如果有公式。替换图片
                    for(var i=0;i<filterObj.length;i++){
                        var latex = '$' + $(filterObj[i]).attr('data-latex') + '$';
                        $(filterObj[i]).replaceWith(latex);
                    } 
                       data[k].questionstem=htmlObj.html();   
                }else{//没有公式直接取值
                         data[k].questionstem=data[k].questionstem;

                     }
                }
           }
            return data;
    },

}；

再具体的页面调用那写函数

import  util   from  '../static/util.js'

mounted() {
            util.MathConfig();//调用配置文件

}，

//转换页面的图片数学公式
                util.MathComputed(this.resourceLists);    //这里是this.resourceLists是接口获取的要转化的内容
                this.$nextTick(()=>{    //必须写这个表示dom元素都加载完了。
                      var mathdivs = $('#app').find(".mathDiv"); //对转换后的对象进行查询
                     for(var i=0;i<mathdivs.length;i++){  //必须循环然后才有作用，如果直接写#app不好用。所以这里就循环了
                          window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, $(mathdivs[i])[0]]);
                        }
                 })

可以看一下没有在vue项目中写的插件https://download.csdn.net/download/qq_33769914/10754774