微信小程序 editor富文本

wxml

<import src="../common/head.wxml" />
<import src="../common/foot.wxml" />

<view class="container">
  <!-- <template is="head" data="{{title: 'editor'}}"/> -->
  <view class="page-body">
    <view class='wrapper'>
      <view class='toolbar' bindtap="format">
        <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
        <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
        <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
        <i class="iconfont icon-zitishanchuxian {{formats.strike ? 'ql-active' : ''}}" data-name="strike"></i>
        <i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align"
          data-value="left"></i>
        <i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align"
          data-value="center"></i>
        <i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align"
          data-value="right"></i>
        <i class="iconfont icon-zuoyouduiqi {{formats.align === 'justify' ? 'ql-active' : ''}}" data-name="align"
          data-value="justify"></i>
        <i class="iconfont icon-line-height {{formats.lineHeight ? 'ql-active' : ''}}" data-name="lineHeight"
          data-value="2"></i>
        <i class="iconfont icon-Character-Spacing {{formats.letterSpacing ? 'ql-active' : ''}}"
          data-name="letterSpacing" data-value="2em"></i>
        <i class="iconfont icon-722bianjiqi_duanqianju {{formats.marginTop ? 'ql-active' : ''}}" data-name="marginTop"
          data-value="20px"></i>
        <i class="iconfont icon-723bianjiqi_duanhouju {{formats.micon-previewarginBottom ? 'ql-active' : ''}}"
          data-name="marginBottom" data-value="20px"></i>
        <i class="iconfont icon-clearedformat" bindtap="removeFormat"></i>
        <i class="iconfont icon-font {{formats.fontFamily ? 'ql-active' : ''}}" data-name="fontFamily"
          data-value="Pacifico"></i>
        <i class="iconfont icon-fontsize {{formats.fontSize === '24px' ? 'ql-active' : ''}}" data-name="fontSize"
          data-value="24px"></i>

        <i class="iconfont icon-text_color {{formats.color === '#0000ff' ? 'ql-active' : ''}}" data-name="color"
          data-value="#0000ff"></i>
        <i class="iconfont icon-fontbgcolor {{formats.backgroundColor === '#00ff00' ? 'ql-active' : ''}}"
          data-name="backgroundColor" data-value="#00ff00"></i>

        <i class="iconfont icon-date" bindtap="insertDate"></i>
        <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
        <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list"
          data-value="ordered"></i>
        <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list"
          data-value="bullet"></i>
        <i class="iconfont icon-undo" bindtap="undo"></i>
        <i class="iconfont icon-redo" bindtap="redo"></i>

        <i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i>
        <i class="iconfont icon-indent" data-name="indent" data-value="+1"></i>
        <i class="iconfont icon-fengexian" bindtap="insertDivider"></i>
        <i class="iconfont icon-charutupian" bindtap="insertImage"></i>
        <i class="iconfont icon-format-header-1 {{formats.header === 1 ? 'ql-active' : ''}}" data-name="header"
          data-value="{{1}}"></i>
        <i class="iconfont icon-zitixiabiao {{formats.script === 'sub' ? 'ql-active' : ''}}" data-name="script"
          data-value="sub"></i>
        <i class="iconfont icon-zitishangbiao {{formats.script === 'super' ? 'ql-active' : ''}}" data-name="script"
          data-value="super"></i>
        <!-- <i class="iconfont icon-quanping"></i> -->
        <i class="iconfont icon-shanchu" bindtap="clear"></i>
        <i class="iconfont icon-direction-rtl {{formats.direction === 'rtl' ? 'ql-active' : ''}}" data-name="direction"
          data-value="rtl"></i>

      </view>

      <editor id="editor" value='{{dataArry}}' class="ql-container" placeholder="{{placeholder}}" bindblur='goplay'
        showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" bindinput="onBindInput" bindready="onEditorReady">
      </editor>

      <view>
        <button disabled="{{isSublimt}}" bindtap="sublimt">提交</button>
      </view>
    </view>
  </view>

  <template is="foot" />
</view>

js

Page({
  data: {
    formats: {},
    readOnly: false,
    placeholder: '开始输入...',
    dataArry: "",
    isSublimt: true
  },
  readOnlyChange() {
    this.setData({
      readOnly: !that.data.readOnly
    })
  },
  onLoad() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context;
      that.editorCtx.setContents({
        html: that.data.dataArry,
      })
    }).exec();
  },
  onBindInput(e) {
    let self = this
    if (e.detail.text.length != 1) {
      self.setData({
        isSublimt: false
      })
    } else {
      self.setData({
        isSublimt: true
      })
    }
  },
  removeFormat() {
    this.editorCtx.removeFormat()
  },
  onEditorReady() {
    const that = this
    wx.createSelectorQuery().select('#editor').context(function (res) {
      that.editorCtx = res.context
    }).exec()
  },
  blur() {
    this.editorCtx.blur()
  },
  format(e) {
    let {
      name,
      value
    } = e.target.dataset
    if (!name) return
    this.editorCtx.format(name, value)

  },
  insertImage() {
    const that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.getpublish(res.tempFilePaths, 0)
      }
    })
  },
  clear() {
    this.editorCtx.clear({
      success: function (res) {
        console.log("clear success")
      }
    })
  },
  insertDivider() {
    this.editorCtx.insertDivider({
      success: function () {
        console.log('insert divider success')
      }
    })
  },
  undo() {
    this.editorCtx.undo()
  },
  redo() {
    this.editorCtx.redo()
  },
  insertDate() {
    const date = new Date()
    const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    this.editorCtx.insertText({
      text: formatDate
    })
  },
  // 递归循环下载图片
  getpublish(list, i) {
    wx.showLoading({
      title: '正在上传第' + (i + 1) + '张',
    })
    var that = this
    wx.uploadFile({
      url: "https://api110.herbplantist.com/sucai/public/index.php/post/post/uploadFile",
      filePath: list[i],
      name: 'file',
      formData: {
        key: 'Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO',
        is_https: 1,
      },
      success(res) {
        var data = JSON.parse(res.data)
        console.log(data)
        if (data.status == 200) {
          that.editorCtx.insertImage({
            src: data.info.url,
            success: function () {}
          })
        }
        if (i + 1 == list.length) {
          wx.showToast({
            title: '上传成功',
          });
        }
        wx.hideLoading()
        if (++i < list.length) {
          that.getpublish(list, i);
        }
      },
    })
  },
  goplay(e) {
    this.setData({
      dataArry: e.detail.html
    })
  },

  sublimt() {
    let that = this
    wx.showModal({
      title: '温馨提示',
      content: '确定提交？',
      success(res) {
        if (res.confirm) {
          wx.showToast({
            title: '提交成功，打开调试看打印',
          })
          console.log(that.data.dataArry)
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  }
})

wxss

@import "../common/lib/weui.wxss";
@import "./assets/iconfont.wxss";

.wrapper {
  padding: 5px;
}

.iconfont {
  display: inline-block;
  padding: 8px 8px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 20px;
}

.toolbar {
  box-sizing: border-box;
  /* border: 1px solid #ccc; */
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}


.ql-container {
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  min-height: 60vh;
  height: auto;
  /* border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
  background: #fff;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.ql-active {
  color: #06c;
}