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

95
examples/Components/Routes/TextAlign/index.vue
View File

@@ -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>