小程序editor富文本编辑使用及rich-text解析富文本

目录

一、下载

二、引入

三、组件的使用

---

一、下载

先下载editor的组件

下载地址：https://github.com/jxh1997/Editor

将下载好后的文件放到项目中

二、引入

在需要的用到富文本的组件的json文件中引入：

"usingComponents": {
    "richText":"../../components/editor/editor" // 富文本文件的路径
},

三、组件的使用

<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>

四、解析富文本

因为我们要展示的是html文件，因此我们需要利用组件来进行解析再展示：

<rich-text nodes="{
   {html}}" ></rich-text>

  this.setData({
        html: res.data[0].html.replace('<img ', '<img style="max-width:100%;height:auto;"'),
      })

其中，后面追加的replace('<img ', '<img style="max-width:100%;height:auto;"'),是为了适配html文件中的图片。因为在富文本中添加的图片，默认会很大。这样设置的话，图片就可以适配。