I’ve just found ProseMirror and am pretty excited by it.
Trying to get started, I see the getContent and setContent methods have been dropped in version 0.8, but I cannot find any documentation on how you can get or set content now.
My app uses Markdown for text content, so I have a bunch of markdown texts already and would like to be able to “open” them in a prose mirror instance and then also save back to markdown when the user is done editing.
Without getContent and setContent in v > 0.8, how are we supposed to do that now?
Is there a simple way to get an HTML string in and out?
In 0.7 I could just do
pm = new ProseMirror({ docFormat: "html", doc: html })
pm.getContent("HTML")
After a lot of troubles I managed to achieve something similar in 0.8 with
pm = new ProseMirror({ doc: schema.parseDOM(new DOMParser().parseFromString(html, "text/html"))})
new XMLSerializer().serializeToString(pm.doc.content.toDOM())
Here is how I got @kzap’s approach to work for 0.17. I haven’t managed (yet) to find a solution for 0.20.
to initialize with HTML string
import {EditorState} from "prosemirror-state"
import {MenuBarEditorView} from "prosemirror-menu"
import {Schema, DOMParser, DOMSerializer} from "prosemirror-model"
import {addListNodes} from "prosemirror-schema-list"
import {exampleSetup} from "prosemirror-example-setup"
import {schema as baseSchema} from "prosemirror-schema-basic"
let schema = new Schema({
nodes: addListNodes(baseSchema.nodeSpec, "paragraph block*", "block"),
marks: baseSchema.markSpec
});
let parser = (content) => {
let domNode = document.createElement("div");
domNode.innerHTML = content;
return DOMParser.fromSchema(schema).parse(domNode);
}
let pm = new MenuBarEditorView(place, {
state: EditorState.create({
doc: parser(place),
plugins: exampleSetup({schema: schema})
}),
onAction: function(action) {
pm.updateState(pm.editor.state.applyAction(action))
}
})
to get HTML string
let getContentString = () => {
let fragment = DOMSerializer.fromSchema(schema).serializeFragment(pm.editor.state.doc.content);
let tmp = document.createElement("div");
tmp.appendChild(fragment);
return tmp.innerHTML;
};