feat: 添加 autosize 功能

docs/autosize.md

@@ -0,0 +1,25 @@
+设置自适应内容高度
+
+```vue
+<template>
+  <div>
+    autosize: {{autosize}}
+    <v-editor v-model="content" :autosize="autosize"/>
+    <el-button @click="autosize.maxRows++">增加maxRows</el-button>
+    <el-button @click="autosize.minRows++">增加minRows</el-button>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      content: '',
+      autosize:{
+        maxRows:5,
+        minRows:3
+      }
+    }
+  },
+}
+</script>
+```

src/v-editor.vue

@@ -39,6 +39,9 @@ import CKEditor from '@ckeditor/ckeditor5-vue'
 import fullScreenIcon from './assets/fullscreen.vue'
 import fullScreenExitIcon from './assets/fullscreenexit.vue'
 
+const ROW_HEIGHT = 24
+const INNER_PADDING = 16
+
 export default {
   name: 'VEditor',
   components: {
@@ -56,7 +59,9 @@ export default {
       default: ''
     },
     /**
+     * @deprecated
      * 编辑区高度（不包括 toolbar），支持数字类型（默认单位 px）和 css 长度字符串
+     * 如果设置了 autosize，该选项将失效
      */
     height: {
       type: [Number, String],
@@ -99,6 +104,13 @@ export default {
       default() {
         alert('上传失败，请重试')
       }
+    },
+    /**
+     * 自适应内容高度，传入对象，如，{ minRows: 2, maxRows: 6 }
+     */
+    autosize: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -133,19 +145,60 @@ export default {
         },
         this.editorOptions
       )
+    },
+    autosizeIsEmpty() {
+      return !Object.keys(this.autosize).length
     }
   },
   watch: {
-    height: 'setHeight'
+    height: 'setHeight',
+    autosize: {
+      handler: 'resizeHeight',
+      deep: true
+    }
   },
   methods: {
+    resizeHeight() {
+      if (this.autosizeIsEmpty || !this.editor) {
+        return
+      }
+      const {minRows, maxRows} = this.autosize
+      const {element} = this.editor.ui.view
+      const main = element.querySelector('.ck-editor__main')
+      const content = element.querySelector('.ck-content')
+      const result = {}
+      const minHeight = ROW_HEIGHT * minRows + INNER_PADDING || 1
+      const maxHeight = ROW_HEIGHT * maxRows + INNER_PADDING || Infinity
+      content.style.minHeight = `${minHeight}px`
+      const resize = () => {
+        this.$nextTick(() => {
+          let height = content.scrollHeight
+          if (height <= minHeight) {
+            result.height = `${minHeight}px`
+          }
+          if (height > minHeight && height < maxHeight) {
+            result.height = ''
+          }
+          if (height >= maxHeight) {
+            result.height = `${maxHeight}px`
+          }
+          content.style.minHeight = `${minHeight}px`
+          main.style.height = result.height
+        })
+      }
+      resize()
+      this.editor.model.document.on('change:data', resize)
+    },
+    imagePreview(url) {
+      this.previewImageUrl = url
+    },
     setHeight() {
-      if (!this.height || !this.editor) return
+      if (!this.height || !this.editor || !this.autosizeIsEmpty) return
       let {height} = this
       if (!isNaN(+height)) height += 'px'
       const {element} = this.editor.ui.view
-      const content = element.querySelector('.ck-editor__main')
-      content.style.height = height
+      const main = element.querySelector('.ck-editor__main')
+      main.style.height = height
     },
     onInput(content) {
       this.$emit('input', content)
@@ -154,6 +207,7 @@ export default {
       this.editor = editor
       editor.ui.view.element.classList.add('markdown-body')
       this.setHeight()
+      this.resizeHeight()
     },
     uploadFile(file) {
       const uploadToAli = this.$refs.uploadToAli
@@ -187,6 +241,21 @@ export default {
 </script>
 
 <style src="github-markdown-css/github-markdown.css"></style>
+<style lang="less" scoped>
+.v-editor::v-deep {
+  .markdown-body {
+    hr {
+      background-color: #e8e8e8;
+      height: 2px;
+      margin: 13px 0;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>
 <style lang="less">
 .v-editor {
   position: relative;
@@ -200,40 +269,45 @@ export default {
   @scrollbar-color: #c6c7ca;
   @scrollbar-size: 4px;
   @ck-header-label-width: 45px;
+
   .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
     box-shadow: none;
   }
+
   .ck.ck-editor__main {
-    /*控制整个滚动条*/
+    /* 控制整个滚动条 */
     ::-webkit-scrollbar {
       width: @scrollbar-size;
       height: @scrollbar-size;
     }
 
-    /*滚动条两端方向按钮*/
+    /* 滚动条两端方向按钮 */
     ::-webkit-scrollbar-button {
       display: none;
     }
 
-    /*滚动条中间滑动部分*/
+    /* 滚动条中间滑动部分 */
     ::-webkit-scrollbar-thumb {
       background-color: @scrollbar-color;
       border-radius: @scrollbar-size / 2;
     }
 
-    /*滚动条右下角区域*/
+    /* 滚动条右下角区域 */
     ::-webkit-scrollbar-corner {
       display: none;
     }
   }
+
   .ck.ck-toolbar__items {
     height: @toolbar-height;
+
     .ck.ck-button,
     a.ck.ck-button {
       width: @button-size;
       height: @button-size;
       line-height: @button-size;
     }
+
     .ck.ck-list__item {
       .ck.ck-button,
       a.ck.ck-button {
@@ -242,35 +316,39 @@ export default {
         line-height: 1;
       }
     }
+
     .ck.ck-dropdown {
       .ck-button.ck-dropdown__button {
         width: 100%;
       }
+
       .ck-dropdown__arrow {
         margin: 0;
         right: 0;
       }
     }
+
     .ck.ck-color-table {
       .ck-color-table__remove-color {
         width: 100%;
         padding-left: 8px;
       }
     }
   }
+
   .ck.ck-button,
   a.ck.ck-button {
     margin: 0;
     padding: 0;
     min-width: unset;
     min-height: unset;
-
     cursor: pointer;
     // margin: 12px 0;
     .ck.ck-icon {
       width: @icon-size;
       height: @icon-size;
     }
+
     &:not(.ck-disabled):hover {
       background: @ck-button-hover-background-color;
     }
@@ -282,17 +360,21 @@ export default {
   }
 
   @button-distance: 4px;
+
   .ck.ck-toolbar {
     border-color: @ck-border-color;
     background: #fff;
+
     > .ck-toolbar__items > * {
       margin-right: @button-distance;
     }
+
     > .ck-toolbar__items > *,
     > .ck.ck-toolbar__grouped-dropdown {
       padding: 0;
       margin: 0;
     }
+
     .ck.ck-toolbar__separator {
       height: @icon-size;
       margin: auto @button-distance*2;
@@ -341,8 +423,8 @@ export default {
     display: block;
     margin-block-start: 1em;
     margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
     padding-inline-start: 40px;
   }
 
@@ -355,17 +437,20 @@ export default {
     }
   }
   @full-screen-index: 10000;
+
   .toggle-full-screen {
     position: absolute;
     width: @icon-size;
     height: @icon-size;
     right: 8px;
     top: 48px;
     cursor: pointer;
+
     &.is-full-screen {
       position: fixed;
       z-index: @full-screen-index;
     }
+
     > svg {
       width: 100%;
       height: 100%;