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

devtools/2024/11/20 2:57:06/

最终展示的效果

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

javascript">//假设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

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

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

javascript">//后台返给前端的还是转化完的信息
列如: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;},
}


http://www.ppmy.cn/devtools/135361.html

相关文章

移动零

移动零 1、题目描述2、解答思路 1、题目描述 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 2、解答思路 已知数组后端若干元素为0&…

React中使用echarts写出3d旋转扇形图

效果 技术 React TypeScript Less Echarts 代码块 import * as echarts from "echarts"; import React, { useEffect, useRef } from "react"; import "echarts-gl"; import "./index.less";const LeftEcharts () > {const ch…

WordCloudStudio:全面支持Web端,随时随地创建精彩文字云

在当今视觉化表达日益重要的时代&#xff0c;文字云成为了一种流行的内容呈现形式。无论是用于展示数据、分享创意&#xff0c;还是提高内容吸引力&#xff0c;文字云都能带来意想不到的效果。https://wordcloudstudio.com/ 作为文字云制作的领先工具&#xff0c;现在全面支持W…

Redis自学之路—基础数据结构具体方法解析(五)

目录 简介 数据结果具体方法解析 字符串(String) 操作命令 set设置值 setex setnx get获取值 del删除key mset批量设置值 incr数字运算 append追加指令 strlen字符串长度 getset设置并返回原值 setrange设置指定位置的字符 getrange截取字符串 命令的时间复杂…

Python学习26天

集合 # 定义集合 num {1, 2, 3, 4, 5} print(f"num&#xff1a;{num}\nnum数据类型为&#xff1a;{type(num)}") # 求集合中元素个数 print(f"num中元素个数为&#xff1a;{len(num)}") # 增加集合中的元素 num.add(6) print(num) # {1,2,3,4,5,6} # 删除…

基于微信小程序的河池旅游设计与实现

一、前言 随着移动互联网的快速发展&#xff0c;微信小程序以其便捷性、无需安装等优势受到广泛关注。河池拥有丰富的旅游资源&#xff0c;包括独特的自然风光&#xff08;如巴马长寿之乡的山水、宜州下枧河风光等&#xff09;、多彩的民族文化&#xff08;如壮族铜鼓文化、仫佬…

RTSP播放器EasyPlayer.js播放器UniApp或者内嵌其他App里面webview需要截图下载

EasyPlayer.js H5播放器&#xff0c;是一款能够同时支持HTTP、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WS、WEBRTC、FMP4视频直播与视频点播等多种协议&#xff0c;支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式&#xff0c;支持MSE、WASM、WebCodec等多种解码方…

千帆启航,人才先行 | 讯方技术HarmonyOS人才训练营

HarmonyOS NEXT鸿蒙星河版已于1月份面向开发者开放申请&#xff0c;鸿蒙原生应用厂商正在加速开发&#xff0c;预计2024年中旬&#xff0c;将覆盖5000个头部App&#xff0c;鸿蒙原生应用版图基本成型&#xff0c;未来HarmonyOS将继续赋能千行百业。 为响应鸿蒙生态发展对人才需…