我正在尝试将ProseMirror的JSON输出转换回HTML(将其从一个数据库保存到另一个数据库(。我是ProseMirror的新手，我不确定我是否完全理解模型，状态和模式之间的关系。
从我 https://github.com/ProseMirror/prosemirror/issues/455 和 https://discuss.prosemirror.net/t/example-of-converting-between-formats-for-the-purpose-of-saving/424 读到的内容来看，
我应该首先基于基本模式创建一个新状态，然后使用 DOMSerializer 并将输出附加到临时元素(然后获取 innerHtml(。 这听起来对吗？任何帮助将不胜感激。
经过一番挖掘，以下是我如何让它工作：
- 使用 .fromJSON 创建节点
- 基于编辑器使用的架构创建 DOMSerializer
- 将节点传递给序列化程序
我的代码如下。
const { schema } = require("prosemirror-schema-basic")
const { Node, DOMSerializer } = require("prosemirror-model")
const jsdom = require("jsdom").JSDOM
let dom = new jsdom('<!DOCTYPE html><div id="content"></div>')
let doc = dom.window.document
let target = doc.querySelector("div")
//Demo JSON output from ProseMirror
let content = {
"doc": {
"type": "doc",
"content": [{
"type": "paragraph",
"attrs": {
"align": "left"
},
"content": [{
"type": "text",
"text": "My sample text"
}]
}]
},
"selection": {
"type": "text",
"anchor": 16,
"head": 16
}
}
let contentNode = Node.fromJSON(schema, content.doc)
DOMSerializer
.fromSchema(schema)
.serializeFragment(contentNode.content, {
"document": doc
}, target)
console.log(doc.getElementById("content").innerHTML)
//<p>My sample text</p>给未来读者的注意。如果你使用的是 React，并且想在编辑器的内容更新时获得降价，那么这里有一个例子。
import { OnChangeJSON, Remirror } from '@remirror/react';
import { MarkdownExtension } from 'remirror/extensions';
import { useRemirror } from '@remirror/react';
import { RemirrorJSON } from '@remirror/core';
export interface MarkdownControlledEditorProps {
export interface MarkdownControlledEditorProps {
onChangeJson: (json: RemirrorJSON) => void,
onChangeMarkdown: (markdown: string) => void,
initialContent?: string,
}
export const MarkdownControlledEditor = ({
onChangeJson,
onChangeMarkdown,
initialContent,
}: any) => {
const { manager } = useRemirror({
selection: 'start',
extensions: RemirrorExtensionsPreset,
});
const _onChangeJson = (json: RemirrorJSON) => {
onChangeContent({
json,
html: manager.store.helpers.getHTML(),
text: manager.store.helpers.getText(),
markdown: manager.store.helpers.getMarkdown(),
});
}
return (
<Remirror
autoFocus={true}
autoRender={'start'}
manager={manager}
initialContent={initialContent}
>
<OnChangeJSON onChange={_onChangeJson}/>
</Remirror>
);
};