ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix some examples

Browse Source
This commit is contained in:
Philipp Kühn
2018-10-23 22:50:12 +02:00
parent aecf2284e9
commit b7e915015c
5 changed files with 201 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
examples/Components/Routes/MarkdownShortcuts/index.vue
View File

@@ -1,26 +1,12 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Markdown Shortcuts
</h2>
<p>
Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.
</p>
<p>
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.
</p>
</div>
</editor>
<div class="editor">
<editor-content class="editor__content" :editor="editor" />
</div>
</template>
<script>
import Icon from 'Components/Icon'
import { Editor } from 'tiptap'
import { Editor, EditorContent } from 'tiptap'
import {
BlockquoteNode,
BulletListNode,
@@ -40,28 +26,44 @@ import {
export default {
components: {
Editor,
EditorContent,
Icon,
},
data() {
return {
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 HistoryExtension(),
],
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 HistoryExtension(),
],
content: `
<h2>
Markdown Shortcuts
</h2>
<p>
Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.
</p>
<p>
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.
</p>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>