mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 22:36:14 +08:00
fix some examples
This commit is contained in:
Philipp Kühn
parent
aecf2284e9
commit
b7e915015c
@ -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>
|
||||
@ -1,13 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor class="editor" :extensions="extensions">
|
||||
<div class="editor__content" slot="content" slot-scope="props"></div>
|
||||
</editor>
|
||||
<div class="editor">
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor } from 'tiptap'
|
||||
import { Editor, EditorContent } from 'tiptap'
|
||||
import {
|
||||
BulletListNode,
|
||||
ListItemNode,
|
||||
@ -16,19 +14,24 @@ import {
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
EditorContent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
extensions: [
|
||||
new BulletListNode(),
|
||||
new ListItemNode(),
|
||||
new PlaceholderExtension({
|
||||
emptyNodeClass: 'is-empty',
|
||||
}),
|
||||
],
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new BulletListNode(),
|
||||
new ListItemNode(),
|
||||
new PlaceholderExtension({
|
||||
emptyNodeClass: 'is-empty',
|
||||
}),
|
||||
],
|
||||
}),
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,22 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor :editable="false" :extensions="extensions" class="editor">
|
||||
|
||||
<div class="editor__content" slot="content" slot-scope="props">
|
||||
<h2>
|
||||
Read-Only
|
||||
</h2>
|
||||
<p>
|
||||
This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://scrumpy.io/">Links to fancy websites</a> are still working.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</editor>
|
||||
<div class="editor">
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor } from 'tiptap'
|
||||
import { Editor, EditorContent } from 'tiptap'
|
||||
import {
|
||||
HardBreakNode,
|
||||
HeadingNode,
|
||||
@ -28,19 +17,33 @@ import {
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
EditorContent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
extensions: [
|
||||
new HardBreakNode(),
|
||||
new HeadingNode({ maxLevel: 3 }),
|
||||
new BoldMark(),
|
||||
new CodeMark(),
|
||||
new ItalicMark(),
|
||||
new LinkMark(),
|
||||
],
|
||||
editor: new Editor({
|
||||
editable: false,
|
||||
extensions: [
|
||||
new HardBreakNode(),
|
||||
new HeadingNode({ maxLevel: 3 }),
|
||||
new BoldMark(),
|
||||
new CodeMark(),
|
||||
new ItalicMark(),
|
||||
new LinkMark(),
|
||||
],
|
||||
content: `
|
||||
<h2>
|
||||
Read-Only
|
||||
</h2>
|
||||
<p>
|
||||
This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://scrumpy.io/">Links to fancy websites</a> are still working.
|
||||
</p>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,53 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor class="editor" :extensions="extensions">
|
||||
<div class="editor">
|
||||
<menu-bar class="menubar" :editor="editor">
|
||||
<template slot-scope="{ nodes, marks }">
|
||||
|
||||
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
|
||||
<div v-if="nodes && marks">
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
|
||||
@click="nodes.paragraph.command({ textAlign: 'left' })"
|
||||
>
|
||||
<icon name="align-left" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
|
||||
@click="nodes.paragraph.command({ textAlign: 'left' })"
|
||||
>
|
||||
<icon name="align-left" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
|
||||
@click="nodes.paragraph.command({ textAlign: 'center' })"
|
||||
>
|
||||
<icon name="align-center" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
|
||||
@click="nodes.paragraph.command({ textAlign: 'center' })"
|
||||
>
|
||||
<icon name="align-center" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
|
||||
@click="nodes.paragraph.command({ textAlign: 'right' })"
|
||||
>
|
||||
<icon name="align-right" />
|
||||
</button>
|
||||
|
||||
</template>
|
||||
</menu-bar>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
|
||||
@click="nodes.paragraph.command({ textAlign: 'right' })"
|
||||
>
|
||||
<icon name="align-right" />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor__content" slot="content" slot-scope="props">
|
||||
<p style="text-align: left">
|
||||
Maybe you want to implement text alignment. If so, you're able to overwrite the default <code>ParagraphNode</code>. You can define some classes oder inline styles in your schema to achive that.
|
||||
</p>
|
||||
<p style="text-align: right">
|
||||
Have fun! 🙌
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</editor>
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor } from 'tiptap'
|
||||
import { Editor, EditorContent, MenuBar } from 'tiptap'
|
||||
import {
|
||||
HardBreakNode,
|
||||
CodeMark,
|
||||
@ -56,18 +45,32 @@ import ParagraphAlignmentNode from './Paragraph.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
EditorContent,
|
||||
MenuBar,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
extensions: [
|
||||
new HardBreakNode(),
|
||||
new CodeMark(),
|
||||
new ParagraphAlignmentNode(),
|
||||
],
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new HardBreakNode(),
|
||||
new CodeMark(),
|
||||
new ParagraphAlignmentNode(),
|
||||
],
|
||||
content: `
|
||||
<p style="text-align: left">
|
||||
Maybe you want to implement text alignment. If so, you're able to overwrite the default <code>ParagraphNode</code>. You can define some classes oder inline styles in your schema to achive that.
|
||||
</p>
|
||||
<p style="text-align: right">
|
||||
Have fun! 🙌
|
||||
</p>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,75 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<editor :extensions="extensions" class="editor">
|
||||
<div class="editor">
|
||||
<menu-bar class="menubar" :editor="editor">
|
||||
<template slot-scope="{ nodes, marks }">
|
||||
|
||||
<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
|
||||
<div v-if="nodes && marks">
|
||||
<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.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>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': marks.italic.active() }"
|
||||
@click="marks.italic.command"
|
||||
>
|
||||
<icon name="italic" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': marks.code.active() }"
|
||||
@click="marks.code.command"
|
||||
>
|
||||
<icon name="code" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': marks.code.active() }"
|
||||
@click="marks.code.command"
|
||||
>
|
||||
<icon name="code" />
|
||||
</button>
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': nodes.todo_list.active() }"
|
||||
@click="nodes.todo_list.command"
|
||||
>
|
||||
<icon name="checklist" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': nodes.todo_list.active() }"
|
||||
@click="nodes.todo_list.command"
|
||||
>
|
||||
<icon name="checklist" />
|
||||
</button>
|
||||
</template>
|
||||
</menu-bar>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor__content" slot="content" slot-scope="props">
|
||||
<h2>
|
||||
Todo List
|
||||
</h2>
|
||||
<p>
|
||||
There is always something to do. Thankfully, there are checklists for that. Don't forget to call mom.
|
||||
</p>
|
||||
<ul data-type="todo_list">
|
||||
<li data-type="todo_item" data-done="true">
|
||||
Buy beer
|
||||
</li>
|
||||
<li data-type="todo_item" data-done="true">
|
||||
Buy meat
|
||||
</li>
|
||||
<li data-type="todo_item" data-done="true">
|
||||
Buy milk
|
||||
</li>
|
||||
<li data-type="todo_item" data-done="false">
|
||||
Call mom
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</editor>
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'Components/Icon'
|
||||
import { Editor } from 'tiptap'
|
||||
import { Editor, EditorContent, MenuBar } from 'tiptap'
|
||||
import {
|
||||
CodeBlockNode,
|
||||
HardBreakNode,
|
||||
@ -83,24 +58,51 @@ import {
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Editor,
|
||||
EditorContent,
|
||||
MenuBar,
|
||||
Icon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customProp: 2,
|
||||
extensions: [
|
||||
new CodeBlockNode(),
|
||||
new HardBreakNode(),
|
||||
new HeadingNode({ maxLevel: 3 }),
|
||||
new TodoItemNode(),
|
||||
new TodoListNode(),
|
||||
new BoldMark(),
|
||||
new CodeMark(),
|
||||
new ItalicMark(),
|
||||
],
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new CodeBlockNode(),
|
||||
new HardBreakNode(),
|
||||
new HeadingNode({ maxLevel: 3 }),
|
||||
new TodoItemNode(),
|
||||
new TodoListNode(),
|
||||
new BoldMark(),
|
||||
new CodeMark(),
|
||||
new ItalicMark(),
|
||||
],
|
||||
content: `
|
||||
<h2>
|
||||
Todo List
|
||||
</h2>
|
||||
<p>
|
||||
There is always something to do. Thankfully, there are checklists for that. Don't forget to call mom.
|
||||
</p>
|
||||
<ul data-type="todo_list">
|
||||
<li data-type="todo_item" data-done="true">
|
||||
Buy beer
|
||||
</li>
|
||||
<li data-type="todo_item" data-done="true">
|
||||
Buy meat
|
||||
</li>
|
||||
<li data-type="todo_item" data-done="true">
|
||||
Buy milk
|
||||
</li>
|
||||
<li data-type="todo_item" data-done="false">
|
||||
Call mom
|
||||
</li>
|
||||
</ul>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user