feat: 自动转换 markdown 文本

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()
+      }
+    })
+  }
+}

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"