Merge branch 'dev'

.stylelintrc

@@ -1,6 +1,9 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "no-empty-source": null
+    "no-empty-source": null,
+    "selector-pseudo-element-no-unknown": [true, {
+      "ignorePseudoElements": ["v-deep"]
+    }]
   }
 }

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>
+```

package.json

@@ -59,7 +59,9 @@
     "@ckeditor/ckeditor5-table": "^16.0.0",
     "@ckeditor/ckeditor5-theme-lark": "^16.0.0",
     "@ckeditor/ckeditor5-upload": "^16.0.0",
+    "@ckeditor/ckeditor5-utils": "^16.0.0",
     "@ckeditor/ckeditor5-vue": "^1.0.1",
+    "@femessage/img-preview": "^1.4.1",
     "github-markdown-css": "^3.0.1",
     "lodash-es": "^4.17.15",
     "marked": "^1.0.0"

src/assets/richtext.less

@@ -0,0 +1,58 @@
+@import url('~github-markdown-css/github-markdown.css');
+
+.v-editor .markdown-body,
+.v-editor.markdown-body {
+  hr {
+    background-color: #e8e8e8;
+    height: 2px;
+    margin: 12px 0;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  ol,
+  ul {
+    padding-left: 1.5em;
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    padding-inline-start: 40px;
+  }
+
+  ul:not(.todo-list) {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    display: list-item;
+    text-align: -webkit-match-parent;
+  }
+
+  ol ol {
+    list-style-type: lower-alpha;
+
+    & ol {
+      list-style-type: lower-roman;
+    }
+  }
+
+  i {
+    font-style: italic;
+  }
+
+  // 图片、表格默认靠左
+  figure {
+    &.image,
+    &.table {
+      margin: 1em 0;
+    }
+  }
+}

src/defaultEditorOptions.js

@@ -130,7 +130,13 @@ export default {
   },
   image: {
     resizeUnit: 'px',
-    toolbar: ['imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative']
+    toolbar: [
+      'imageStyle:full',
+      'imageStyle:side',
+      '|',
+      'imageTextAlternative',
+      'imagePreview'
+    ]
   },
   table: {
     contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']

src/plugin/AttachmentUpload.js

@@ -22,12 +22,16 @@ export default class AttachmentUpload extends Plugin {
       // 文件选择器类型按钮
       const view = new FileDialogButtonView(locale)
 
+      const command = editor.commands.get('attachmentUpload')
+
       view.buttonView.set({
         label: '附件上传',
         icon: attachmentIcon,
         tooltip: true
       })
 
+      view.buttonView.bind('isEnabled').to(command)
+
       // 文件选择结束回调
       view.on('done', (_, file) => {
         editor.execute('attachmentUpload', {file})
@@ -77,7 +81,7 @@ class AttachmentCommand extends Command {
            * 只能 emoji 了
            * 备选：🔗📂📚📦
            */
-          const linkText = writer.createText(`🔗${file.name}`, {linkHref: url})
+          const linkText = writer.createText(`🔗 ${file.name}`, {linkHref: url})
 
           let selection
           if (filenameTxtPlaceholderRange) {

src/plugin/Blockquote.js

@@ -16,7 +16,7 @@ class BlockQuoteUICustom extends BlockQuoteUI {
       const buttonView = new ButtonView(locale)
 
       buttonView.set({
-        label: '代码块',
+        label: '引用',
         icon: quoteIcon,
         tooltip: true,
         isToggleable: true

src/plugin/ImagePreview.js

@@ -0,0 +1,32 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'
+
+import imageIcon from '../assets/zoom.svg'
+
+export default previewFunc =>
+  class ImagePreview extends Plugin {
+    static get pluginName() {
+      return 'imagePreview'
+    }
+    init() {
+      const editor = this.editor
+
+      editor.ui.componentFactory.add('imagePreview', locale => {
+        const view = new ButtonView(locale)
+        view.set({
+          label: editor.t('Preview'),
+          icon: imageIcon,
+          tooltip: true
+        })
+
+        // Callback executed once the image preview button is clicked.
+        view.on('execute', () => {
+          const el = this.editor.model.document.selection.getSelectedElement()
+          const picUrl = el && el.getAttribute('src')
+          previewFunc(picUrl)
+        })
+
+        return view
+      })
+    }
+  }

src/plugin/ImageUploader.js → src/plugin/Uploader.js

@@ -1,23 +1,25 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
 import {UploadAdapter} from '../utils/adapter'
 
-export default uploadImg =>
-  class ImageUploadAdaptor extends Plugin {
+/**
+ * @param {function} uploadFunc upload function for upload image and attachment
+ */
+export default uploadFunc =>
+  class Uploader extends Plugin {
     /**
      * @inheritDoc
      */
     static get pluginName() {
-      return 'ImageUploadAdaptor'
+      return 'Uploader'
     }
 
     /**
      * @inheritDoc
      */
     init() {
       const {editor} = this
-      const options = editor.config.get('imageUploadOption')
       editor.plugins.get('FileRepository').createUploadAdapter = loader => {
-        return new UploadAdapter(loader, options, uploadImg)
+        return new UploadAdapter(loader, uploadFunc)
       }
     }
   }

src/translations/en.js

@@ -0,0 +1,5 @@
+import {add} from '@ckeditor/ckeditor5-utils/src/translation-service.js'
+
+add('en', {
+  Preview: 'Preview'
+})

src/translations/index.js

@@ -0,0 +1,2 @@
+import './en.js'
+import './zh-cn.js'

src/translations/zh-cn.js

@@ -0,0 +1,5 @@
+import {add} from '@ckeditor/ckeditor5-utils/src/translation-service.js'
+
+add('zh-cn', {
+  Preview: '预览'
+})

src/utils/adapter.js

@@ -1,29 +1,28 @@
 export class UploadAdapter {
-  constructor(loader, options, uploadImg) {
+  constructor(loader, uploadFunc) {
     this.loader = loader
-    this.options = options
-    this.uploadImg = uploadImg
+    this.uploadFunc = uploadFunc
   }
 
+  /**
+   *
+   * @param {string} fileMIMEType mime-type
+   * see: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
+   */
   async upload() {
-    const file = await this.loader.file
-    return new Promise((resolve, reject) => {
+    try {
+      const file = await this.loader.file
       // 图片多选时会逐个调用此方法
-      this.uploadImg(file)
-        .then(url => {
-          // 没有url意味着上传没有执行，需要reject
-          if (url) {
-            resolve({
-              default: url
-            })
-          } else {
-            reject()
-          }
-        })
-        .catch(e => {
-          reject(e)
-        })
-    })
+      const url = await this.uploadFunc(file)
+      // 没有url意味着上传没有执行，需要reject
+      if (url) {
+        return {default: url}
+      } else {
+        return Promise.reject(url)
+      }
+    } catch (error) {
+      return Promise.reject(error)
+    }
   }
 
   abort() {}