聲明：該文章來(lái)自（前端資源推薦）版權(quán)由原作者所有，K2OS渲染引擎提供網(wǎng)頁(yè)加速服務(wù)。

文章來(lái)自公眾號(hào)：前端資源推薦

mp-html 是一個(gè)用于小程序的富文本組件，支持渲染和編輯 HTML 內(nèi)容。兼容多個(gè)平臺(tái)，包括微信、QQ、百度、支付寶、頭條和 uni-app，幫助開(kāi)發(fā)者在小程序中輕松實(shí)現(xiàn)富文本功能。

?安裝使用：

//?npm
npm?install?mp-html
//?use
{
??"usingComponents":?{
????"mp-html":?"/components/mp-html/index"
??}
}
//?template
<view>
??<mp-html?:content="html"?/>
</view>

1. 渲染效果

加載提示：在內(nèi)容加載完成前，顯示自定義的加載提示。

自動(dòng)設(shè)置標(biāo)題：自動(dòng)將 <title> 標(biāo)簽的內(nèi)容設(shè)置為頁(yè)面標(biāo)題。

長(zhǎng)按復(fù)制：支持長(zhǎng)按文本進(jìn)行復(fù)制。

支持 rpx：支持使用 rpx 單位，適應(yīng)不同屏幕寬度。

支持 HTML 實(shí)體：支持常見(jiàn)的 HTML 實(shí)體字符。

2. 圖片效果

占位圖：為未加載完成的圖片提供占位圖。

懶加載：支持圖片懶加載，優(yōu)化性能。

自動(dòng)預(yù)覽：點(diǎn)擊圖片可自動(dòng)放大預(yù)覽。

預(yù)覽高清圖：支持為圖片設(shè)置高清預(yù)覽圖。

長(zhǎng)按彈出菜單：長(zhǎng)按圖片可彈出菜單進(jìn)行操作。

裝飾圖片處理：支持裝飾性圖片的特殊處理。

支持原大小顯示：圖片按原大小顯示，支持自定義寬高。

支持 SVG：支持 SVG 圖片的顯示。

3. 鏈接效果

支持設(shè)置多種狀態(tài)下的樣式：自定義鏈接的默認(rèn)和點(diǎn)擊狀態(tài)樣式。

錨點(diǎn)跳轉(zhuǎn)：支持頁(yè)面內(nèi)錨點(diǎn)跳轉(zhuǎn)。

跳轉(zhuǎn)內(nèi)部路徑：支持跳轉(zhuǎn)到小程序內(nèi)的其他頁(yè)面。

復(fù)制外部鏈接：點(diǎn)擊外部鏈接時(shí)自動(dòng)復(fù)制到剪貼板。

4. 表格效果

支持獨(dú)立橫向滾動(dòng)：表格支持獨(dú)立橫向滾動(dòng)。

支持常用表格屬性：支持 border, cellspacing, cellpadding, align 等屬性。

支持含有合并單元格的表格：支持顯示包含合并單元格的表格。

5. 列表效果

支持多層嵌套：支持多層列表嵌套。

支持多種有序列表格式：支持?jǐn)?shù)字、字母、羅馬數(shù)字等多種有序列表格式。

支持不顯示標(biāo)號(hào)：支持隱藏列表項(xiàng)的標(biāo)號(hào)。

6. 音視頻效果

自動(dòng)暫停：播放一個(gè)音視頻時(shí)自動(dòng)暫停其他。

多源加載：支持為音視頻設(shè)置多個(gè)源文件。

自動(dòng)添加控件：自動(dòng)為音視頻添加播放控件。

7. 樣式設(shè)置

行內(nèi)樣式：支持直接在標(biāo)簽中設(shè)置行內(nèi)樣式。

tag-style：為特定標(biāo)簽設(shè)置默認(rèn)樣式。

外部樣式：通過(guò)配置文件添加全局樣式。

支持自定義樣式：支持通過(guò) !important 調(diào)整樣式優(yōu)先級(jí)。

8. 其他功能

支持多平臺(tái)：兼容微信、QQ、百度、支付寶、頭條等平臺(tái)。

輕量化設(shè)計(jì)：組件體積小，性能優(yōu)化。

豐富的擴(kuò)展功能：支持關(guān)鍵詞搜索、內(nèi)容編輯、LaTeX 公式等插件。

項(xiàng)目地址

GitHub：https://github.com/jin-yufeng/mp-html

官方文檔：https://jin-yufeng.github.io/mp-html/#/overview/quickstart

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/