3

使用 TipTap，我试图避免添加 a <br />，而是创建 a ，当用户点击但我无法使其工作时<p></p>，焦点在里面。<p>|</p>shift-Enter

这是我到目前为止所做的：

new (class extends Extension {
    keys () {
        return {
            'Shift-Enter' (state, dispatch, view) {
                const { schema, tr } = view.state
                const paragraph = schema.nodes.paragraph

                console.log(tr.storedMarks)
                const transaction = tr.deleteSelection().replaceSelectionWith(paragraph.create(), true).scrollIntoView()
                view.dispatch(transaction)
                return true
            }
        }
    }
})()

我怎样才能做到这一点？

4

1 回答 1

0

我不知道这是否仍然相关，但当我在寻找同样的东西时，我找到了两种方法来完成这项工作。

注意：我使用的是tiptap v2，如果这不是问题，那么：

我覆盖了 HardBreak 扩展，因为它是使用Shift-Enter键绑定的扩展。它看起来像;

const CustomHardBreak = HardBreak.extend({
  addKeyboardShortcuts() {
    return {
      "Mod-Enter": () => this.editor.commands.setHardBreak(),
      "Shift-Enter": () => this.editor.commands.addNewline(),
    };
  },
});

并像这样使用它；

editor = new Editor({
  extensions: [
    customNewline,
    CustomHardBreak,
  ]
});

  1. 使用默认的编辑器命令createParagraphNear。例如this.editor.commands.createParagraphNear()

  2. 我尝试从您的代码中创建一个自定义扩展，并最终得到类似于上面命令的内容，即；

export const customNewline = Extension.create({
  name: "newline",
  priority: 1000, // Optional
  addCommands() {
    return {
      addNewline:
        () =>
        ({ state, dispatch }) => {
          const { schema, tr } = state;
          const paragraph = schema.nodes.paragraph;

          const transaction = tr
            .deleteSelection()
            .replaceSelectionWith(paragraph.create(), true)
            .scrollIntoView();
          if (dispatch) dispatch(transaction);
          return true;
        },
    };
  },
  addKeyboardShortcuts() {
    return {
      "Shift-Enter": () => this.editor.commands.addNewline(),
    };
  },
});

并将其添加为我的编辑器实例中的扩展。

PS：它们都工作，几乎完全相同，我还没有发现区别。但是，如果您这么称呼它，那就有点“陷阱”了。这两种方法都不适用于空行/节点，必须在光标之前添加一个字符才能使其工作，任何字符，甚至是空格。

于 2021-12-15T10:29:49.227 回答