feat: 添加 autosize 功能 (#115)

FEMessage · Sep 2, 2020 · 1513cb1 · 1513cb1
1 parent e7baaef
commit 1513cb1
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 5 deletions.
diff --git a/docs/autosize.md b/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>
+```
diff --git a/src/assets/richtext.less b/src/assets/richtext.less
@@ -5,7 +5,11 @@
   hr {
     background-color: #e8e8e8;
     height: 2px;
-    margin: 13px 0;
+    margin: 12px 0;
+  }
+
+  p {
+    margin-bottom: 0;
   }
 
   ol,

diff --git a/src/v-editor.vue b/src/v-editor.vue
@@ -45,6 +45,9 @@ import fullScreenExitIcon from './assets/fullscreenexit.vue'
 import ImagePreview from './plugin/ImagePreview'
 import './translations'
 
+const ROW_HEIGHT = 24
+const INNER_PADDING = 8 * 2 + 1 * 2 // .ck-content padding + border
+
 export default {
   name: 'VEditor',
   components: {
@@ -63,7 +66,9 @@ export default {
       default: ''
     },
     /**
+     * @deprecated
      * 编辑区高度（不包括 toolbar），支持数字类型（默认单位 px）和 css 长度字符串
+     * 如果设置了 autosize，该选项将失效
      */
     height: {
       type: [Number, String],
@@ -111,6 +116,13 @@ export default {
       default() {
         alert('上传失败，请重试')
       }
+    },
+    /**
+     * 自适应内容高度，传入对象，如，{ minRows: 2, maxRows: 6 }
+     */
+    autosize: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -150,22 +162,63 @@ 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
+      }
+      let {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 = {}
+      if (!minRows) {
+        minRows = 3
+      }
+      const minHeight = ROW_HEIGHT * minRows + INNER_PADDING
+      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)
@@ -176,6 +229,7 @@ export default {
         .querySelector('.ck-editor__main')
         .classList.add('markdown-body')
       this.setHeight()
+      this.resizeHeight()
     },
     /**
      * @param {File} file 选择的文件
@@ -302,6 +356,10 @@ export default {
               margin-top: 8px;
             }
 
+            &.ck-editor__editable_inline > :last-child {
+              margin-bottom: 8px;
+            }
+
             &:not(.ck-editor__nested-editable).ck-focused {
               box-shadow: none;
             }
@@ -330,6 +388,7 @@ export default {
   &.ck-balloon-panel {
     z-index: 3000;
   }
+
   .ck-button {
     margin: 0;
     padding: 0;