fix image example

This commit is contained in:
Philipp Kühn
2018-10-22 21:46:45 +02:00
parent 7437992dd5
commit e51abf11fd

View File

@@ -1,37 +1,23 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor">
<menu-bar class="menubar" :editor="editor">
<template slot-scope="{ nodes }">
<button
class="menubar__button"
@click="showImagePrompt(nodes.image.command)"
>
<icon name="image" />
</button>
</template>
</menu-bar>
<div class="menubar" slot="menubar" slot-scope="{ nodes }">
<div v-if="nodes">
<button
class="menubar__button"
@click="showImagePrompt(nodes.image.command)"
>
<icon name="image" />
</button>
</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>
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import { Editor, EditorContent, MenuBar } from 'tiptap'
import {
HardBreakNode,
HeadingNode,
@@ -44,18 +30,30 @@ import {
export default {
components: {
Icon,
Editor,
EditorContent,
MenuBar,
},
data() {
return {
extensions: [
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ImageNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
],
editor: new Editor({
extensions: [
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ImageNode(),
new BoldMark(),
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: {