前端小程序UI组件富文本【免费下载链接】mp-html小程序富文本组件支持渲染和编辑 html支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用项目地址https://gitcode.com/gh_mirrors/mp/mp-html点击查看免费下载mp-html 是一款支持在微信、QQ、百度、支付宝、头条小程序以及 uni-app含 H5、App等多端渲染富文本的开源组件其全部渲染行为都通过一组声明式属性控制。本文以 docs/basic/prop.md 为骨架逐项讲解container-style、content、domain、selectable、use-anchor等 15 个属性的功能、类型、默认值与适用场景并结合 mp-html.vue、index.js 的属性声明、parser.js 的解析逻辑与 node.vue 的事件处理源码带你从会配置进阶到懂原理。读完本文你将能根据业务需求长按复制、图片懒加载、锚点跳转、外链处理、表格滚动等精准选配属性并理解每个属性在底层解析与渲染链路中的实际作用。通用提示需要将某个属性设置为false时在模板中应写作attr{{false}}而不是直接写attrfalse字符串会被视为true。此外两套实现原生小程序版与 uni-app 版对属性类型的声明略有差异uni-app 版部分属性声明为[Boolean, String]见 mp-html.vue原生小程序版则通过type: null放宽校验见 index.js因此部分属性支持字符串取值如selectableforce、preview-imgall。container-style容器样式定制功能设置整个富文本容器的样式类型String支持版本2.1.0 起支持该属性直接作用于组件根节点。在 uni-app 实现中根节点模板为view :stylecontainerStyle见 mp-html.vue在原生小程序版中containerStyle同样作为 property 透传见 index.js。常用写法示例padding: 5px; /* 设置内边距 */ font-size: 18px; /* 设置默认的字体大小 */ overflow: hidden; /* 禁用横向滚动 */ display: inline; /* 行内显示 */ white-space: pre-wrap; /* 保留空格和换行符 */ white-space: pre-line; /* 保留换行符 */注意根节点自身带有padding: 1px 0; overflow-x: auto等默认样式见 mp-html.vue 的._root样式container-style以行内 style 的形式叠加可用于覆盖默认的横向滚动与内边距行为。在 App-nvue 平台该属性会被传入 web-view 内的local.html参与渲染见 mp-html.vue 的_set方法。content渲染内容入口功能用于渲染的 html 字符串类型String这是组件的核心输入。content属性带有observer/watch监听一旦变化即触发setContent重新解析渲染见 index.js 与 mp-html.vue。在setContent内部html 字符串会被new Parser(this).parse(content)转换为节点树见 mp-html.vue随后交给递归子组件渲染。值得留意的是uni-app 版与小程序版都支持通过实例方法setContent(content, append)在运行时动态更新内容第二个参数为true时可在尾部追加内容而非整体替换见 index.js。如果你需要频繁更新富文本直接修改content属性即可无需手动调用方法。copy-link外链点击行为控制功能是否允许外部链接被点击时自动复制类型Boolean默认值true当 html 中的a标签href包含://协议外链时点击行为由该属性决定。在 node.vue 的linkTap中可以看到完整逻辑小程序端调用uni.setClipboardData复制链接并 toast 提示链接已复制H5 端window.open直接打开App 端plus.runtime.openWeb打开外链。同时无论是否复制都会先触发linktap事件供业务方拦截。对于 uni-app 的 H5 和 App 平台外链本身可以直接跳转此时该属性为true则直接跳转外链而不是复制链接为false则不跳转。domain主域名链接拼接功能主域名用于链接拼接类型String当 html 中出现相对路径或协议相对路径的资源图片、视频、背景图等时domain用于将其拼接为完整链接例如假设domain被设置为https://example.com!-- 以下链接均会被拼接为 https://example.com/path -- img src//example.com/path / img src/path / div stylebackground-image:url(path)/div底层实现见 parser.js 的getUrl方法//开头的链接补充协议名domain的协议部分或默认http/开头的链接直接拼接整个域名其余无协议、无data:的相对路径则拼接为domain / url。使用限制务必注意该属性必须填写协议名://域名的完整链接暂不支持拼接含有../的相对路径链接a标签的href属性可能需要跳转到小程序内路径因此不进行domain拼接设置该属性后将无法使用本地图片本地图片路径会被当成相对路径拼接。补充细节通过base标签也可以设置主域名但优先级低于此属性——源码中仅在!this.options.domain时才会用base标签的href回填options.domain见 parser.js。error-img 与 loading-img图片占位图error-img 功能图片出错时的占位图链接loading-img 功能图片加载过程中的占位图链接类型均为String两者配合实现图片加载状态管理。在 node.wxml 中可以看到opts[1]loading-img和opts[2]error-img被传给image组件——加载中显示 loading 占位图加载失败ctrl[i] 0则显示 error 占位图图片加载成功后移除占位图见 node.vue 的imgLoad。若设置了lazy-load占位图还承担了懒加载时的兜底显示。这两个属性不会进行domain拼接需传入完整路径可以使用本地路径。lazy-load图片懒加载功能是否开启图片懒加载类型Boolean默认值false开启后图片image组件会带上lazy-load属性见 node.wxml。不同平台懒加载的时机不同具体参考各平台image组件懒加载的时机。该属性还会影响ready事件的触发策略在 mp-html.vue 的setContent中开启懒加载后组件会每隔 350ms 轮询容器高度高度不再变化即认为加载完毕并触发ready事件。pause-video视频播放互斥功能是否在播放一个视频时自动暂停其他视频类型Boolean默认值true在 node.vue 的play事件处理中可以看到当某个视频开始播放时组件遍历_videos列表将除当前视频外的其他视频全部pause()并把当前视频加入列表。如果需要多个视频同时播放请将此属性设置为false。preview-img图片点击预览功能是否允许图片被点击时自动预览类型Boolean默认值true开启后点击图片会调用uni.previewImage预览current为当前图片索引、urls为全部图片列表见 node.vue。自动预览允许左右滑动查看所有图片如果不希望如此可以禁用自动预览并在imgtap事件中自行处理见 docs/basic/event.md。默认情况下base64图片无法点击预览2.5.0 版本起支持将本属性设置为all开启base64图片的预览但需要注意各平台previewImage的 api 对base64图片支持度不高需充分测试后使用。如果无法预览可参考imgList中的方法进行转存见 docs/advanced/api.md。scroll-table表格横向滚动功能是否给每个表格添加一个滚动层使其能单独横向滚动类型Boolean默认值false开启后解析器会为table标签包裹独立的滚动容器。在 parser.js 中可以确认其判断条件仅当表格未设置inline布局attrs.style不包含inline时才生效以免破坏行内布局。如果你页面中有宽表格且希望保持整页纵向滚动流畅建议开启此属性。selectable文本长按复制功能是否开启文本长按复制类型Boolean/String默认值false该属性是跨平台适配复杂度最高的一个。将值设置为true在微信 iOS 端可能失效2.0.5 版本起支持将本属性设置为force来强制支持但会带来以下影响所有文本块会显示为inline-block通过text标签的user-select属性实现需要自行适配文字下划线、删除线等效果将失效所有文本块都无法被rich-text包含一定程度上增加标签数减慢渲染速度。从 2.3.1 版本起对此问题进行优化通过rich-text标签的user-select属性实现基础库 2.24.0 及以上生效第 3 个问题已解决第 1、2 个问题部分情况下还会存在。源码佐证uni-app 版根节点会根据selectable动态添加_select类并设置user-select: text见 mp-html.vue、mp-html.vue小程序版则将opts[4]透传给rich-text的user-select/selectable属性见 node.wxml并针对force模式在 iOS 上为文本块单独追加user-select见 node.wxml。set-title页面标题同步功能是否将title标签的内容设置到页面标题类型Boolean默认值true在解析 html 时如果遇到title标签且该属性为true解析器会将其文本内容同步到页面标题见 parser.js 的条件分支。适合渲染文章类内容时自动同步标题。show-img-menu长按菜单控制功能是否允许图片被长按时显示菜单类型Boolean默认值true支持版本2.3.0 起支持控制预览时是否长按显示菜单仅微信、百度小程序有效该属性目前仅微信、百度和 uni-app 的 app 平台有效。源码中通过平台差异化属性实现微信使用show-menu-by-longpress、百度使用image-menu-prevent见 node.wxmluni-app 端则在previewImage调用时透传showmenu/enablesavephoto/enableShowPhotoDownload见 node.vue。单个图片可通过ignore属性豁免该行为。tag-style标签默认样式功能设置标签的默认样式类型Object示例// 格式为 标签名: 样式 { a: color:red // a 标签默认为红色 }该属性非响应式需要在设置content属性前设置才能生效动态修改不能实时生效。其原理是将样式解析到各标签的内联style属性中去在 parser.js 的parseStyle中this.tagStyle[node.name]会与标签自带的内联 style 合并解析。因此如果对特别常用的标签设置默认样式将大大加大解析结果大小、减慢渲染速度这种情况下建议通过外部样式引入见 docs/overview/quickstart.md——外部样式支持标签名选择器在样式较长或作用标签数量较大时性能更高且写法更灵活可与伪类、class 配合等。use-anchor锚点链接支持功能是否使用锚点链接类型Boolean/Number默认值false开启后html 中href#id的链接可以跳转到页面对应锚点位置。传入一个数字时表示跳转锚点的偏移量单位px。底层实现解析器在parseStyle中检测到id属性且useAnchor开启时会调用expose()暴露锚点见 parser.js点击锚点链接时navigateTo通过createSelectorQuery计算目标位置并调用uni.pageScrollTo或 scroll-view 滚动完成跳转见 mp-html.vue。开启该属性会将所有设置了id属性的标签都暴露出来一定程度上减慢渲染速度非必要不要开启。属性速查表属性类型默认值核心作用container-styleString容器样式定制contentString待渲染 htmlcopy-linkBooleantrue外链点击时自动复制/跳转domainString无相对链接主域名拼接error-imgString图片出错占位图lazy-loadBooleanfalse图片懒加载loading-imgString图片加载中占位图pause-videoBooleantrue视频播放互斥preview-imgBoolean/Stringtrue图片点击自动预览可设all预览 base64scroll-tableBooleanfalse表格独立横向滚动selectableBoolean/Stringfalse文本长按复制可设forceset-titleBooleantruetitle 同步到页面标题show-img-menuBooleantrue图片长按菜单微信/百度/Apptag-styleObject无标签默认样式use-anchorBoolean/Numberfalse锚点链接数字为偏移量总结属性选择的实践建议渲染内容日常使用只需设置content其余属性按需开启container-style与tag-style用于外观定制注意二者分别在容器级和标签级生效且tag-style非响应式、需在设置content前传入。图片体验长列表页面建议组合lazy-loadloading-imgerror-img避免首屏加载过多图片默认的preview-img已支持多图滑动预览需要更精细控制时可在imgtap中自行接管。链接与导航内容含外部资源相对路径时配置domain注意其不能含../、不能使用本地图片的限制文章目录跳转开启use-anchor并配合偏移量使用不希望用户复制外链时将copy-link设为false。交互细节需要长按复制时优先用selectableforce并自行适配文本样式影响多视频页面按需关闭pause-video宽表格页面开启scroll-table可避免整页横向滚动。各属性在源码中的声明与消费位置可进一步查看 mp-html.vue、index.js、parser.js 与 node.vue配合本文理解效果最佳。赞分享前端小程序UI组件富文本【免费下载链接】mp-html小程序富文本组件支持渲染和编辑 html支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用项目地址https://gitcode.com/gh_mirrors/mp/mp-html点击查看免费下载相关推荐mp-html 组件属性详解与技术实践指南mp html 组件属性详解与技术实践指南 前言 mp html 是一个功能强大的富文本渲染组件其丰富的属性配置能够满足各种富文本展示需求。本文将全面解析 m前端小程序UI组件富文本如何用lifelines进行生存分析从Kaplan-Meier到Cox回归如何用lifelines进行生存分析从Kaplan Meier到Cox回归 生存分析是研究事件发生时间的强大统计方法广泛应用于医学、生物学、社会学和商业等领人工智能机器学习计算机视觉多模态本地部署conda 配置完全指南settings.rst 核心配置项解析与 .condarc 实战conda 配置完全指南settings.rst 核心配置项解析与 .condarc 实战 conda 通过 .condarc 配置文件集中管理几乎所有行为包管理器CLI上一篇5个理由告诉你为什么这款Windows版B站客户端值得一试下一篇如何快速获取MLB棒球数据MLB-StatsAPI完整使用指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考