feat: customPaste

wangeditor-team · Aug 13, 2021 · 0f25f5c · 0f25f5c
1 parent 1675a25
commit 0f25f5c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 0 deletions.
diff --git a/packages/core/src/config/interface.ts b/packages/core/src/config/interface.ts
@@ -38,6 +38,12 @@ export interface IEditorConfig {
   onFocus?: (editor: IDomEditor) => void
   onBlur?: (editor: IDomEditor) => void
 
+  /**
+   * 自定义粘贴。返回 true 则继续粘贴，返回 false 则自行实现粘贴，阻止默认粘贴
+   */
+  // TODO 补充到文档中（写一个异步的例子，参考 examples/default-mode.html ）
+  customPaste?: (editor: IDomEditor, e: ClipboardEvent) => boolean
+
   // edit state
   scroll: boolean
   placeholder?: string

diff --git a/packages/core/src/text-area/event-handlers/beforeInput.ts b/packages/core/src/text-area/event-handlers/beforeInput.ts
@@ -10,6 +10,7 @@ import TextArea from '../TextArea'
 import { hasEditableTarget } from '../helpers'
 import { DOMStaticRange } from '../../utils/dom'
 import { HAS_BEFORE_INPUT_SUPPORT } from '../../utils/ua'
+import { EDITOR_TO_CAN_PASTE } from '../../utils/weak-maps'
 
 // 补充 beforeInput event 的属性
 interface BeforeInputEventType {
@@ -139,6 +140,10 @@ function handleBeforeInput(e: Event, textarea: TextArea, editor: IDomEditor) {
         textarea.isComposing = false
       }
 
+      if (type === 'insertFromPaste') {
+        if (!EDITOR_TO_CAN_PASTE.get(editor)) break // 不可默认粘贴
+      }
+
       if (data instanceof DataTransfer) {
         // 这里处理非纯文本（如 html 图片文件等）的粘贴。对于纯文本的粘贴，使用 paste 事件
         editor.insertData(data)

diff --git a/packages/core/src/text-area/event-handlers/paste.ts b/packages/core/src/text-area/event-handlers/paste.ts
@@ -9,14 +9,27 @@ import TextArea from '../TextArea'
 import { hasEditableTarget } from '../helpers'
 import { isPlainTextOnlyPaste } from '../../utils/dom'
 import { HAS_BEFORE_INPUT_SUPPORT } from '../../utils/ua'
+import { EDITOR_TO_CAN_PASTE } from '../../utils/weak-maps'
 
 function handleOnPaste(e: Event, textarea: TextArea, editor: IDomEditor) {
+  EDITOR_TO_CAN_PASTE.set(editor, true) // 标记为：可执行默认粘贴
+
   const event = e as ClipboardEvent
   const { readOnly } = editor.getConfig()
 
   if (readOnly) return
   if (!hasEditableTarget(editor, event.target)) return
 
+  const { customPaste } = editor.getConfig()
+  if (customPaste) {
+    const res = customPaste(editor, event)
+    if (!res) {
+      // 自行实现粘贴，不执行默认粘贴
+      EDITOR_TO_CAN_PASTE.set(editor, false) // 标记为：不可执行默认粘贴
+      return
+    }
+  }
+
   // 如果支持 beforeInput 且不是纯粘贴文本（如 html、图片文件），则使用 beforeInput 来实现
   // 这里只处理：不支持 beforeInput 或者 粘贴纯文本
   if (HAS_BEFORE_INPUT_SUPPORT && !isPlainTextOnlyPaste(event)) return

diff --git a/packages/core/src/utils/weak-maps.ts b/packages/core/src/utils/weak-maps.ts
@@ -76,3 +76,6 @@ export const EDITOR_TO_SELECTION: WeakMap<Editor, Range> = new WeakMap()
 
 // editor -> eventEmitter 自定义事件
 export const EDITOR_TO_EMITTER: WeakMap<Editor, Emitter> = new WeakMap()
+
+// editor 是否可执行粘贴
+export const EDITOR_TO_CAN_PASTE: WeakMap<Editor, boolean> = new WeakMap()
diff --git a/packages/editor/examples/default-mode.html b/packages/editor/examples/default-mode.html
@@ -74,6 +74,17 @@
       console.log('onBlur', editor)
     }
 
+    // editorConfig.customPaste = (editor, event) => {
+    //   console.log('customPage')
+    //   // editor.insertText('xxx------') // 同步
+    //   setTimeout(() => {
+    //     editor.insertText('yyy------') // 异步
+    //   }, 1000)
+    //   return false // 阻止默认粘贴，自定义实现粘贴
+
+    //   // return true // 执行默认粘贴
+    // }
+
     // create
     let editor, toolbar
     document.getElementById('btn-create').addEventListener('click', () => {