fupin/components/form/form-rich/form-rich.js

// components/form/form-rich/form-rich.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    label: String,
    value: String,
  },

  observers: {
    'value': function (val) {
      let self = this;
      if (val) {
        self.setData({
          descriptionStorage: val
        })
        self.createSelectorQuery().select('#editorContent').context(function (res) {
          self.editorCtx = res.context;
          self.editorCtx.setContents({ html: self.data.descriptionStorage })
        }).exec()
      }
    },
  },

  lifetimes: {
    attached() {
      const platform = wx.getSystemInfoSync().platform
      const isIOS = platform === 'ios'
      this.setData({
        isIOS
      })
      const self = this
      this.updatePosition(0)
      let keyboardHeight = 0
      wx.onKeyboardHeightChange(res => {
        if (res.height === keyboardHeight) return
        const duration = res.height > 0 ? res.duration * 1000 : 0
        keyboardHeight = res.height
        setTimeout(() => {
          wx.pageScrollTo({
            scrollTop: 0,
            success() {
              self.updatePosition(keyboardHeight)
              self.editorCtx.scrollIntoView()
            }
          })
        }, duration)
      })
    }
  },
  data: {
styleCss: 'padding: 38rpx 0; line-height: 36rpx font-size: 28rpx;background-color: #ffffff;',
    keyboardHeight: 0,
    isIOS: false,
    formats: {},
    descriptionStorage: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 个人简介内容
    onEditorContentReady() {
      const self = this;
      self.createSelectorQuery().select('#editorContent').context(function (res) {
        self.editorCtx = res.context;
        self.editorCtx.setContents({ html: self.data.descriptionStorage })
      }).exec()
    },
    onEditorContentInput(e) {
      var self = this;
      self.setData({
        descriptionStorage: e.detail.html.replace(/wx:nodeid="\d+"/g, '')
      })
    },

    click() {
      var self = this;
      wx.showModal({
        title: '清空描述内容',
        content: '是否要清空描述内容',
        confirmText: '清空',
        showCancel: true,
        success(res) {
          if (res.confirm) {
            self.setData({
              descriptionStorage: ''
            })
            self.editorCtx.setContents({
              html: self.data.descriptionStorage
            })
            self.triggerEvent('delValue')
          }
        }
      })
    },

    send(e) {
      var self = this;
      if (self.data.descriptionStorage) {
        self.triggerEvent('getValue', {
          val: self.data.descriptionStorage
        })
      } else {
        wx.showToast({
          icon: 'none',
          title: '未填写描述',
        })
        self.triggerEvent('getValue', {
          val: ''
        })
      }
    },


    updatePosition(keyboardHeight) {
      const toolbarHeight = 148;
      const {
        windowHeight,
        platform
      } = wx.getSystemInfoSync()
      let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
      this.setData({
        editorHeight,
        keyboardHeight
      })
    },
    calNavigationBarAndStatusBar() {
      const systemInfo = wx.getSystemInfoSync()
      const {
        statusBarHeight,
        platform
      } = systemInfo
      const isIOS = platform === 'ios'
      const navigationBarHeight = isIOS ? 44 : 48
      return statusBarHeight + navigationBarHeight
    },
    onStatusChange(e) {
      const formats = e.detail
      this.setData({
        formats
      })
    },
    format(e) {
      let {
        name,
        value
      } = e.target.dataset
      console.log(name)
      return this.editorCtx.format(name, value)
    },
  }
})