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

70 lines
1.4 KiB
Vue
Raw Normal View History

2018-08-22 22:34:04 +08:00
<template>
<div>
2018-08-24 04:08:19 +08:00
<editor class="editor" :extensions="extensions" @update="onUpdate">
2018-08-22 22:34:04 +08:00
<div class="editor__content" slot="content" slot-scope="props">
2018-08-23 14:36:10 +08:00
<h2>
2018-08-22 22:46:30 +08:00
Markdown Shortcuts
2018-08-23 14:36:10 +08:00
</h2>
2018-08-22 22:46:30 +08:00
<p>
2018-08-25 05:02:32 +08:00
Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.
2018-08-22 22:34:04 +08:00
</p>
2018-08-22 22:46:30 +08:00
<p>
2018-08-25 05:02:32 +08:00
This feature is called <strong>input rules</strong>. There are some of these shortcuts for the most basic nodes enabled by default. Try <code>#, ##, ###, </code> for headlines, <code>></code> for blockquotes, <code>- or +</code> for bullet lists. And of course you can add your own input rules.
2018-08-22 22:46:30 +08:00
</p>
</div>
2018-08-22 22:34:04 +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 22:34:04 +08:00
export default {
2018-08-22 22:46:30 +08:00
components: {
Editor,
Icon,
},
2018-08-24 04:08:19 +08:00
data() {
return {
extensions: [
new Blockquote(),
new BulletList(),
new CodeBlock(),
new HardBreak(),
2018-08-24 14:41:17 +08:00
new Heading({ maxLevel: 3 }),
2018-08-24 04:08:19 +08:00
new ListItem(),
new OrderedList(),
new TodoItem(),
new TodoList(),
new Bold(),
new Code(),
new Italic(),
new Link(),
],
}
},
2018-08-22 22:46:30 +08:00
methods: {
onUpdate(state) {
2018-08-22 22:52:55 +08:00
// console.log(state.doc.toJSON())
2018-08-22 22:46:30 +08:00
},
},
2018-08-22 22:34:04 +08:00
}
</script>