1 wxml页面
<view class="vcontainer">
<swiper class="vswiper" indicator-dots="true" current="0">
<swiper-item class="vswiperitem" >
<editor id="editor1" class="editor1" auto-height bindinput="onEditorInput" bindchange="onEditorChange"
placeholder="请输入摘要" bindready="onEditorReady" />
<view class="editor-toolbar">
<image class='image' src="/pages/images/bold6.svg" bind:tap="onBold" data-name="bold" />
<image class="image" src="/pages/images/tool_red.svg" bind:tap="onColor" data-name="red" />
<image class="image" src="/pages/images/tool_blue.svg" bind:tap="onColor" data-name="blue" />
<image class="image" src="/pages/images/tool_green.svg" bind:tap="onColor" data-name="green" />
<image class="image" src="/pages/images/tool_black.svg" bind:tap="onColor" data-name="black" />
</view>
</swiper-item>
<swiper-item class="vswiperitem">
<editor id="editor2" class="editor2" auto-height bindinput="onEditorInput2" bindchange="onEditorChange"
bindready="onEditorReady2"
placeholder="请输入内容"/>
</swiper-item>
</swiper>
</view>
样式如下,
.vcontainer{
display: flex;
flex-direction: column;
flex: 1;
margin-top: 20rpx;
width: 100%;
overflow: auto;
}
.editor-toolbar{
display: flex;
margin-top: 15rpx;
margin-left:20rpx;
}
.editor1{
flex:1;
height: 100%;
border: 1rpx solid #cccccc;
padding: 15rpx;
font-size: 36rpx;
}
.editor2{
flex:1;
height: 100%;
border: 1rpx solid #cccccc;
padding: 15rpx;
}
.vswiper{
display: block;
flex: 1;
width: 100%;
}
.vswiperitem{
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
2 js中为每个editor设置内容
onEditorReady(e) {
console.log("编辑器1 Ready ");
const that = this;
wx.createSelectorQuery().select('#editor1').context().exec((res) => {
that.editorCtx = res[0].context;
if (this.data.pagetype == "pagearticle") {
that.editorCtx.setContents({
html: that.data.articleinfo.zhailu
});
} else if (this.data.pagetype == "pagexiefa") {
that.editorCtx.setContents({
html: that.data.xiefainfo.zhailu
});
}
console.log('---编辑器1初始化完成--', res);
});
// wx.createSelectorQuery().select('#editor2').context().exec((res) => {
// that.editorCtx2 = res[0].context;
// if (this.data.pagetype == "pagearticle") {
// that.editorCtx2.setContents({
// html: that.data.articleinfo.content
// });
// } else if (this.data.pagetype == "pagexiefa") {
// that.editorCtx2.setContents({
// html: that.data.xiefainfo.content
// });
// }
// console.log('---编辑器2初始化完成--', res);
// });
},
onEditorReady2(e) {
const that = this;
wx.createSelectorQuery().select('#editor2').context().exec((res) => {
that.editorCtx2 = res[0].context;
setTimeout(() => {
if (this.data.pagetype == "pagearticle") {
that.editorCtx2.setContents({
html: that.data.articleinfo.content
});
} else if (this.data.pagetype == "pagexiefa") {
that.editorCtx2.setContents({
html: that.data.xiefainfo.content
}, 1000);
}
});
console.log('---编辑器2初始化完成--');
});
前端两个swiperitem并排显示了,而没有单独显示第一个swiperitem,怎么回事?前端显示效果如下
