markdown中插入視頻前臺渲染出來導致<video>等標簽被轉義成字符解決辦法：
如圖：
在markdown里面插入視頻，可以按照下面寫法，哈哈，雖然很撈，但是還是可以滿足的。
<video src="https://xxxxxxxxxxxxxx.mp4" controls="true" style="max-width: 100%;height: auto;"></video>
前臺打印出來是這樣的：
可以看到，標簽的< > 等已經被轉義字符了。所以這就需要我們在前端獲取的視頻把這個字符還原的，使用到了：
HtmlDecode： 把經過 HtmlEncode編碼過的字符解碼 ，還原成原始字符。
具體使用：
你可以使用npm命令來安裝`he`庫，具體步驟如下：
1. 打開終端或命令行工具，進入Vue項目的根目錄。
2. 運行以下命令安裝`he`庫：
npm install he --save
這將會在你的Vue項目中安裝`he`庫，并將其保存到`package.json`文件的依賴項中。
3. 在需要使用`he`庫的Vue組件或JavaScript文件中導入它：
import he from 'he';
4. 現在你就可以在Vue組件或JavaScript文件中使用`he`庫提供的方法了。例如，你可以使用`he.decode`方法來進行HTML解碼：
const htmlString = '<p>Hello, <strong>world</strong>!</p>'; const decodedString = he.decode(htmlString); console.log(decodedString); // 輸出: "<p>Hello, <strong>world</strong>!</p>"
5.markdown在vue頁面的中具體使用如下：
import he from 'he'; export default { data() { return { article: {}, articleContentHtml: '' } }, methods: { htmlDecode(value) { // 自定義轉義邏輯 return he.decode(value); }, fetchData() { // 假設這里是獲取數據的異步請求 // 在請求成功后執行以下代碼 if (!this.$common.isEmpty(res.data)) { this.article = res.data; //獲取所有數據 this.getNews(); const md = new MarkdownIt({ breaks: true }); this.articleContentHtml = md.render(this.article.articleContent); //渲染文章的所有內容 this.articleContentHtml = this.htmlDecode(this.articleContentHtml); // 使用HtmlDecode轉義還原字符 } } }, created() { this.fetchData(); } }
這樣通過轉義了，可解決視頻加載的問題。
具體用法自己按照實際情況來看：
HtmlEncode： 將 Html 源文件中不允許出現的字符進行編碼。例如："<"、">"、"&" 等。
HtmlDecode： 把經過 HtmlEncode編碼過的字符解碼 ，還原成原始字符。
UrlEncode： 將 Url 中不允許出現的字符進行編碼。例如：":"、"/"、"?" 等。
UrlDecode： 把經過 UrllEncode編碼過的字符解碼 ，還原成原始字符。
浙公網安備 33010602011771號