ProseMirror 如何监听用户输入并实时获取内容？

博主佩佩提问于 2026-03-24 00:44:22 阅读 40

交互

我用 ProseMirror 搭了个简单的编辑器，但不知道怎么在用户打字时拿到最新的文档内容。试过在 dispatchTransaction 里用 state.doc.toString()，结果输出的是类似 <doc><paragraph>...</paragraph></doc> 的结构，不是纯文本。

有没有办法直接拿到用户看到的纯文本或者 HTML？是不是得配合 toDOM 或者其他插件？

const editor = new EditorView(document.querySelector('#editor'), {
  state: EditorState.create({ schema }),
  dispatchTransaction(tr) {
    const newState = this.state.apply(tr);
    console.log(newState.doc.toString()); // 输出的是 XML-like 字符串
    this.updateState(newState);
  }
});

富文本编辑

我来解答赞 22 收藏

反馈

1 条解答

ლ峻珲 Lv1

ProseMirror 的 state.doc.toString() 默认会输出一个类似 XML 的内部表示，而不是纯文本或 HTML。如果你想实时获取用户看到的纯文本内容，可以使用 state.doc.textContent。至于 HTML，你需要将文档转换为 DOM 结构，然后序列化为 HTML 字符串。你可以通过 DOMSerializer 来实现这一点。

以下是修改后的代码示例：

const { DOMSerializer } = require('prosemirror-model');



const editor = new EditorView(document.querySelector('#editor'), {

  state: EditorState.create({ schema }),

  dispatchTransaction(tr) {

    const newState = this.state.apply(tr);



    // 获取纯文本内容

    const plainText = newState.doc.textContent;

    console.log('Plain Text:', plainText);



    // 获取 HTML 内容

    const dom = DOMSerializer.fromSchema(schema).serializeFragment(newState.doc.content);

    const htmlContent = dom.innerHTML;

    console.log('HTML Content:', htmlContent);



    this.updateState(newState);

  }

});

这段代码会在每次用户输入时，分别打印出当前文档的纯文本和 HTML 内容。注意，获取 HTML 内容时，你需要确保导入了 DOMSerializer。希望这能解决你的问题。

2026-03-24 01:05