add some more commands

This commit is contained in:
Philipp Kühn
2020-09-21 23:17:30 +02:00
parent 778e064979
commit 4da71ecfbb
27 changed files with 207 additions and 210 deletions

View File

@@ -1,58 +1,58 @@
<template>
<div>
<div v-if="editor">
<button @click="editor.focus().removeMarks()">
<button @click="editor.chain().focus().removeMarks().run()">
clear format
</button>
<button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
<button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
bold
</button>
<button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
<button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
italic
</button>
<button @click="editor.focus().underline()" :class="{ 'is-active': editor.isActive('underline') }">
<button @click="editor.chain().focus().underline().run()" :class="{ 'is-active': editor.isActive('underline') }">
underline
</button>
<button @click="editor.focus().strike()" :class="{ 'is-active': editor.isActive('strike') }">
<button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
strike
</button>
<button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
<button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('codeBlock') }">
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
<button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1
</button>
<button @click="editor.focus().heading({ level: 2 })" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
<button @click="editor.chain().focus().heading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
h2
</button>
<button @click="editor.focus().heading({ level: 3 })" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
<button @click="editor.chain().focus().heading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
h3
</button>
<button @click="editor.focus().heading({ level: 4 })" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
<button @click="editor.chain().focus().heading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
h4
</button>
<button @click="editor.focus().heading({ level: 5 })" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
<button @click="editor.chain().focus().heading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
h5
</button>
<button @click="editor.focus().heading({ level: 6 })" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
<button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
h6
</button>
<button @click="editor.focus().blockquote()" :class="{ 'is-active': editor.isActive('blockquote') }">
<button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
blockquote
</button>
<button @click="editor.focus().horizontalRule()">
<button @click="editor.chain().focus().horizontalRule().run()">
horizontal rule
</button>
<button @click="editor.focus().hardBreak()">
<button @click="editor.chain().focus().hardBreak().run()">
hard break
</button>
<button @click="editor.focus().undo()">
<button @click="editor.chain().focus().undo().run()">
undo
</button>
<button @click="editor.focus().redo()">
<button @click="editor.chain().focus().redo().run()">
redo
</button>
</div>