1.调用方page

article.wxml

<view class="row-content">
<form catchsubmit="formSubmit">
  <view class="row-item">
    <input type="text" class="row-input" name="title" placeholder="请输入标题" value="{{title}}"/>
  </view>
  <view class="row-item">
    <hw-editor id="h-editor" uploadImageURL="{{uploadUrl}}" class="hg-editor" name="referenceAnswer"
      placeholder="请输入参考范文" showTabBar="{{true}}" textVal="{{topic}}" bind:input="onInputtingDesc"></hw-editor>
  </view>
  <view class="row_btn">
    <view class="row-item"><button style="margin: 30rpx 0;background-color:red;" disabled="{{submit}}" data-step="0" type="primary" formType="submit">保存草稿</button></view>
    <view class="row-item"><button style="margin: 30rpx 0" type="primary" data-step="1" disabled="{{submit}}" formType="submit">提交征文</button></view>
  </view>

</form>
</view>

2.article.json 配置页面

{
  "usingComponents": {
    "hw-editor":"../../component/editorui/editor"
  }
}

3.aticle.wxss

.row-content{
  display: flex;
  justify-self: start;
  align-self: start;
  justify-content: flex-start;
  flex-direction: column;
}
.row-item{
  margin: 10rpx 20rpx;
  align-items: center;
}
.row-input{
  font-size: 30rpx;
  margin: 50rpx 10rpx;
}
.row_btn{
  display: flex;
  justify-content: center;
}

4、article.js 截取主要部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    id:"",
    orderId: "",
    title: "",
    submit: false,
    uploadUrl: api.uploadSave,
    topic: {
      text: "",
      originText: ""
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let id = options.id
    // 回显内容
    if (id) {
      this.getArticle(id);
    } else {
      wx.showToast({
        title: "未领取征文任务",
      })
    }
  },
  getArticle(id) {
    var vm = this;
    util.request(api.getEssayById, {
      id: id
    }, 'GET').then(function (res) {
      if (res.code === 0) {
        vm.setData({
          id:res.data.id,
          topic:JSON.parse(res.data.content),
          orderId: res.data.orderId,
          title:res.data.title,
        },function(){
          let myComponent = vm.selectComponent('#h-editor'); 
          myComponent._onInputtInit(vm);
        });
      }
    });
  },
  onInputtingDesc: function (e) {
      let html = e.detail.html; //相关的html代码
      let originText = e.detail.text; //text，不含有任何的html标签
      this.setData({
        ['topic.text']: html,
        ['topic.originText']: originText
      });
  },
/**
* 表单提交操作
*/
  formSubmit: function (e) {
    let step = e.detail.target.dataset.step
    let vm = this;
    util.request1(api.articleSave, {
      id:vm.data.id,
      orderId: vm.data.orderId,
      userId: wx.getStorageSync('userId'),
      title: e.detail.value.title,
      content: JSON.stringify(vm.data.topic),
      commitStatus: step
    }).then(function (res) {
      if (res.errno === 0) {
        // 需要返回或者刷新上一页内容
        debugger
      }
    });
  }
})

5、自定义封装地址

https://gitee.com/idataway_liuhongwei/hw-editor.git