【微信小程序-原生开发】富文本编辑器 editor 的使用教程

朝阳39

于 2023-03-06 17:48:00 发布

阅读量1.3k

点赞数

分类专栏： # 微信小程序 # 已归档链接文章标签：微信小程序 editor 富文本编辑器

本文链接：https://blog.csdn.net/weixin_41192489/article/details/129367167

版权

已归档链接同时被 2 个专栏收录

280 篇文章

订阅专栏

微信小程序

42 篇文章

订阅专栏

文章讲述了在微信小程序中如何使用富文本编辑器处理多行输入，并展示了如何在编辑器准备好时设置内容以及监听内容变化同步表单数据。同时，提到了利用rich-text组件来渲染包含HTML标签的富文本内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单内容较多时，通常需要输入换行的数据，此处便需要用到富文本编辑器

富文本编辑器的渲染

在这里插入图片描述

  <editor class="editorStyle" style="height:auto" id="editor" placeholder="请输入内容" bindready="onEditorReady" bindinput="contentChange">
  </editor>

.editorStyle {
  border: 1rpx solid rgb(235, 229, 229);
  border-radius: 10rpx;
  padding: 30rpx;
  margin: 30rpx auto;
  width: 96%;
  box-sizing: border-box;
}

  // 当富文本编辑器挂载完成时执行
  onEditorReady() {
    let that = this
    // 修改时，反显数据
    this.createSelectorQuery().select("#editor")
      .context((res) => {
        res.context.setContents({
          html: that.data.formData.content,
        });
      })
      .exec();
  },

效果为

在这里插入图片描述

 // 富文本编辑器内容变化时，同步更新表单字段内容 formData.content
  contentChange(e) {
    let contentHtml = e.detail.html
    this.setData({
      'formData.content': contentHtml
    })
  },

富文本内容的渲染

因富文本内容是包含 html 标签的数据，无法直接在微信小程序中渲染，需放入 rich-text 中

  <view class="contentBox">
    <rich-text nodes="{{detail.content}}"></rich-text>
  </view>

.contentBox {
  padding: 30rpx;
  /* 文本分散对齐 */
  text-align: justify;
}

效果如下：

在这里插入图片描述