表单内容较多时,通常需要输入换行的数据,此处便需要用到富文本编辑器
富文本编辑器的渲染
<editor class="editorStyle" style="height:auto" id="editor" placeholder="请输入内容" bindready="onEditorReady" bindinput="contentChange">
</editor>
.editorStyle {
border: 1rpx solid rgb(235, 229, 229);
border-radius: 10rpx;
padding: 30rpx;
margin: 30rpx auto;
width: 96%;
box-sizing: border-box;
}
// 当富文本编辑器挂载完成时执行
onEditorReady() {
let that = this
// 修改时,反显数据
this.createSelectorQuery().select("#editor")
.context((res) => {
res.context.setContents({
html: that.data.formData.content,
});
})
.exec();
},
效果为
// 富文本编辑器内容变化时,同步更新表单字段内容 formData.content
contentChange(e) {
let contentHtml = e.detail.html
this.setData({
'formData.content': contentHtml
})
},
富文本内容的渲染
因富文本内容是包含 html 标签的数据,无法直接在微信小程序中渲染,需放入 rich-text 中
<view class="contentBox">
<rich-text nodes="{{detail.content}}"></rich-text>
</view>
.contentBox {
padding: 30rpx;
/* 文本分散对齐 */
text-align: justify;
}
效果如下: