页面里控件布局如上图所示，是在tab页里放控件。这个“活动描述”tab页里有1/2/3三个控件：

1：Input控件，输入标题

2：小程序原生富文本编辑器的toolbar

3: 小程序原生富文本编辑器的editor

尝试在小程序的富文本编辑器的editor里进行多行编辑，发现随着换行上面的#1/#2控件回被顶出页面再也回不来，如下动图所示：

请教是怎么一回事？应该怎么改？

wxml源代码：

<view class="page">
  <!-- 页头 -->
  <view class="page__hd"></view>
  <!-- 主体 -->
  <view class="page__bd">
    <view class="swiper-tab">
      <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">活动描述</view>
      <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">产品信息</view>
      <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">活动设置</view>
    </view>
    
    <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
      <swiper-item class="activitydesc">
        <view>
          <input class="question-title" placeholder="请输入活动标题" maxlength="40"
            placeholder-style="color:#b3b3b3;font-size:18px;" bindinput="handleTitleInput"></input>
        </view>
        <view class="toolbar" catchtouchend="format">
          <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
          <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header"
            data-value="{{2}}"></i>
          <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header"
            data-value="{{3}}"></i>
          <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
          <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
          <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
          <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
          <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list"
            data-value="ordered"></i>
          <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list"
            data-value="bullet"></i>
        </view>
        <scroll-view scroll-y="true">
          <view>
            <editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar
              showImgResize bindstatuschange="onStatusChange" read-only="{{readOnly}}" bindready="onEditorReady">
            </editor>


          </view>
        </scroll-view>


      </swiper-item>


      <swiper-item class="productinfo">
        <view class="list">团购产品界面</view>
      </swiper-item>


      <swiper-item class="activitysetting">
        <view class="list">团购设置界面</view>
      </swiper-item>


    </swiper>
  </view>
  <!-- 页脚 -->
  <!-- <view class="weui-footer">我是页脚</view> -->
</view>

wxss代码:

@import "../common/assets/iconfont.wxss";



.swiper-tab {
  width: 100%;
  border-bottom: 2rpx solid #ccc;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}


.swiper-tab-item {
  width: 30%;
  color: #434343;
  /* border:1px solid #ccc; */
}


.active {
  color: rgb(89, 246, 160);
  border-bottom: 4rpx solid rgb(89, 246, 128);
}


.swiper {
  text-align: center;
}


.activitydesc {
  height: 30pt;
}


.productinfo{
  height: 30pt;
}


.activitysetting{
  height: 30pt;
}


.toolbar {
  box-sizing: border-box;
  /* border: 1px solid #ccc; */
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}


.container {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
}


.ql-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  font-size: 16px;
  line-height: 1.5;
  overflow: scroll;
  padding: 10px 10px 20px 10px;
  border: 1px solid #ECECEC;
}


.ql-active {
  color: #22C704;
}


.iconfont {
  display: inline-block;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 20px;
}