把圖片公式轉化為文字內容。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