微信小程序之实现封装一个富文本编辑器 Editor 的完整流程【附demo源码】欢迎点赞收藏

最新推荐文章于 2024-07-18 11:04:43 发布
最新推荐文章于 2024-07-18 11:04:43 发布
阅读量4.5k 收藏 43
点赞数 5
分类专栏： 小程序系列 应用场景 案例 文章标签： 小程序 js vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XH_jing/article/details/115509316
版权

本文将主要讲解一下如果通过微信小程序来实现封装一个富文本编辑器 Editor，可拿来即用。

一、官方文档：

editor（富文本编辑器，可以对图片、文字进行编辑）：

https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

rich-text（富文本）：

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

二、效果图：

在这里插入图片描述

三、代码详解：

1. 编辑器界面设计

richTest.wxml

<view class="whole" id="richText">
  <view style="height:{{textTool?'200':'100'}}rpx;"></view>
  <view class="page-body">
    <view class='wrapper'>
      <editor 
      	id="editor" 
      	class="ql-container" 
      	placeholder="{{placeholder}}" 
      	showImgSize
      	showImgToolbar 
      	showImgResize 
      	bindstatuschange="onStatusChange" 
      	read-only="{{readOnly}}" 
      	bindready="onEditorReady" 
      	bindfocus='bindfocus' 
      	bindblur='bindblur' 
      	bindinput='bindinput'
      >
      </editor>
    </view>
  </view>
  <view class="editor-toolbar" bindtap="format">
    <view class="toolbar-2">
      <view class="tool-item-cell">
        <view class="tool-item-box">
          <view class="cell-rg-shadow"></view>
          <scroll-view 
          	scroll-x 
          	class="flex-sb" 
          	style="height:70rpx;white-space: nowrap;"
          >
            <view class="tool-item">
              <i class="iconfont icon-charutupian" data-tool_name='insertImage' bindtap="toolEvent"></i>
            </view>
            <view class="tool-item">
              <i class="iconfont icon-font" data-tool_name='showTextTool' bindtap="toolEvent"></i>
            </view>
            <view class="tool-item">
              <i class="iconfont icon-format-header-1 {{formats.header === 1 ? 'ql-active' : ''}}" data-tool_name='text_H1' data-name="header" data-value="{{1}}" bindtap="toolEvent"></i>
            </view>
            <view class="tool-item">
              <i class="iconfont icon-date" data-tool_name='insertDate' bindtap="toolEvent"></i>
            </view>
            <view class="tool-item">
              <i class="iconfont icon-undo" data-tool_name='undo' bindtap="toolEvent"></i>
            </view>
            <view class="tool-item">
              <i class="iconfont icon-redo" data-tool_name='redo' bindtap="toolEvent"></i>
            </view>
            <view class="tool-item">
              <i class="iconfont icon-shanchu" data-tool_name='clear' bindtap="toolEvent"></i>
            </view>
          </scroll-view>
        </view>
      </view>
      <lable 
      	class='save-icon' 
      	style='background:{{appColorConfig.check_color}}' 
      	bindtap="getEditorContent"
      >
        {{buttonTxt}}
      </lable>
    </view>
    <view class="toolbar-1" wx:if="{{textTool}}">
      <scroll-view 
      	scroll-x 
      	style="height:70rpx;white-space: nowrap;"
      >
        <view class="tool-item">
          <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-fengexian" bindtap='insertDivider'></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align"
            data-value="left"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align"
            data-value="center"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align"
            data-value="right"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-zuoyouduiqi {{formats.align === 'justify' ? 'ql-active' : ''}}" data-name="align" data-value="justify"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
        </view>
        <view class="tool-item">
          <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list"
            data-value="bullet"></i>
        </view>
      </scroll-view>
    </view>
  </view>
</view>
2. 编辑器界面样式

richTest.wxss

@import "./assets/iconfont.wxss";
page {
  background: #f8f8f8;
}
.page-body{
  padding-bottom: 100rpx;
}
.editor-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
.editor-toolbar i {
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolbar-1 {
  padding: 5rpx 0;
  background: #e4e4e4;
}
.editor-toolbar .tool-item {
  display: inline-block;
}
.toolbar-2 {
  padding: 5rpx 20px 5rpx 10px;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content:space-between;
  position: relative;
}
.toolbar-2 .tool-item-cell{
  max-width: 80%;
}
.toolbar-2 .tool-item-box{
  position: relative;
}
.toolbar-2 .cell-rg-shadow{
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  z-index: 999;
   background:#dddddd;
}
.iconfont {
  display: inline-block;
  padding: 8px 8px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 20px;
}
.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.ql-container {
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  min-height: 30vh;
  height: auto;
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
}
.ql-active {
  color: #06c;
}
.save-icon {
  padding: 15rpx 30rpx;
  font-size: 20rpx;
  background: #bf98d2;
  color: #fff;
}
.flex{
  display: flex;
}
.flex-cc{
  display: flex;
  align-items: center;
  -ms-flex-item-align: center;
  justify-content: center;
}
.flex-sb{
  display: flex;
  align-items: center;
  -ms-flex-item-align: center;
  justify-content: space-between;
}
.flex-sa{
  display: flex;
  align-items: center;
  -ms-flex-item-align: center;
  justify-content: space-around;
}
3. 编辑器业务逻辑

richTest.js

  1. 富文本工具栏点击事件

    toolEvent(res) {
  let { tool_name } = res.currentTarget.dataset;
  switch (tool_name) {
    case 'insertImage': // 插入图片
      this.insertImageEvent();
      break;
    case 'showTextTool': // 展示文字编辑工具
      this.showTextTool();
      break;
    case 'insertDate': // 插入日期
      this.insertDate();
      break;
    case 'undo': // 撤退（向前）
      this.undo();
      break;
    case 'redo': // 撤退（向后）
      this.restore();
      break;
    case 'clear': // 清除
      this.clearBeforeEvent();
      break;
  }
},

  2. 编辑器初始化完成时触发

    onEditorReady() {
  console.log('编辑器初始化完成时触发')
  this.triggerEvent('onEditorReady');
  // 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用this.createSelectorQuery()来代替。
  // 对应API：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html 
  this.createSelectorQuery().select('#editor').context(res => {
    console.log('createSelectorQuery=>', res)
    this.editorCtx = res.context;
    let rtTxt = '';
    this.setContents(rtTxt); // 设置富文本内容
  }).exec();
},

  3. 事件方法

    // 设置富文本内容
setContents(rechtext) {
  this.editorCtx.setContents({
    html: rechtext,
    success: res => {
      console.log('[setContents success]', res)
    }
  })
},

// 撤销
undo() {
  this.editorCtx.undo();
  this.triggerEvent('undo');
},

// 恢复
restore() {
  this.editorCtx.redo();
  this.triggerEvent('restore');
},

// 清空编辑器内容
clear() {
  this.editorCtx.clear({
    success: res => {
      this.triggerEvent('clearSuccess');
    }
  })
},

//清空编辑器内容前的事件
clearBeforeEvent() {
  this.triggerEvent('clearBeforeEvent');
},

//清除当前选区的样式
removeFormat() {
  this.editorCtx.removeFormat();
},

//插入图片事件
insertImageEvent() {
  //触发父组件选择图片方法
  this.triggerEvent('insertImageEvent', {});
},

//插入日期
insertDate() {
  if (supportDateFormat.indexOf(this.data.formatDate) < 0) {
    console.error(`Format Date ${this.data.formatDate} error \n It should be one of them [${supportDateFormat}]`)
    return;
  }
  let formatDate = this.getThisDate(this.data.formatDate);
  this.editorCtx.insertText({
    text: formatDate
  })
},

//show展示文本工具栏
showTextTool() {
  this.setData({
    textTool: !this.data.textTool
  })
},

//保存按钮事件，获取编辑器内容
getEditorContent() {
  this.editorCtx.getContents({
    success: res => {
      // console.log('[getContents rich text success]', res)
      this.triggerEvent('getEditorContent', {
        value: res,
      });
    }
  })
},

  4. 编辑器事件

    //编辑器聚焦时触发
bindfocus(res) {
  this.triggerEvent('bindfocus', {
    value: res,
  });
},

//编辑器失去焦点时触发
bindblur(res) {
  this.triggerEvent('bindblur', {
    value: res,
  });
},

//编辑器输入中时触发
bindinput(res) {
  this.triggerEvent('bindinput', {
    value: res,
  });
},

  5. 插入图片方法

     /**
 * 插入图片方法
 * @param {String} path 图片地址，仅支持 http(s)、base64、云图片(2.8.0)、临时文件(2.8.3)
 */
insertImageMethod(path) {
  return new Promise((resolve, reject) => {
    this.editorCtx.insertImage({
      src: path,
      data: {
        id: 'imgage',
      },
      success: res => {
        resolve(res);
      },
      fail: res => {
        reject(res);
      }
    })
  })
},

  6. 返回当前日期的方法

    /**
 * 返回当前日期
 * @format {String} 需要返回的日期格式
 */
getThisDate(format) {
  let date = new Date(),
    year = date.getFullYear(),
    month = date.getMonth() + 1,
    day = date.getDate(),
    h = date.getHours(),
    m = date.getMinutes();

  //数值补0方法
  const zero = (value) => {
    if (value < 10) return '0' + value;
    return value;
  }

  switch (format) {
    case 'YY-MM':
      return year + '-' + zero(month);
    case 'YY.MM.DD':
      return year + '.' + zero(month) + '.' + zero(day);
    case 'YY-MM-DD':
      return year + '-' + zero(month) + '-' + zero(day);
    case 'YY.MM.DD HH:MM':
      return year + '.' + zero(month) + '.' + zero(day) + ' ' + zero(h) + ':' + zero(m);
    case 'YY/MM/DD HH:MM':
      return year + '/' + zero(month) + '/' + zero(day) + ' ' + zero(h) + ':' + zero(m);
    case 'YY-MM-DD HH:MM':
      return year + '-' + zero(month) + '-' + zero(day) + ' ' + zero(h) + ':' + zero(m);
    default:
      return year + '/' + zero(month) + '/' + zero(day);
  }
}
4. 接受富文本编辑器相关事件

index.js

  1. 编辑器初始化完成时触发，可以获取组件实例

      onEditorReady() {
    console.log('[onEditorReady callback]')
    richText = this.selectComponent('#richText'); //获取组件实例
  },

  2. 功能点实现

    //设置富文本内容
setContents(rechtext) {
  this.editorCtx.setContents({
	html: rechtext,
	success: res => {
	  console.log('[setContents success]', res)
	}
  })
},

//插入图片
insertImageEvent() {
  wx.chooseImage({
    count: 1,
    success: res => {
      let path = res.tempFilePaths[0];
      //调用子组件方法，图片应先上传再插入，不然预览时无法查看图片。
      richText.insertImageMethod(path).then(res => {
        console.log('[insert image success callback]=>', res)
      }).catch(res => {
        console.log('[insert image fail callback]=>', res)
      });
    }
  })
},

//保存，获取编辑器内容
getEditorContent(res) {
  let { value } = res.detail;
  wx.showToast({
    title: '获取编辑器内容成功',
    icon: 'none',
  })
  console.log('[getEditorContent callback]=>', value)
},
5. 使用富文本编辑器组件

index.wxml

<richText 
  id='richText' 
  readOnly='{{readOnly}}'
  placeholder='{{placeholder}}' 
  formatDate='YY/MM/DD'
  buttonTxt='保存'
  bind:clearBeforeEvent='clearBeforeEvent'
  bind:clearSuccess='clearSuccess'
  bind:undo='undo'
  bind:restore='restore'
  bind:onEditorReady='onEditorReady' 
  bind:bindfocus='bindfocus' 
  bind:bindblur='bindblur' 
  bind:bindinput='bindinput' 
  bind:insertImageEvent='insertImageEvent' 
  bind:getEditorContent='getEditorContent'></richText>
<view class="tip">备注：
<view>1.改变图片大小，按住节点一小会儿再拖动。</view>
<view>2.预览内容中，图片仅支持网络url。</view>
</view>
<view class="preview" bindtap="preview">预览</view>

四、demo源码：

欢迎 Star GitHub： https://github.com/jxh1997/Editor 。

所以源代码均在 Github 上，下载即可使用。

1. 下载源码
git clone https://github.com/jxh1997/Editor.git
2. 使用说明

  1. 在下载源码中找到组件目录：components/richText，将 richText 整个文件夹复制到你的项目中。

  2. 在 page.json 中引入组件

    "usingComponents": {
    "richText":"../../components/richText/richText"
},

  3. 在 page.wxml 中使用组件

    <richText 
  id='richText' 
  readOnly='{{readOnly}}'
  placeholder='{{placeholder}}' 
  formatDate='YY/MM/DD'
  buttonTxt='保存'
  bind:clearBeforeEvent='clearBeforeEvent'
  bind:clearSuccess='clearSuccess'
  bind:undo='undo'
  bind:restore='restore'
  bind:onEditorReady='onEditorReady' 
  bind:bindfocus='bindfocus' 
  bind:bindblur='bindblur' 
  bind:bindinput='bindinput' 
  bind:insertImageEvent='insertImageEvent' 
  bind:getEditorContent='getEditorContent'
> </richText>

  4. 在 page.js 中，接受富文本编辑器相关事件。具体执行代码如上。

如果以上内容对你的学习工作有帮助，欢迎点赞收藏，如果觉得 Github 上的代码还不错，欢迎前往 Star

八了个戒
关注
  • 5
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
微信小程序原生开发功能合集六：富文本组件的封装
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-27 400
本章实现小程序富文本编辑组件的实现，使用editor组件实现富文本输入，引入iconfont实现操作按钮的图标，实现富文本的扩展开发。
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
热门推荐
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
微信小程序富文本编辑器封装版
05-23
本资源是微信小程序的富文本编辑器封装版，资源主要来源于官方文档，和几个富文本的源码，但是感觉用起来还是太不方便了，毕竟用的地方挺多的，还是封装起来比较好用。代码全部本人亲测可用的。注意基础库版本，我用的是2.10.2
quill 富文本编辑器 显示源码
最新发布
qq_30049249的博客
07-18 359
https://andi.cn/page/621580.html
微信小程序 富文本组件使用
SunNang的博客
11-15 6712
能够使用微信小程序提供的富文本组件及引入的第三方富文本组件 掌握使用微信小程序的表单组件 掌握使用微信小程序的form表单及如何提交数据 掌握使用微信小程序的导航及跳转组件 一、基础内容组件 1.1 rich-text 富文本显示组件 js中定义一个html文本 使用组件显示富文本 但是发现，图片有裁切情况，所以一般项目中不用 1.2 wxparse 第3方组件 显示富文本 GitHub - icindy/wxParse: wxParse-微信...
微信小程序editor富文本编辑器
weixin_53304105的博客
04-30 9491
如果你也向我一样从0开始搭建，那真的是钛裤辣！
小程序Editor富文本编辑器-封装使用用法
请叫我欧皇！的博客
10-12 7589
微信小程序的editor的封装使用方法，需要直接引入就可以了。
微信小程序实战之实现富文本编辑器
梅花寺
12-09 9755
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。实现的功能点如下。
python搭建微信小程序商城_GitHub - Allen7D/mini-shop-server: 基于 Flask 框架开发的微信小程序后端项目，用于构建小程序商城后台 （电商相关；rbac权限管...
weixin_39723441的博客
12-04 977
mini-shop-server构建微信小程序(商城)后端????基于 Flask 框架????重构慕课网的《微信小程序商城构建全栈应用》，源项目基于TP5 + MINA框架本项目的开发环境是 Mac OS，生产环境是 Linux Ubuntu 16.04感谢慕课网的七月老师，本项目属于他课程思路的复现???? 互动QQ交流群:聊天、斗图、学习、交流，伸手党勿进 葬爱家族QQ交流群林间有风团队官方QQ...
微信小程序模块化开发框架
第九程序官方博客
05-25 3706
微信小程序组件化开发框架教程
实现一个掘金Style的文章编辑器
tikazyq的博客
09-23 282
前言 我是一个掘金重度用户，不仅经常在掘金上挖掘含金量高的文章，偶尔还在掘金上创作技术文章。相信读者们也对掘金非常满意，尤其是它的文章编辑器，不仅支持Markdown编辑，而且还支持代码高亮、分屏预览、自动保存等等。本文将用React＋CodeMirror＋Showdown实现一个类似于掘金编辑器的单页应用。 动图效果 先不说那么多，先上动图效果吧。 布局 下面是掘金文章编辑器的...
小程序富文本编辑器
02-15
这个是小程序富文本编辑器，可以编辑出文字图片混排的效果，网上找的资源，希望能帮到有需要的人
微信小程序编辑器
02-01
是一种不需要下载安装即可使用的应用，通过手机微信扫一扫即可登录编写，开发手机端的软件，方便程序猿
Kindeditor 富文本编辑器实例Demo
04-21
Kindeditor 富文本编辑器实例Demo。实现电商系统商品详情页的功能。
wxParse 微信小程序富文本解析自定义组件，支持HTML及markdown解析
09-30
微信小程序富文本解析自定义组件，支持HTML及markdown解析
微信小程序富文本解析组件wx-rich-parse-master.zip
09-25
微信小程序富文本解析组件wx-rich-parse-master.zip
微信小程序 富文本 rich-text组件
java1234的博客
05-26 1627
完整微信小程序(Java后端) 技术贴目录清单页面（必看） 富文本。 属性 类型 默认值 必填 说明 最低版本 nodes array/string [] 否 节点列表/HTML String 1.4.0 space string 否 显示连续空格 2.4.1 space 的合法值 值 说明 最低版本 ensp 中文字符空格一半大小 emsp 中文字符空格大小 nbsp 根据字体设置的空格大小 nodes 现支持两种节点，通过type来区分，分别是
小程序富文本编辑器（editor）
weixin_44825701的博客
03-05 3106
由于最近在做小程序 有接触到小程序的富文本编辑器 （editor）。在网上查了部分资料。感觉都比较杂。 话不多说 上码。 wxml <view class="issues"> <view class="issue" bindtap="release">文章发布</view> </view> <view class="container" style="height:{{editorHeight}}px;"> <editor i.
微信小程序 - 富文本编辑器
weixin_56831647的博客
10-09 1411
富文本在Web开发上的地位大家可想而知，很多地方都需要用到富文本编辑器，比如开发类似新闻管理小程序、商品简介等。微信小程序在基础库2.7.0之后上线了一个editor富文本编辑器组件，这个组件是本次要讲的内容。组件相关的内容大家可以去看官方文档的内容，这里我们就不进行讲解。一款在微信小程序上使用的在线富文本编辑器，基于微信官方提供的editor二次封装！一年多去了，还有这么多人关注这个编辑器，那就索性把这个组件放上去，各位直接引用吧！3、在wxml文件中使用，使用案例如下，可选参数有四个。
uniapp 微信小程序 editor富文本编辑器
05-24
Uniapp是一个跨平台的开发框架，可以同时开发出支持多个平台的应用程序，包括微信小程序。而微信小程序的富文本编辑器，可以使用微信小程序自带的富文本编辑器组件，也可以使用第三方的富文本编辑器组件，例如腾讯云开发的QCloud RichText组件以及有赞开发的Vant-RichText组件等等。在Uniapp中使用微信小程序自带的富文本编辑器组件或第三方组件，需要在页面中引入对应的组件，并根据组件的使用方法进行调用。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值