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

add a complex configuration example

Browse Source
This commit is contained in:
Hans Pagel 2020-08-11 17:34:44 +02:00
parent 85b162d082
commit df387f01b7
2 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/src/demos/BasicConfiguration/index.vue
View File

@ -1,18 +1,16 @@
<template> <template>
<div class="editor"> <div class="editor">
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }"> <div class="menubar" v-if="editor">
<div class="menubar">
<button <button
class="menubar__button" class="menubar__button"
:class="{ 'is-active': isActive.bold() }" :class="{ 'is-active': editor.isActive('bold') }"
@click="commands.bold" @click="editor.commands.bold"
> >
<icon name="bold" /> Bold
</button> </button>
</div> </div>
</editor-menu-bar>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
</div> </div>
@ -20,13 +18,16 @@
<script> <script>
import { Editor } from '@tiptap/core' import { Editor } from '@tiptap/core'
import { EditorContent, Renderer, EditorMenuBar } from '@tiptap/vue' import { EditorContent, Renderer } from '@tiptap/vue'
import extensions, { Bold } from '@tiptap/starter-kit' import extensions from '@tiptap/starter-kit'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Bold from '@tiptap/extension-bold'
export default { export default {
components: { components: {
EditorContent, EditorContent,
EditorMenuBar,
}, },
data() { data() {
@ -38,9 +39,12 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>', content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
extensions: extensions([ extensions: [
new Bold, new Document(),
]), new Paragraph(),
new Text(),
new Bold(),
],
renderer: Renderer, renderer: Renderer,
}) })
}, },

2
docs/src/docPages/configuration.md
View File

@ -4,6 +4,4 @@ In its basic version tiptap comes very raw. There is no menu, no buttons, no sty
Let’s start to add a few basic things to the configuration. Let’s start to add a few basic things to the configuration.
// TODO: EditorMenuBar missing
<demo name="BasicConfiguration" /> <demo name="BasicConfiguration" />