wangeditor富文本编辑器以文本的形式展示公式

最终展示的效果

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

//假设workContent是富文本写入的值

this.workContent = this.escapeHTML(this.workContent)

//通过escapeHTML方法转化传给后端
methods:{
  escapeHTML(str) {
      return str
        .replace(/&/g, '&')  // 将 & 替换为 &
        .replace(/</g, '&lt;')   // 将 < 替换为 &lt;
        .replace(/</g, '&gt;')   // 将 > 替换为 &gt;
        .replace(/"/g, '&quot;') // 将 " 替换为 &quot;
        .replace(/'/g, '&#39;'); // 将 ' 替换为 &#39;
   },
}

2.下载插件katex

npm install katex

//在所需页面引入katex

import katex from 'katex/dist/katex.mjs';
import 'katex/dist/katex.css';

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

//后台返给前端的还是转化完的信息
列如：workContent:"<p>sacs你的来看看了你看老大那看来你看了能看到那看来你打开了·</p><div><span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="x=\\frac{-b\\pm\\sqrt{{b}^{2}-4ac}}{2a}"></span></div><div><span data-w-e-type="formula" data-w-e-is-void data-w-e-is-inline data-value="{3}^{+9}"></span></div>"是这样数据

<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;
        },
}

原文地址：https://blog.csdn.net/bbkhhvv/article/details/143747049

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！