vue.js - Tiptap编辑器，如何粘贴多个空行？

Question

使用 Tiptap 编辑器的基本版本:

<template>
  <div v-if="editor">
    <editor-content :editor="editor" />
  </div>
</template>

<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

export default {
  components: {
    EditorContent,
  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.editor = new Editor({
      extensions: [
        Document,
        Paragraph,
        Text,
      ],
      content: `
        <p>The Paragraph extension is not required, but it’s very likely you want to use it. It’s needed to write paragraphs of text. 🤓</p>
      `,
    })
  },

  beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

(可在 https://tiptap.dev/api/nodes/paragraph 进行测试)

我注意到在粘贴多行文本时，例如:

Hello


This is a test with two break lines at the above and three after this:



Thanks!

结果是:

<p>Hello</p>
<p>This is a test with two break lines at the above and three after this:</p>
<p>Thanks!</p>

在这种情况下，所有“多条”分隔线都已被删除!

有没有办法保留它们，这意味着一旦执行粘贴，内容应该是:

<p>Hello</p>
<p></p>
<p></p>
<p>This is a test with two break lines at the above and three after this:</p>
<p></p>
<p></p>
<p></p>
<p>Thanks!</p>

(通过启用 Hardbreak 扩展，我可以使用 <p><br /></p> 而不是 <p></p>，但在任何一种情况下，它都不起作用)。

Answer 1

我想你可以使用 Paste Rules扩大。您可以使用正则表达式查找空行并将其替换为 <br> .这是 TipTap 文档中的示例:

// Check pasted content for the ~single tilde~ markdown syntax
import Strike from '@tiptap/extension-strike'
import { markPasteRule } from '@tiptap/core'

// Default:
// const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/g

// New:
const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))/g

const CustomStrike = Strike.extend({
  addPasteRules() {
    return [
      markPasteRule({
        find: pasteRegex,
        type: this.type,
      }),
    ]
  },
})

或者，您可以尝试 disabling the paste rules一起看看是否能解决您的问题。

new Editor({
  content: `<p>Example Text</p>`,
  extensions: [
    StarterKit,
  ],
  enablePasteRules: false,
})