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