mp html
v2.5.0
一個強大的小程序富文本組件
uni-app中使用table 、 video 、 svg等）latex公式等）≈25KB ， 9KB gzipped ）查看功能介紹了解更多
npm方式
在項目目錄下安裝組件包
npm install mp-html開發者工具中勾選使用npm 模块（若沒有此選項則不需要）並點擊工具- 构建npm
在需要使用頁面的json文件中添加
{
"usingComponents" : {
"mp-html" : " mp-html "
}
}在需要使用頁面的wxml文件中添加
< mp-html content =" {{html}} " />在需要使用頁面的js文件中添加
Page ( {
onLoad ( ) {
this . setData ( {
html : '<div>Hello World!</div>'
} )
}
} )源碼方式
將源碼中對應dist/platform platform ）拷貝到components目錄下，更名為mp-html
在需要使用頁面的json文件中添加
{
"usingComponents" : {
"mp-html" : " /components/mp-html/index "
}
}後續步驟同上
查看快速開始了解更多
源碼方式
將源碼中dist/uni-app內的內容拷貝到項目根目錄下可以直接通過插件市場引入
在需要使用頁面的vue文件中添加
< template >
< view >
< mp-html :content = " html " />
</ view >
</ template >
< script >
import mpHtml from ' @/components/mp-html/mp-html '
export default {
// HBuilderX 2.5.5+ 可以通过 easycom 自动引入
components : {
mpHtml
},
data () {
return {
html : ' <div>Hello World!</div> '
}
}
}
</ script > npm方式
在項目目錄下安裝組件包
npm install mp-html在需要使用頁面的vue文件中添加
< template >
< view >
< mp-html :content = " html " />
</ view >
</ template >
< script >
import mpHtml from ' mp-html/dist/uni-app/components/mp-html/mp-html '
export default {
// 不可省略
components : {
mpHtml
},
data () {
return {
html : ' <div>Hello World!</div> '
}
}
}
</ script >使用cli方式運行的項目，通過npm方式引入時，需要在vue.config.js中配置transpileDependencies ，詳情可見#330
如果在nvue中使用還要將dist/uni-app/static目錄下的內容拷貝到項目的static目錄下，否則無法運行
查看快速開始了解更多
| 屬性 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| container-style | String | 容器的樣式（2.1.0+） | |
| content | String | 用於渲染的html 字符串 | |
| copy-link | Boolean | true | 是否允許外部鏈接被點擊時自動複製 |
| domain | String | 主域名（用於鏈接拼接） | |
| error-img | String | 圖片出錯時的佔位圖鏈接 | |
| lazy-load | Boolean | false | 是否開啟圖片懶加載 |
| loading-img | String | 圖片加載過程中的佔位圖鏈接 | |
| pause-video | Boolean | true | 是否在播放一個視頻時自動暫停其他視頻 |
| preview-img | Boolean | true | 是否允許圖片被點擊時自動預覽 |
| scroll-table | Boolean | false | 是否給每個表格添加一個滾動層使其能單獨橫向滾動 |
| selectable | Boolean | false | 是否開啟文本長按複製 |
| set-title | Boolean | true | 是否將title 標籤的內容設置到頁面標題 |
| show-img-menu | Boolean | true | 是否允許圖片被長按時顯示菜單 |
| tag-style | Object | 設置標籤的默認樣式 | |
| use-anchor | Boolean | false | 是否使用錨點鏈接 |
查看屬性了解更多
| 名稱 | 觸發時機 |
|---|---|
| load | dom 樹加載完畢時 |
| ready | 圖片加載完畢時 |
| error | 發生渲染錯誤時 |
| imgtap | 圖片被點擊時 |
| linktap | 鏈接被點擊時 |
查看事件了解更多
組件實例上提供了一些api方法可供調用
| 名稱 | 作用 |
|---|---|
| in | 將錨點跳轉的範圍限定在一個scroll-view 內 |
| navigateTo | 錨點跳轉 |
| getText | 獲取文本內容 |
| getRect | 獲取富文本內容的位置和大小 |
| setContent | 設置富文本內容 |
| imgList | 獲取所有圖片的數組 |
| pauseMedia | 暫停播放音視頻（2.2.2+） |
| setPlaybackRate | 設置音視頻播放速率（2.4.0+） |
查看api 了解更多
除基本功能外，本組件還提供了豐富的擴展，可按照需要選用
| 名稱 | 作用 |
|---|---|
| audio | 音樂播放器 |
| editable | 富文本編輯 |
| emoji | 解析emoji |
| highlight | 代碼塊高亮顯示 |
| markdown | 渲染markdown |
| search | 關鍵詞搜索 |
| style | 匹配style 標籤中的樣式 |
| txv-video | 使用騰訊視頻 |
| img-cache | 圖片緩存by @PentaTea |
| latex | 渲染latex 公式by @Zeng-J |
| card | 卡片展示by @whoooami |
查看插件了解更多
| 官方示例 | 歡喜商城 | 多么生活 | 食法查 | 微慕 | 古典文學名著閱讀 |
|---|---|---|---|---|---|
 |  |  |  |  |  |
| 科學複習 | 程序員技術之旅 | 典典博客 | 優秀筆記 | 365 刷題 | 同城共享書 |
|---|---|---|---|---|---|
 |  |  |  |  |  |
| 技術源share | 你的代碼寫的真棒 | 諦否 | 小莫唐尼 | 模版演示 | AI瓦力 |
|---|---|---|---|---|---|
 |  |  |  |  |  |
以上排名不分先後，更多可見使用案例收集（歡迎添加）
許可您可以免費的使用（包括商用）、複製或修改本組件MIT License
在用於生產環境前務必經過充分測試，由插件bug帶來的損失概不負責（可以自行修改源碼）
聯繫歡迎加入QQ交流群：
群1（已滿）： 699734691
群2（已滿）： 778239129
群3： 960265313 
支持
v2.5.0 (20240422)
U play事件增加返回src等信息詳細U preview-img屬性支持設置為all開啟base64圖片預覽詳細U editable插件增加簡易模式（點擊文字直接編輯）U latex插件支持塊級公式詳細F修復了表格部分情況下背景丟失的問題詳細F修復了部分svg無法顯示的問題詳細F修復了uni-app包h5和app端部分情況下樣式無法識別的問題詳細F修復了latex插件部分情況下顯示不正確的問題詳細F修復了editable插件表格無法刪除的問題F修復了editable插件uni-app包vue3 h5端點擊圖片報錯的問題F修復了editable插件uni-app包點擊表格沒有菜單欄的問題v2.4.3 (20240121)
A增加card 插件詳細by @whoooamiF修復了svg中包含foreignobject可能不顯示的問題詳細F修復了合併單元格的表格部分情況下顯示不正確的問題詳細F修復了img標籤設置object-fit無效的問題詳細F修復了latex插件公式會換行的問題詳細F修復了uni-app包editable和audio插件共用時點擊audio無法編輯的問題詳細by @whoooamiF修復了支付寶小程序設置了寬高的圖片可能顯示不正常的問題詳細F修復了uni-app包微信小程序部分情況下圖片會報錯replace of undefined的問題F修復了uni-app包快手小程序圖片不顯示的問題詳細從1.x的升級方法可見更新指南
查看更新日誌了解更多
