133 lines
4.0 KiB
Vue
133 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<menu-item v-for="(item, index) in items" :key="index" v-bind="item" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import MenuItem from './MenuItem.vue'
|
|
|
|
export default {
|
|
components: {
|
|
MenuItem,
|
|
},
|
|
|
|
props: {
|
|
editor: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
items: [
|
|
{
|
|
icon: 'bold',
|
|
action: () => this.editor.chain().focus().toggleBold().run(),
|
|
isActive: () => this.editor.isActive('bold'),
|
|
},
|
|
{
|
|
icon: 'italic',
|
|
action: () => this.editor.chain().focus().toggleItalic().run(),
|
|
isActive: () => this.editor.isActive('italic'),
|
|
},
|
|
{
|
|
icon: 'strikethrough',
|
|
action: () => this.editor.chain().focus().toggleStrike().run(),
|
|
isActive: () => this.editor.isActive('strike'),
|
|
},
|
|
{
|
|
icon: 'code-view',
|
|
action: () => this.editor.chain().focus().toggleCode().run(),
|
|
isActive: () => this.editor.isActive('code'),
|
|
},
|
|
{
|
|
icon: 'format-clear',
|
|
action: () => this.editor.chain().focus().unsetAllMarks().run(),
|
|
},
|
|
{
|
|
icon: 'eraser-line',
|
|
action: () => this.editor.chain().focus().clearNodes().run(),
|
|
},
|
|
{
|
|
icon: 'paragraph',
|
|
action: () => this.editor.chain().focus().setParagraph().run(),
|
|
isActive: () => this.editor.isActive('paragraph'),
|
|
},
|
|
{
|
|
icon: 'h-1',
|
|
action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(),
|
|
isActive: () => this.editor.isActive('heading', { level: 1 }),
|
|
},
|
|
{
|
|
icon: 'h-2',
|
|
action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
|
|
isActive: () => this.editor.isActive('heading', { level: 2 }),
|
|
},
|
|
{
|
|
icon: 'h-3',
|
|
action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
|
|
isActive: () => this.editor.isActive('heading', { level: 3 }),
|
|
},
|
|
{
|
|
icon: 'h-4',
|
|
action: () => this.editor.chain().focus().toggleHeading({ level: 4 }).run(),
|
|
isActive: () => this.editor.isActive('heading', { level: 4 }),
|
|
},
|
|
{
|
|
icon: 'h-5',
|
|
action: () => this.editor.chain().focus().toggleHeading({ level: 5 }).run(),
|
|
isActive: () => this.editor.isActive('heading', { level: 5 }),
|
|
},
|
|
{
|
|
icon: 'h-6',
|
|
action: () => this.editor.chain().focus().toggleHeading({ level: 6 }).run(),
|
|
isActive: () => this.editor.isActive('heading', { level: 6 }),
|
|
},
|
|
{
|
|
icon: 'list-unordered',
|
|
action: () => this.editor.chain().focus().toggleBulletList().run(),
|
|
isActive: () => this.editor.isActive('bulletList'),
|
|
},
|
|
{
|
|
icon: 'list-ordered',
|
|
action: () => this.editor.chain().focus().toggleOrderedList().run(),
|
|
isActive: () => this.editor.isActive('orderedList'),
|
|
},
|
|
{
|
|
icon: 'code-box-line',
|
|
action: () => this.editor.chain().focus().toggleCodeBlock().run(),
|
|
isActive: () => this.editor.isActive('codeBlock'),
|
|
},
|
|
{
|
|
icon: 'double-quotes-l',
|
|
action: () => this.editor.chain().focus().toggleBlockquote().run(),
|
|
isActive: () => this.editor.isActive('blockquote'),
|
|
},
|
|
{
|
|
icon: 'separator',
|
|
action: () => this.editor.chain().focus().setHorizontalRule().run(),
|
|
},
|
|
{
|
|
icon: 'text-wrap',
|
|
action: () => this.editor.chain().focus().setHardBreak().run(),
|
|
},
|
|
{
|
|
icon: 'arrow-go-back-line',
|
|
action: () => this.editor.chain().focus().undo().run(),
|
|
},
|
|
{
|
|
icon: 'arrow-go-forward-line',
|
|
action: () => this.editor.chain().focus().redo().run(),
|
|
},
|
|
],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|