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

55
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,11 +132,13 @@ import {
export default { export default {
components: { components: {
Editor, EditorContent,
MenuBar,
Icon, Icon,
}, },
data() { data() {
return { return {
editor: new Editor({
extensions: [ extensions: [
new BlockquoteNode(), new BlockquoteNode(),
new BulletListNode(), new BulletListNode(),
@@ -161,22 +155,31 @@ export default {
new LinkMark(), new LinkMark(),
new HistoryExtension(), 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,
}) })
} }