tabs to spaces whitespace
This commit is contained in:
@@ -1,68 +1,68 @@
|
||||
<template>
|
||||
<div class="editor">
|
||||
<menu-bar :editor="editor">
|
||||
<div class="menubar" slot-scope="{ commands }">
|
||||
<button
|
||||
class="menubar__button"
|
||||
@click="showImagePrompt(commands.image)"
|
||||
>
|
||||
<icon name="image" />
|
||||
</button>
|
||||
</div>
|
||||
</menu-bar>
|
||||
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
<div class="editor">
|
||||
<menu-bar :editor="editor">
|
||||
<div class="menubar" slot-scope="{ commands }">
|
||||
<button
|
||||
class="menubar__button"
|
||||
@click="showImagePrompt(commands.image)"
|
||||
>
|
||||
<icon name="image" />
|
||||
</button>
|
||||
</div>
|
||||
</menu-bar>
|
||||
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor, EditorContent, MenuBar } from 'tiptap'
|
||||
import {
|
||||
HardBreak,
|
||||
Heading,
|
||||
Image,
|
||||
Bold,
|
||||
Code,
|
||||
Italic,
|
||||
HardBreak,
|
||||
Heading,
|
||||
Image,
|
||||
Bold,
|
||||
Code,
|
||||
Italic,
|
||||
} from 'tiptap-extensions'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Icon,
|
||||
EditorContent,
|
||||
MenuBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new HardBreak(),
|
||||
new Heading({ levels: [1, 2, 3] }),
|
||||
new Image(),
|
||||
new Bold(),
|
||||
new Code(),
|
||||
new Italic(),
|
||||
],
|
||||
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: {
|
||||
showImagePrompt(command) {
|
||||
const src = prompt('Enter the url of your image here')
|
||||
if (src !== null) {
|
||||
command({ src })
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Icon,
|
||||
EditorContent,
|
||||
MenuBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new HardBreak(),
|
||||
new Heading({ levels: [1, 2, 3] }),
|
||||
new Image(),
|
||||
new Bold(),
|
||||
new Code(),
|
||||
new Italic(),
|
||||
],
|
||||
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: {
|
||||
showImagePrompt(command) {
|
||||
const src = prompt('Enter the url of your image here')
|
||||
if (src !== null) {
|
||||
command({ src })
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user