当前位置:K88软件开发文章中心编程全书微信小程序 → 文章内容

微信小程序内容组件 rich-text

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-15 14:58:52

由 youj 创建, 最后一次修改 2017-07-20 rich-text基础库 1.4.0 开始支持,低版本需做兼容处理富文本。属性类型默认值说明最低版本nodesArray / String[]节点列表 / HTML String1.4.0支持默认事件,包括:tap、touchstart、touchmove、touchcancel、touchend和longtap nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降 nodes现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点元素节点:type = node属性说明类型必填备注name标签名String是支持部分受信任的HTML节点attrs属性Object否支持部分受信任的属性,遵循Pascal命名法children子节点列表Array否结构和nodes一致文本节点:type = text属性说明类型必填备注text文本String是支持entities受信任的HTML节点及属性全局支持class和style属性,不支持id属性。节点属性a abbr b blockquote br code colspan,widthcolgroupspan,widthdd del div dl dt em fieldset h1 h2 h3 h4 h5 h6 hr i imgalt,src,height,widthins label legend li olstart,typep q span strong sub sup tablewidthtbody tdcolspan,height,rowspan,widthtfoot thcolspan,height,rowspan,widththead tr ul 示例:<!-- rich-text.wxml --><rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>// rich-text.jsPage({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'Hello World!' }] }] }, tap() { console.log('tap') }})Bug & Tiptip: nodes 不推荐使用 String 类型,性能会有所下降。tip:rich-text组件内屏蔽所有节点的事件。tip: attrs 属性不支持 id ,支持 class 。tip: name 属性大小写不敏感。tip: 如果使用了不受信任的HTML节点,该节点及其所有子节点将会被移除。tip: img 标签仅支持网络图片。

微信小程序内容组件 rich-text