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

97 lines
1.6 KiB
Vue
Raw Normal View History

2018-08-22 20:10:44 +08:00
<template>
<div>
2018-08-24 04:08:19 +08:00
<editor class="editor" :extensions="extensions" @update="onUpdate">
2018-08-22 21:58:32 +08:00
2018-08-22 20:10:44 +08:00
<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
<template v-if="marks">
2018-08-22 21:58:32 +08:00
<button
class="menububble__button"
:class="{ 'is-active': marks.bold.active() }"
@click="marks.bold.command"
>
2018-08-22 20:10:44 +08:00
<icon name="bold" />
</button>
2018-08-22 21:58:32 +08:00
<button
class="menububble__button"
:class="{ 'is-active': marks.italic.active() }"
@click="marks.italic.command"
>
2018-08-22 20:10:44 +08:00
<icon name="italic" />
</button>
2018-08-22 21:58:32 +08:00
<button
class="menububble__button"
:class="{ 'is-active': marks.code.active() }"
@click="marks.code.command"
>
2018-08-22 20:10:44 +08:00
<icon name="code" />
</button>
2018-08-22 21:58:32 +08:00
2018-08-22 20:10:44 +08:00
</template>
</div>
2018-08-22 21:58:32 +08:00
2018-08-22 20:10:44 +08:00
<div class="editor__content" slot="content" slot-scope="props">
2018-08-23 14:36:10 +08:00
<h2>
2018-08-22 22:48:52 +08:00
Menu Bubble
2018-08-23 14:36:10 +08:00
</h2>
2018-08-22 20:10:44 +08:00
<p>
Hey, try to select some text.
</p>
</div>
2018-08-22 21:58:32 +08:00
2018-08-22 20:10:44 +08:00
</editor>
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
2018-08-24 04:08:19 +08:00
import {
Blockquote,
BulletList,
CodeBlock,
HardBreak,
Heading,
ListItem,
OrderedList,
TodoItem,
TodoList,
Bold,
Code,
Italic,
Link,
} from 'tiptap-extensions'
2018-08-22 20:10:44 +08:00
export default {
2018-08-23 01:28:57 +08:00
components: {
Editor,
Icon,
},
data() {
return {
2018-08-24 04:08:19 +08:00
extensions: [
new Blockquote(),
new BulletList(),
new CodeBlock(),
new HardBreak(),
new Heading(),
new ListItem(),
new OrderedList(),
new TodoItem(),
new TodoList(),
new Bold(),
new Code(),
new Italic(),
new Link(),
],
2018-08-23 01:28:57 +08:00
}
},
methods: {
onUpdate(state) {
// console.log(state.doc.toJSON())
},
},
2018-08-22 20:10:44 +08:00
}
</script>