最终展示的效果

1.首先将要传给后端的富文本值进行转化

//假设workContent是富文本写入的值this.workContent = this.escapeHTML(this.workContent)//通过escapeHTML方法转化传给后端
methods:{escapeHTML(str) {return str.replace(/&/g, '&amp;')  // 将 & 替换为 &amp;.replace(/</g, '&lt;')   // 将 < 替换为 &lt;.replace(/</g, '&gt;')   // 将 > 替换为 &gt;.replace(/"/g, '&quot;') // 将 " 替换为 &quot;.replace(/'/g, '&#39;'); // 将 ' 替换为 &#39;},
}

2.下载插件katex

npm install katex//在所需页面引入kateximport katex from 'katex/dist/katex.mjs';
import 'katex/dist/katex.css';

3.解析后台返给前端的值，并在页面展示

//后台返给前端的还是转化完的信息
列如：workContent:"&lt;p&gt;sacs你的来看看了你看老大那看来你看了能看到那看来你打开了·&lt;/p&gt;&lt;div&gt;&lt;span data-w-e-type=&quot;formula&quot; data-w-e-is-void data-w-e-is-inline data-value=&quot;x=\\frac{-b\\pm\\sqrt{{b}^{2}-4ac}}{2a}&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span data-w-e-type=&quot;formula&quot; data-w-e-is-void data-w-e-is-inline data-value=&quot;{3}^{+9}&quot;&gt;&lt;/span&gt;&lt;/div&gt;"是这样数据<div  v-html="renderedContent"></div>mounted(){this.renderKatexFormulas(this.unescapeHTML(this.workContent))
},
methods:{//首先调用unescapeHTML方法，将数据转化为标签格式unescapeHTML(str) {const entityMap = {"&amp;": "&","&lt;": "<","&gt;": ">","&quot;": '"',"&#39;": "'","&#x27;": "'",};return String(str).replace(/&(?:amp|lt|gt|quot|#39|#x27);/g,function (s) {return entityMap[s];});},//在调用renderKatexFormulas方法，进行解析async renderKatexFormulas(val) {// 创建一个临时的 div 元素来解析 HTML 字符串const tempDiv = document.createElement('div');tempDiv.innerHTML = val;// 查找所有包含 Katex 公式的 span 元素const formulaSpans = tempDiv.querySelectorAll('span[data-w-e-type="formula"]');// 遍历并渲染每个公式for (const span of formulaSpans) {const formula = span.getAttribute('data-value');try {// 使用 Katex 渲染公式const renderedFormula = await katex.renderToString(formula);// 替换原始的 span 元素为渲染后的 Katex 公式span.innerHTML = renderedFormula;} catch (error) {console.error('Katex rendering error for formula:', formula, error);}}// 将处理后的 HTML 内容设置为组件的数据属性this.renderedContent = tempDiv.innerHTML;},
}