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

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

时间:2023-04-03 12:05:59浏览次数:40  
标签:文本编辑 微信 formData 30rpx content html editor border


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

富文本编辑器的渲染

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

<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();
  },

效果为

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

// 富文本编辑器内容变化时,同步更新表单字段内容 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;
}

效果如下:

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


标签:文本编辑,微信,formData,30rpx,content,html,editor,border
From: https://blog.51cto.com/u_15715491/6165943

相关文章

  • 【微信小程序-原生开发】TDesign 实战模板——带性别图标的头像
    <viewclass="avatarBoxcenter"><t-avatarbindtap="previewImage"data-url="{{detail.avatarUrl}}"wx:if="{{detail.avatarUrl}}"image="{{detail.avatarUrl}}"/><t-avatarwx:elseic......
  • 微信小程序学习笔记——第一个微信小程序
    打开微信开发者工具 扫码登录之后,创建项目项目创建好之后 ......
  • 微信小程序学习笔记——环境准备 【注册账号】【获取APPID】
    1.注册账号https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=①一个和微信没有产生联系的邮箱 ②邮箱激活 ③信息登记2.获取APPIDAPPID:相当于开发者唯一的身份验证,发布应用时需要它,支付功能也会用到它微信公众平台3.开发工具稳定版StableBuild......
  • 微信小程序自定义封装组件-showModal
    封装一个组件这里由于最近使用微信小程序居多,所以着重写的是小程序的,但是万变不离其宗,组件实现思路其实都差不多的微信小程序开发中官方自带的wx.showModal,这个弹窗API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件。下面我们进行一个自定义modal弹窗组件的开发,并......
  • 智慧停车场微信小程序源码/全开源智能停车系统源码
    ☑️品牌:小程序☑️语言:小程序☑️类型:智慧停车场系统☑️支持:小程序......
  • 微信小程序slider抖动
    问题描述:做一个音乐播放器的UI,想要使用slider做歌曲进度条,能拖动那种。为了使进度条自动向前,设置了一个interval,每500ms更新一次,用audioctx.currentTime更新,有拖动的时候用拖动值更新。拖动进度条的时候发现:从B点拖到A点,小圆圈回先退回B点,然后弹回A点。声音播放没有回退现象,就是进......
  • Vue引用富文本编辑器
    1.在package.json加上并安装依赖"devDependencies":{"@jsdawn/vue3-tinymce":"^1.1.7",}2.在页面中引入importVue3Tinymcefrom"@jsdawn/vue3-tinymce";3.使用<vue3-tinymcev-model="item.blockDataObj.text":setting=&qu......
  • 微信小程序登录、获取用户信息的流程及实现
    微信小程序登录、获取用户信息的流程及实现本篇文章将通过以下三步,让你了解到小程序登录、和用户信息获取的微信生态变迁,和流程上前后端技术实现。小程序登录流程小程序获取手机号小程序获取头像昵称小程序登录小程序登录是通过微信官方提供的登录能力,获取微信提供的用......
  • 暂停在博客园发布文章,请亲爱的读者们移步同名微信公众号
     各位亲爱的读者们,从2023年3月起,本人将暂停在博客园发布新文章,请移步本人的微信公众号“世民谈云计算”。公众号文章将同步至知乎同名号和头条同名号。感谢您一直以来的关注! 扫码关注本人的微信公众号: 知乎创作中心:https://www.zhihu.com/people/sammy-1-91/posts ......
  • 使用 wine 安装微信遇到的问题解决方法
    1.中文显示成方块添加启动环境变量:LANG=zh_CN.UTF-82.输入框不显示文字安装winetrickssudoaptinstallwinetricks#oryay-Sywinetricks然后安装riched20winetricksriched20......