微信小程序开发之富文本编辑器

一年多去了，还有这么多人关注这个编辑器，那就索性把这个组件放上去，各位直接引用吧！

如果您感觉很好用，很实用，也请大家给点一个赞！

前言：富文本在Web开发上的地位大家可想而知，很多地方都需要用到富文本编辑器，比如开发类似新闻管理小程序、商品简介等。微信小程序在基础库2.7.0之后上线了一个editor富文本编辑器组件，这个组件是本次要讲的内容。组件相关的内容大家可以去看官方文档的内容，这里我们就不进行讲解。而我们要做的就是将官方的富文本组件进行二次开发达到一个好用而又实用的地步：https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

先看效果图（以下只是一个基础的实用）：

代码方案：

1.引入组件（组件的下载地址链接：https://pan.baidu.com/s/15D3ejvs30BZPwn94RgyNmw  提取码：hg66）

2、在你需要的使用的页面的JSON文件中引入该组件，引入方法如下：

 "usingComponents": {
    "hg-editor":"../../../components/hg-editor/hg-editor（根据自己的放置位置修改，其中/hg-editor/hg-editor是固定的）"
  }

3、在wxml文件中使用，使用案例如下，可选参数有四个

参数详解：

1. showTabBar :是否显示工具栏（默认为true，显示，如果改为false则为不显示）
2. placeholder：文本框提示文字，默认为“请输入相关内容”
3. name：是编辑器的name属性，默认为空
4. uploadImageURL：图片的上传地址，默认为空

使用属性案例测试：

bind:input可以获得用户输入的内容:

  onInputtingDesc: function (e) {
    let html = e.detail.html;   //相关的html代码
    let originText = e.detail.text;  //text，不含有任何的html标签
    this.setData({
      ['topic.text']: html,
      ['topic.originText']: originText
    });
  }

使用案例：

您的想法有多大，组件拓展的无限可能就有多大，欢迎各位留言，欢迎各位使用！

好用，就来收藏一下，更新不易，点个赞！