tiptap/examples/Components/Routes/MenuBubble/index.vue
2018-10-28 22:57:05 +01:00

101 lines
1.9 KiB
Vue

<template>
<div class="editor">
<menu-bubble class="menububble" :editor="editor">
<template slot-scope="{ nodes, marks, commands }">
<button
class="menububble__button"
:class="{ 'is-active': marks.bold.active() }"
@click="commands.bold"
>
<icon name="bold" />
</button>
<button
class="menububble__button"
:class="{ 'is-active': marks.italic.active() }"
@click="commands.italic"
>
<icon name="italic" />
</button>
<button
class="menububble__button"
:class="{ 'is-active': marks.code.active() }"
@click="commands.code"
>
<icon name="code" />
</button>
</template>
</menu-bubble>
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor, EditorContent, MenuBubble } from 'tiptap'
import {
Blockquote,
BulletList,
CodeBlock,
HardBreak,
Heading,
ListItem,
OrderedList,
TodoItem,
TodoList,
Bold,
Code,
Italic,
Link,
Strike,
Underline,
History,
} from 'tiptap-extensions'
export default {
components: {
EditorContent,
MenuBubble,
Icon,
},
data() {
return {
editor: new Editor({
extensions: [
new Blockquote(),
new BulletList(),
new CodeBlock(),
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
new ListItem(),
new OrderedList(),
new TodoItem(),
new TodoList(),
new Bold(),
new Code(),
new Italic(),
new Link(),
new Strike(),
new Underline(),
new History(),
],
content: `
<h2>
Menu Bubble
</h2>
<p>
Hey, try to select some text here. There will popup a menu for selecting some inline styles. <em>Remember:</em> you have full control about content and styling of this menu.
</p>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>