diff --git a/examples/Components/Routes/Export/index.vue b/examples/Components/Routes/Export/index.vue index 3a47159d..547718a9 100644 --- a/examples/Components/Routes/Export/index.vue +++ b/examples/Components/Routes/Export/index.vue @@ -171,10 +171,11 @@ export default { this.html = getHTML() }, clearContent() { - this.$refs.editor.clearContent() + this.$refs.editor.clearContent(true) this.$refs.editor.focus() }, setContent() { + // you can pass a json document this.$refs.editor.setContent({ type: 'doc', content: [{ @@ -186,7 +187,11 @@ export default { }, ], }], - }) + }, true) + + // HTML string is also supported + // this.$refs.editor.setContent('

This is some inserted text. 👋

') + this.$refs.editor.focus() }, }, diff --git a/packages/tiptap/src/components/editor.js b/packages/tiptap/src/components/editor.js index 0cb0dcf2..da268c4c 100644 --- a/packages/tiptap/src/components/editor.js +++ b/packages/tiptap/src/components/editor.js @@ -255,10 +255,25 @@ export default { }) }, + getDocFromContent(content) { + if (typeof content === 'object') { + return this.schema.nodeFromJSON(content) + } + + if (typeof content === 'string') { + const element = document.createElement('div') + element.innerHTML = content.trim() + + return DOMParser.fromSchema(this.schema).parse(element) + } + + return false + }, + setContent(content = {}, emitUpdate = false) { this.state = EditorState.create({ schema: this.state.schema, - doc: this.schema.nodeFromJSON(content), + doc: this.getDocFromContent(content), plugins: this.state.plugins, })