preface

The introduction of Codemirror in NuxT was explained in the previous blog post. Now, how to implement a vertical two-column code input box that can be adjusted freely like Codepen?

The official documentation

Codemirror provides the resize attribute. Add this CSS attribute to the bottom right corner and you can adjust the height and width of a single object. Set it to resize: vertical; You can limit it to height only.

Further adjustment

However, double column is not so easy. First, the ideal type of up and down column adjustment requires an adjustable bar in the middle, not just the bottom left corner. Second, how do you fit two divs into one div and dynamically adjust the height?

Compress the top div and dynamically update the bottom div to fill it up, using two properties: Flex +overflow

The final configuration

    css:
    .wrapper {
      display: flex;
      flex-direction: column;
      height: 580px;
      overflow: auto;
    }

    .box1, .box2 {
      border-radius: 5px;
      padding: 20px;
      font-size: 100%;
      box-sizing: inherit;
      overflow: auto;//防止拖拽超过wrapper高度
    }

    .handler {
      width: 100%;
      height: 7px;
      padding: 0;
      cursor: ns-resize;
      z-index: 2;//这里是为了防止移动时被codemirror数字覆盖
    }

    .handler::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      margin: 0 auto;
    }

    .CodeMirror {
      resize: vertical;
      overflow: auto !important;
    }
Copy the code
<div class="wrapper">
  <no-ssr placeholder="Codemirror Loading..." class="box1">
    <codemirror v-model="code1"
                :options="cmOption"
                @cursorActivity="onCmCursorActivity"
                @ready="onCmReady"
                @focus="onCmFocus"
                @blur="onCmBlur">
    </codemirror>
  </no-ssr>
  <div class="handler"></div>
  <no-ssr placeholder="Codemirror Loading..." class="box2">
    <codemirror v-model="code2"
                :options="cmOption"
                @cursorActivity="onCmCursorActivity"
                @ready="onCmReady"
                @focus="onCmFocus"
                @blur="onCmBlur">
    </codemirror>
  </no-ssr>
</div>
Copy the code

rendering

There is still a problem with fixing the bottom column. Next time, check how to fix the bottom column of a DIV at the same height. Hope this can be solved.

reference

Vue-resieze deep interpretation

Cm-resieze demo<- This implementation based on textarea works well

Div based single column variable height <- This bar fits the standard I had in mind

codemirror resize+padding

There was also a discussion thread dedicated to Codemirror Resize that was suddenly lost, and that was also very helpful