tiptap/examples/Components/Routes/HidingMenuBar/index.vue

183 lines
3.9 KiB
Vue
Raw Normal View History

2018-08-22 22:05:44 +08:00
<template>
2018-10-23 03:40:12 +08:00
<div class="editor">
<menu-bar :editor="editor">
<template slot-scope="{ nodes, marks, focused }">
<div class="menubar is-hidden" :class="{ 'is-focused': focused }">
2018-08-22 22:05:44 +08:00
2018-08-23 01:28:57 +08:00
<button
class="menubar__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
<icon name="bold" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
<icon name="italic" />
</button>
2018-08-22 22:05:44 +08:00
2018-10-23 03:40:12 +08:00
<button
class="menubar__button"
:class="{ 'is-active': marks.strike.active() }"
@click="marks.strike.command"
>
<icon name="strike" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': marks.underline.active() }"
@click="marks.underline.command"
>
<icon name="underline" />
</button>
2018-08-22 22:48:52 +08:00
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
@click="marks.code.command"
:class="{ 'is-active': marks.code.active() }
">
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.paragraph.active() }"
@click="nodes.paragraph.command"
>
2018-08-22 22:48:52 +08:00
<icon name="paragraph" />
</button>
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
@click="nodes.heading.command({ level: 1 })"
>
2018-08-22 22:48:52 +08:00
H1
</button>
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
@click="nodes.heading.command({ level: 2 })"
>
2018-08-22 22:48:52 +08:00
H2
</button>
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
@click="nodes.heading.command({ level: 3 })"
>
2018-08-22 22:48:52 +08:00
H3
</button>
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
:class="{ 'is-active': nodes.bullet_list.active() }"
@click="nodes.bullet_list.command"
>
2018-08-22 22:48:52 +08:00
<icon name="ul" />
</button>
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
:class="{ 'is-active': nodes.ordered_list.active() }"
@click="nodes.ordered_list.command"
>
2018-08-22 22:48:52 +08:00
<icon name="ol" />
</button>
2018-10-23 03:40:12 +08:00
<button
class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
>
<icon name="quote" />
</button>
2018-08-22 22:48:52 +08:00
<button
2018-08-23 01:28:57 +08:00
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@click="nodes.code_block.command"
>
2018-08-22 22:48:52 +08:00
<icon name="code" />
</button>
2018-08-22 22:05:44 +08:00
</div>
2018-10-23 03:40:12 +08:00
</template>
</menu-bar>
<editor-content class="editor__content" :editor="editor" />
2018-08-22 22:05:44 +08:00
</div>
</template>
<script>
import Icon from 'Components/Icon'
2018-10-23 03:40:12 +08:00
import { Editor, EditorContent, MenuBar } from 'tiptap'
2018-08-24 04:08:19 +08:00
import {
2018-08-27 01:43:02 +08:00
BlockquoteNode,
BulletListNode,
CodeBlockNode,
HardBreakNode,
HeadingNode,
ListItemNode,
OrderedListNode,
TodoItemNode,
TodoListNode,
BoldMark,
CodeMark,
ItalicMark,
LinkMark,
2018-10-23 03:40:12 +08:00
StrikeMark,
UnderlineMark,
2018-08-27 01:43:02 +08:00
HistoryExtension,
2018-08-24 04:08:19 +08:00
} from 'tiptap-extensions'
2018-08-22 22:05:44 +08:00
export default {
2018-08-23 01:28:57 +08:00
components: {
2018-10-23 03:40:12 +08:00
EditorContent,
MenuBar,
2018-08-23 01:28:57 +08:00
Icon,
},
2018-08-24 04:08:19 +08:00
data() {
return {
2018-10-23 03:40:12 +08:00
editor: new Editor({
extensions: [
new BlockquoteNode(),
new BulletListNode(),
new CodeBlockNode(),
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new ListItemNode(),
new OrderedListNode(),
new TodoItemNode(),
new TodoListNode(),
new BoldMark(),
new CodeMark(),
new ItalicMark(),
new LinkMark(),
new StrikeMark(),
new UnderlineMark(),
new HistoryExtension(),
],
content: `
<h2>
Hiding Menu Bar
</h2>
<p>
Click into this text to see the menu. Click outside and the menu will disappear. It's like magic.
</p>
`,
}),
2018-08-24 04:08:19 +08:00
}
},
2018-10-23 03:40:12 +08:00
beforeDestroy() {
this.editor.destroy()
},
2018-08-22 22:05:44 +08:00
}
</script>