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

fix image example

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-22 21:46:45 +02:00
parent 7437992dd5
commit e51abf11fd
1 changed files with 35 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
examples/Components/Routes/Images/index.vue
View File

@@ -1,37 +1,23 @@
<template> <template>
<div> <div class="editor">
<editor class="editor" :extensions="extensions"> <menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes }">
<div class="menubar" slot="menubar" slot-scope="{ nodes }"> <button
<div v-if="nodes"> class="menubar__button"
@click="showImagePrompt(nodes.image.command)"
<button >
class="menubar__button" <icon name="image" />
@click="showImagePrompt(nodes.image.command)" </button>
> </template>
<icon name="image" /> </menu-bar>
</button>
<editor-content class="editor__content" :editor="editor" />
</div>
</div>
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Images
</h2>
<p>
This is basic example of implementing images. Try to drop new images here. Reordering also works.
</p>
<img src="https://ljdchost.com/8I2DeFn.gif" />
</div>
</editor>
</div> </div>
</template> </template>
<script> <script>
import Icon from 'Components/Icon' import Icon from 'Components/Icon'
import { Editor } from 'tiptap' import { Editor, EditorContent, MenuBar } from 'tiptap'
import { import {
HardBreakNode, HardBreakNode,
HeadingNode, HeadingNode,
@@ -44,18 +30,30 @@ import {
export default { export default {
components: { components: {
Icon, Icon,
Editor, EditorContent,
MenuBar,
}, },
data() { data() {
return { return {
extensions: [ editor: new Editor({
new HardBreakNode(), extensions: [
new HeadingNode({ maxLevel: 3 }), new HardBreakNode(),
new ImageNode(), new HeadingNode({ maxLevel: 3 }),
new BoldMark(), new ImageNode(),
new CodeMark(), new BoldMark(),
new ItalicMark(), new CodeMark(),
], new ItalicMark(),
],
content: `
<h2>
Images
</h2>
<p>
This is basic example of implementing images. Try to drop new images here. Reordering also works.
</p>
<img src="https://ljdchost.com/8I2DeFn.gif" />
`,
}),
} }
}, },
methods: { methods: {