创新互联百度小程序教程:rich-text富文本

  • rich-text 富文本
    • 属性说明
      • nodes
      • 受信任的 HTML 节点以及属性说明
    • 示例
      • 代码示例 1:通过 HTML String 渲染
      • 代码示例 2:通过节点渲染
    • Bug & Tip

    rich-text 富文本

    解释:富文本。

    创新互联主要从事网站制作、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务沙市,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

    属性说明

    属性名 类型 默认值 必填 说明 最低版本

    nodes

    Array/String

    []

    节点列表/HTML String 。推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,性能有所下降

    selectable

    Boolean

    false(基础库 3.150.1 以前版本) true(基础库 3.150.1 及以后版本)

    富文本是否可以长按选中,可用于复制,粘贴,长按搜索等场景

    百度 App 11.10

    image-menu-prevent

    Boolean

    false

    阻止长按图片时弹起默认菜单(将该属性设置为image-menu-preventimage-menu-prevent=”true”),只在初始化时有效,不能动态变更;若不想阻止弹起默认菜单,则不需要设置此属性

    3.170.1

    preview

    Boolean

    富文本中的图片是否可点击预览。在不设置的情况下,若 rich-text 未监听点击事件,则默认开启。未显示设置 preview 时会进行点击默认预览判断,建议显示设置 preview

    3.170.9

    nodes

    现支持两种节点,通过 type 来区分,分别是“元素节点”和“文本节点”,默认是元素节点,在富文本区域里显示的 HTML 节点。
    元素节点 - type: ‘node’

    属性名 类型 默认值 必填 说明 最低版本
    name String 标签名。支持部分受信任的 HTML 节点,大小写不敏感
    attrs Object 属性。支持部分受信任的属性,遵循 Pascal 命名法。不支持 id ,支持 class
    children Array 子节点列表。结构和 nodes 一致

    文本节点 - type: ‘text’

    属性名 类型 默认值 必填 说明 最低版本
    text String 文本。支持 entities ,例如:

    <Life> is like a box of chocolates

    受信任的 HTML 节点以及属性说明

    1.全局支持 class 和 style 属性,不支持 id 属性。
    2.如果使用了不受信任的 HTML 节点,该节点及其所有子节点将会被移除。

    节点 属性 节点 属性 节点 属性

    a

    abbr

    b

    blockquote

    br

    code

    col

    span,width

    colgroup

    span,width

    dd

    del

    div

    dl

    dt

    em

    fieldset

    h1

    h2

    h3

    h4

    h5

    h6

    hr

    i

    img

    alt,src,height,width

    ins

    label

    legend

    li

    ol

    start,type

    p

    q

    span

    strong

    sub

    sup

    table

    width

    tbody

    td

    colspan,height,rowspan,width

    tfoot

    th

    colspan,height,rowspan,width

    thead

    tr

    ul

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1:通过 HTML String 渲染

    • SWAN
    • JS
     
     
     
    1. 通过HTML String渲染
    2. 代码示例
    3. {{htmlSnip}}
    4. 渲染效果

    代码示例 2:通过节点渲染

    • SWAN
    • JS
     
     
     
    1. 通过节点渲染
    2. 代码示例
    3. {{nodeSnip}}
    4. 渲染效果

    Bug & Tip

    • Tip:查看将富文本字符串转成 JSON 格式的具体方法。
    • Tip:支持默认事件,包括:tap、touchstart、touchmove、touchcancel、touchend 和 longtap 。
    • Tip:rich-text 组件内屏蔽所有节点的事件。
    • Tip:内部 img 标签仅支持网络图片。
    • Tip:如果在自定义组件中使用 rich-text 组件,那么仅自定义组件的 swan 样式对 rich-text 中的 class 生效。

    文章题目:创新互联百度小程序教程:rich-text富文本
    网页路径:http://www.shufengxianlan.com/qtweb/news46/9396.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联