ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix export example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-23 23:05:15 +02:00
parent b7e915015c
commit 0c9d481cd2
2 changed files with 49 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
examples/Components/Routes/Export/index.vue
View File

@@ -1,9 +1,8 @@
<template> <template>
<div> <div>
<editor class="editor" :extensions="extensions" @update="onUpdate" ref="editor"> <div class="editor">
<menu-bar class="menubar" :editor="editor">
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }"> <template slot-scope="{ nodes, marks }">
<div v-if="nodes && marks">
<button <button
class="menubar__button" class="menubar__button"
@@ -85,19 +84,12 @@
<icon name="code" /> <icon name="code" />
</button> </button>
</div> </template>
</div> </menu-bar>
<div class="editor__content" slot="content" slot-scope="props"> <editor-content class="editor__content" :editor="editor" />
<h2>
Export HTML or JSON
</h2>
<p>
You are able to export your data as <code>HTML</code> or <code>JSON</code>. To pass <code>HTML</code> to the editor use the <code>content</code> slot. To pass <code>JSON</code> to the editor use the <code>doc</code> prop.
</p>
</div>
</editor> </div>
<div class="actions"> <div class="actions">
<button class="button" @click="clearContent"> <button class="button" @click="clearContent">
@@ -120,7 +112,7 @@
<script> <script>
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor, EditorContent, MenuBar } from 'tiptap'
import { import {
BlockquoteNode, BlockquoteNode,
BulletListNode, BulletListNode,
@@ -140,43 +132,54 @@ import {
export default { export default {
components: { components: {
Editor, EditorContent,
MenuBar,
Icon, Icon,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new BlockquoteNode(), extensions: [
new BulletListNode(), new BlockquoteNode(),
new CodeBlockNode(), new BulletListNode(),
new HardBreakNode(), new CodeBlockNode(),
new HeadingNode({ maxLevel: 3 }), new HardBreakNode(),
new ListItemNode(), new HeadingNode({ maxLevel: 3 }),
new OrderedListNode(), new ListItemNode(),
new TodoItemNode(), new OrderedListNode(),
new TodoListNode(), new TodoItemNode(),
new BoldMark(), new TodoListNode(),
new CodeMark(), new BoldMark(),
new ItalicMark(), new CodeMark(),
new LinkMark(), new ItalicMark(),
new HistoryExtension(), new LinkMark(),
], new HistoryExtension(),
],
content: `
<h2>
Export HTML or JSON
</h2>
<p>
You are able to export your data as <code>HTML</code> or <code>JSON</code>. To pass <code>HTML</code> to the editor use the <code>content</code> slot. To pass <code>JSON</code> to the editor use the <code>doc</code> prop.
</p>
`,
onUpdate: ({ getJSON, getHTML }) => {
this.json = getJSON()
this.html = getHTML()
},
}),
json: 'Update content to see changes', json: 'Update content to see changes',
html: 'Update content to see changes', html: 'Update content to see changes',
} }
}, },
methods: { methods: {
onUpdate({ getJSON, getHTML }) {
this.json = getJSON()
this.html = getHTML()
},
clearContent() { clearContent() {
this.$refs.editor.clearContent(true) this.editor.clearContent(true)
this.$refs.editor.focus() this.editor.focus()
}, },
setContent() { setContent() {
// you can pass a json document // you can pass a json document
this.$refs.editor.setContent({ this.editor.setContent({
type: 'doc', type: 'doc',
content: [{ content: [{
type: 'paragraph', type: 'paragraph',
@@ -190,9 +193,9 @@ export default {
}, true) }, true)
// HTML string is also supported // HTML string is also supported
// this.$refs.editor.setContent('<p>This is some inserted text. 👋</p>') // this.editor.setContent('<p>This is some inserted text. 👋</p>')
this.$refs.editor.focus() this.editor.focus()
}, },
}, },
} }

10
packages/tiptap/src/utils/Editor.js
View File

@@ -29,9 +29,7 @@ export default class Editor {
const defaultOptions = { const defaultOptions = {
editable: true, editable: true,
content: '', content: '',
on: { onUpdate: () => {},
update: () => {},
},
} }
this.options = { this.options = {
@@ -189,9 +187,9 @@ export default class Editor {
} }
emitUpdate() { emitUpdate() {
this.emit('update', { this.options.onUpdate({
getHTML: this.getHTML, getHTML: this.getHTML.bind(this),
getJSON: this.getJSON, getJSON: this.getJSON.bind(this),
state: this.state, state: this.state,
}) })
} }