editor

富文本编辑器，可以对图片、文字进行编辑。

编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。

通过setContents接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在应用内使用时通过 delta 进行插入。

富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的html时，需要额外引入 这段样式，并维护<ql-container><ql-editor></ql-editor></ql-container>的结构。

图片控件仅初始化时设置有效。

相关 api：EditorContext

Tips：

• 使用 Quill 富文本编辑器，具体支持标签查看相关文档。

示例代码：

<!--pages/component/pages/editor/editor.mcml-->
<view class="container">
  <view class="statement">富文本编辑器</view>
  <editor 
    id="editor"
    editor-id="aaa"
    placeholder="请输入内容"
    read-only="{{readOnly}}"
    show-img-size="{{showImgSize}}"
    show-img-toolbar="{{showImgToolbar}}"
    show-img-resize="{{showImgResize}}"
    bindready="bindready"
    bindfocus="bindfocus"
    bindblur="bindblur"
    bindinput="bindinput"
    bindstatuschange="bindstatuschange"></editor>
  <view>
    <button bindtap="setReadOnly">设置只读{{readOnly}}</button>
    <button bindtap="setContent">设置文本内容</button>
    <button bindtap="clearContent">清空文本内容</button>
    <button bindtap="setShowImgSize">显示图片大小{{showImgSize}}</button>
    <button bindtap="setShowImgToolbar">显示图片工具栏{{showImgToolbar}}</button>
    <button bindtap="setShowImgResize">允许修改图片尺寸{{showImgResize}}</button>
  </view>
  <view class="cssname">bindready：编辑器初始化完成时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{readyDetail}}</text>

  <view class="cssname">bindfocus：编辑器聚焦时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{focusDetail}}</text>

  <view class="cssname">bindblur：编辑器失去焦点时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{blurDetail}}</text>

  <view class="cssname">bindinput：编辑器内容改变时触发, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{inputDetail}}</text>

  <view class="cssname">bindstatuschange：通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式, 参数event.detail</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{statuschangeDetail}}</text>
</view>

// pages/component/pages/editor/editor.js
Page({
  data: {
    readOnly: false,
    showImgSize: true,
    showImgToolbar: true,
    showImgResize: true
  },
  content: [
    '行内元素：',
    '<span>&lt;span&gt;</span>',
    '<strong>&lt;strong&gt;</strong>',
    '<b>&lt;b&gt;</b>',
    '<ins>&lt;ins&gt;</ins>',
    '<em>&lt;em&gt;</em>',
    '<i>&lt;i&gt;</i>',
    '<u>&lt;u&gt;</u>',
    '<a href="https://www.morecross.cn/">&lt;MoreCross&gt;</a>',
    '<del>&lt;del&gt;</del>',
    '<s>&lt;s&gt;</s>',
    '<sub>&lt;sub&gt;</sub>',
    '<sup>&lt;sup&gt;</sup>',
    '<img src="https://cn.bing.com/th?id=OHR.ReddishEgret_EN-CN3104674362_UHD.jpg">&lt;img&gt;</img>',
    '<br/>块级元素：',
    '<p>&lt;p&gt;</p>',
    '<h1>&lt;h1&gt;</h1>',
    '<h2>&lt;h2&gt;</h2>',
    '<h3>&lt;h3&gt;</h3>',
    '<h4>&lt;h4&gt;</h4>',
    '<h5>&lt;h5&gt;</h5>',
    '<h6>&lt;h6&gt;</h6.',
    '<hr>&lt;hr&gt;</hr>',
    '<ol>&lt;ol&gt;</ol>',
    '<ul>&lt;ul&gt;<li>&lt;li&gt;</li></ul>'
  ],
  setReadOnly: function(e){
    this.setData({
      readOnly: !this.data.readOnly
    })
  },
  setContent: function(e){
    var _this = this;
    mc.createSelectorQuery().select('#editor').context(function(res){
      res.context.setContents({
        html: _this.content.join(' '),
        fail: function (res) {
          console.error(res);
        }
      });
    }).exec();
  },
  clearContent: function(e){
    mc.createSelectorQuery().select('#editor').context(function(res){
      res.context.clear();
    }).exec();
  },
  setShowImgSize: function(){
    this.setData({
      showImgSize: !this.data.showImgSize
    })
  },
  setShowImgToolbar: function(){
    this.setData({
      showImgToolbar: !this.data.showImgToolbar
    })
  },
  setShowImgResize: function(){
    this.setData({
      showImgResize: !this.data.showImgResize
    })
  },
  bindready: function(e){
    this.setData({
      readyDetail: JSON.stringify(e, null, 2)
    })
  },
  bindfocus: function(e){
    this.setData({
      focusDetail: JSON.stringify(e, null, 2)
    })
  },
  bindblur: function(e){
    this.setData({
      blurDetail: JSON.stringify(e, null, 2)
    })
  },
  bindinput: function(e){
    console.log(e);
    this.setData({
      inputDetail: JSON.stringify(e, null, 2)
    })

  },
  bindstatuschange: function(e){
    this.setData({
      statuschangeDetail: JSON.stringify(e, null, 2)
    })
  }
})