1

使用 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>启用 Hardbreak 扩展,但无论哪种情况,它都不起作用)。

4

2 回答 2

2

我认为您可以使用粘贴规则扩展。您可以使用正则表达式查找空行并将其替换为<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,
      }),
    ]
  },
})

或者,您可以尝试完全禁用粘贴规则,看看是否能解决您的问题。

new Editor({
  content: `<p>Example Text</p>`,
  extensions: [
    StarterKit,
  ],
  enablePasteRules: false,
})
于 2022-02-09T19:41:40.900 回答
1

我通过在 Tiptap 上开票找到了解决方案。

事实证明,Prosemirror 没有处理多条断线是错误的,但是来自 Tiptap 的相关票证上有人提出了一个很好的建议:

import {Slice, Fragment, Node} from 'prosemirror-model'

function clipboardTextParser(text, context, plain)
{
    const blocks = text.replace().split(/(?:\r\n?|\n)/);
    const nodes = [];

    blocks.forEach(line => {
        let nodeJson = {type: "paragraph"};
        if (line.length > 0) {
            nodeJson.content = [{type: "text", text: line}]
        }
        let node = Node.fromJSON(context.doc.type.schema, nodeJson);
        nodes.push(node);
    });

    const fragment = Fragment.fromArray(nodes);
    return Slice.maxOpen(fragment);
}

new Editor({
    editorProps: {
        clipboardTextParser: clipboardTextParser,
    },
})
于 2022-02-10T10:17:36.270 回答