mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-12-05 04:11:38 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix some examples

Browse Source
This commit is contained in:
Philipp Kühn 2018-10-22 21:40:12 +02:00
parent b913c84b58
commit 7437992dd5
6 changed files with 104 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/Components/Routes/Basic/index.vue
View File

@ -188,5 +188,8 @@ export default {
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

52
examples/Components/Routes/Embeds/index.vue
View File

@ -1,23 +1,11 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="editor__content" slot="content" slot-scope="props">
<h2>
Embeds
</h2>
<p>
This is an example of a custom iframe node. This iframe is rendered as a <strong>vue component</strong>. This makes it possible to render the input below to change its source.
</p>
<iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
</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,
@ -29,21 +17,35 @@ import IframeNode from './Iframe.js'
export default {
components: {
Editor,
EditorContent,
},
data() {
return {
extensions: [
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new BoldMark(),
new ItalicMark(),
new HistoryExtension(),
// custom extension
new IframeNode(),
],
editor: new Editor({
extensions: [
new HardBreakNode(),
new HeadingNode({ maxLevel: 3 }),
new BoldMark(),
new ItalicMark(),
new HistoryExtension(),
// custom extension
new IframeNode(),
],
content: `
<h2>
Embeds
</h2>
<p>
This is an example of a custom iframe node. This iframe is rendered as a <strong>vue component</strong>. This makes it possible to render the input below to change its source.
</p>
<iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

101
examples/Components/Routes/HidingMenuBar/index.vue
View File

@ -1,9 +1,8 @@
<template>
<div>
<editor class="editor" :extensions="extensions">
<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
<div v-if="nodes && marks">
<div class="editor">
<menu-bar :editor="editor">
<template slot-scope="{ nodes, marks, focused }">
<div class="menubar is-hidden" :class="{ 'is-focused': focused }">
<button
class="menubar__button"
@ -21,6 +20,22 @@
<icon name="italic" />
</button>
<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>
<button
class="menubar__button"
@click="marks.code.command"
@ -77,6 +92,14 @@
<icon name="ol" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.blockquote.active() }"
@click="nodes.blockquote.command"
>
<icon name="quote" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': nodes.code_block.active() }"
@ -86,24 +109,16 @@
</button>
</div>
</div>
</template>
</menu-bar>
<div class="editor__content" slot="content" slot-scope="props">
<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>
</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 {
BlockquoteNode,
BulletListNode,
@ -118,33 +133,51 @@ import {
CodeMark,
ItalicMark,
LinkMark,
StrikeMark,
UnderlineMark,
HistoryExtension,
} from 'tiptap-extensions'
export default {
components: {
Editor,
EditorContent,
MenuBar,
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 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>
`,
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

3
examples/Components/Routes/MenuBubble/index.vue
View File

@ -94,5 +94,8 @@ export default {
}),
}
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>

2
packages/tiptap/src/Components/MenuBar.js
View File

@ -10,6 +10,8 @@ export default {
return createElement('div', this.$scopedSlots.default({
nodes: this.editor.menuActions.nodes,
marks: this.editor.menuActions.marks,
focused: this.editor.view.focused,
focus: this.editor.focus,
}))
}
},

2
packages/tiptap/src/Components/MenuBubble.js
View File

@ -24,6 +24,8 @@ export default {
return createElement('div', this.$scopedSlots.default({
nodes: this.editor.menuActions.nodes,
marks: this.editor.menuActions.marks,
focused: this.editor.view.focused,
focus: this.editor.focus,
}))
}
},