Merge branch 'dev'

docs/placeholder.md

@@ -0,0 +1,19 @@
+基本用法
+
+```vue
+<template>
+  <div>
+    <v-editor v-model="content" :placeholder="placeholder"/>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      content: '',
+      placeholder: "欢迎使用 v-editor"
+    }
+  }
+}
+</script>
+```

package.json

@@ -61,7 +61,8 @@
     "@ckeditor/ckeditor5-upload": "^16.0.0",
     "@ckeditor/ckeditor5-vue": "^1.0.1",
     "github-markdown-css": "^3.0.1",
-    "lodash-es": "^4.17.15"
+    "lodash-es": "^4.17.15",
+    "marked": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.3",

src/defaultEditorOptions.js

@@ -35,6 +35,7 @@ import ExtraFormat from './plugin/ExtraFormat'
 import RemoveFormat from './plugin/RemoveFormat'
 import AttachmentUpload from './plugin/AttachmentUpload'
 import FixComposing from './plugin/FixComposing'
+import TransformMD from './plugin/TransformMD'
 
 export default {
   plugins: [
@@ -69,6 +70,7 @@ export default {
     ExtraFormat,
     RemoveFormat,
     AttachmentUpload,
+    TransformMD,
     FixComposing
   ],
   toolbar: [

src/plugin/TransformMD.js

@@ -0,0 +1,44 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin'
+import marked from 'marked'
+import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor'
+
+export default class TransformMD extends Plugin {
+  afterInit() {
+    const editor = this.editor
+    const model = editor.model
+    const view = editor.editing.view
+    const viewDocument = view.document
+    // 把富文本转成编辑器看得懂的内容
+    const dataProcessor = new HtmlDataProcessor(viewDocument)
+
+    //等同 addEventListener
+    this.listenTo(viewDocument, 'clipboardInput', (event, data) => {
+      const dataTransfer = data.dataTransfer
+      // 1 | - | * | # | ![] | []()
+      const regex = /[-*1#]{1,6}\s+|!?\[\S*\][\s*|(\S*)].*?[-*1#]?/g
+      let text = dataTransfer.getData('text/plain')
+
+      // 确认是 markdown 应该八九不离十
+      if (regex.test(text)) {
+        let content = marked(text, {
+          breaks: true
+        })
+        content = dataProcessor.toView(content)
+
+        if (!content.isEmpty) {
+          const dataController = this.editor.data
+          const modelFragment = dataController.toModel(
+            content,
+            '$clipboardHolder'
+          )
+
+          model.insertContent(modelFragment)
+        }
+        view.scrollToTheSelection()
+        // 终止事件，不会继续往下传；
+        // 如果不满足，也就是 event 放行，即会接下去的监听事件继续工作
+        event.stop()
+      }
+    })
+  }
+}

src/v-editor.vue

@@ -34,6 +34,13 @@ export default {
     ckeditor: CKEditor.component
   },
   props: {
+    /**
+     * 编辑区占位符
+     */
+    placeholder: {
+      type: String,
+      default: ''
+    },
     /**
      * 编辑区高度（不包括 toolbar），支持数字类型（默认单位 px）和 css 长度字符串
      */
@@ -84,6 +91,7 @@ export default {
       return merge(
         defaultEditorOptions,
         {
+          placeholder: this.placeholder,
           extraPlugins: [ImageUploader(uploadImg)],
           autosave: {
             save: debounce(editor => {
@@ -157,6 +165,10 @@ export default {
     }
   }
 
+  .ck.ck-editor__editable > .ck-placeholder::before {
+    color: #c0c4cc;
+  }
+
   ol,
   ul {
     padding-left: 1.5em;

yarn.lock

@@ -8237,6 +8237,11 @@ markdown-to-jsx@^6.6.8, markdown-to-jsx@^6.9.3:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
+marked@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/marked/download/marked-1.0.0.tgz?cache=0&sync_timestamp=1587431410234&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarked%2Fdownload%2Fmarked-1.0.0.tgz#d35784245a04871e5988a491e28867362e941693"
+  integrity sha1-01eEJFoEhx5ZiKSR4ohnNi6UFpM=
+
 matcher@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/matcher/download/matcher-1.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmatcher%2Fdownload%2Fmatcher-1.1.1.tgz#51d8301e138f840982b338b116bb0c09af62c1c2"