add insertHTML command
This commit is contained in:
@@ -9,6 +9,7 @@ import {addListNodes} from "prosemirror-schema-list"
|
|||||||
import {exampleSetup} from "prosemirror-example-setup"
|
import {exampleSetup} from "prosemirror-example-setup"
|
||||||
|
|
||||||
import insertText from './commands/insertText'
|
import insertText from './commands/insertText'
|
||||||
|
import insertHTML from './commands/insertHTML'
|
||||||
import focus from './commands/focus'
|
import focus from './commands/focus'
|
||||||
|
|
||||||
interface EditorOptions {
|
interface EditorOptions {
|
||||||
@@ -36,6 +37,7 @@ export class Editor {
|
|||||||
this.view = this.createView()
|
this.view = this.createView()
|
||||||
this.registerCommand('focus', focus)
|
this.registerCommand('focus', focus)
|
||||||
this.registerCommand('insertText', insertText)
|
this.registerCommand('insertText', insertText)
|
||||||
|
this.registerCommand('insertHTML', insertHTML)
|
||||||
}
|
}
|
||||||
|
|
||||||
get state() {
|
get state() {
|
||||||
|
|||||||
22
packages/tiptap-core/src/commands/insertHTML.ts
Normal file
22
packages/tiptap-core/src/commands/insertHTML.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import { DOMParser } from 'prosemirror-model'
|
||||||
|
import { Editor } from '../Editor'
|
||||||
|
|
||||||
|
declare module '../Editor' {
|
||||||
|
interface Editor {
|
||||||
|
insertHTML(value: string): Editor,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function insertHTML(next: Function, { state, view }: Editor, value: string): void {
|
||||||
|
const { selection } = state
|
||||||
|
const element = document.createElement('div')
|
||||||
|
|
||||||
|
element.innerHTML = value.trim()
|
||||||
|
|
||||||
|
const slice = DOMParser.fromSchema(state.schema).parseSlice(element)
|
||||||
|
const transaction = state.tr.insert(selection.anchor, slice.content)
|
||||||
|
|
||||||
|
view.dispatch(transaction)
|
||||||
|
|
||||||
|
next()
|
||||||
|
}
|
||||||
@@ -1,12 +1,14 @@
|
|||||||
import { Editor } from '../Editor'
|
import { Editor } from '../Editor'
|
||||||
|
|
||||||
declare module "../Editor" {
|
declare module '../Editor' {
|
||||||
interface Editor {
|
interface Editor {
|
||||||
insertText(text: string): Editor,
|
insertText(value: string): Editor,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function insertText(next: Function, { state, view }: Editor, text: string): void {
|
export default function insertText(next: Function, { state, view }: Editor, value: string): void {
|
||||||
view.dispatch(state.tr.insertText(text))
|
const transaction = state.tr.insertText(value)
|
||||||
|
|
||||||
|
view.dispatch(transaction)
|
||||||
next()
|
next()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,8 @@
|
|||||||
<Layout>
|
<Layout>
|
||||||
<h1>{{ $page.post.title }}</h1>
|
<h1>{{ $page.post.title }}</h1>
|
||||||
<VueRemarkContent />
|
<VueRemarkContent />
|
||||||
|
|
||||||
|
<div ref="editor"></div>
|
||||||
</Layout>
|
</Layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -20,16 +22,29 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
// console.log(tiptap())
|
// console.log(tiptap())
|
||||||
|
|
||||||
// new Editor()
|
|
||||||
// .registerCommand('lol', (next) => {
|
new Editor({
|
||||||
// console.log('lol')
|
element: this.$refs.editor,
|
||||||
// next()
|
content: '<p>test <strong>strong</strong></p>',
|
||||||
// })
|
})
|
||||||
// .focus('end')
|
// .registerCommand('lol', (next) => {
|
||||||
// .insertText('mega ')
|
// console.log('lol')
|
||||||
// .focus('start')
|
// next()
|
||||||
// .command('insertText', 'giga ')
|
// })
|
||||||
// .lol()
|
// .focus('end')
|
||||||
|
// .insertText('mega ')
|
||||||
|
// .focus('start')
|
||||||
|
// .command('insertText', 'giga ')
|
||||||
|
// .lol()
|
||||||
|
|
||||||
|
// .registerCommand('insertHTML', (next, editor, html) => {
|
||||||
|
// console.log(html)
|
||||||
|
// next()
|
||||||
|
// })
|
||||||
|
.focus('start')
|
||||||
|
.insertText('<p>start</p>')
|
||||||
|
.focus('end')
|
||||||
|
.insertHTML('<p>end</p>')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user