141 lines
4.7 KiB
Vue
141 lines
4.7 KiB
Vue
<script setup>
|
|
const editor = useEditor({
|
|
content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
|
|
extensions: [TiptapStarterKit],
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
|
<InputGroup>
|
|
<UButtonGroup>
|
|
<UButton
|
|
@click="editor.chain().focus().undo().run()"
|
|
:disabled="!editor.can().chain().focus().undo().run()"
|
|
icon="i-mdi-undo"
|
|
class="px-3"
|
|
/>
|
|
<UButton
|
|
@click="editor.chain().focus().redo().run()"
|
|
:disabled="!editor.can().chain().focus().redo().run()"
|
|
icon="i-mdi-redo"
|
|
class="px-3"
|
|
/>
|
|
</UButtonGroup>
|
|
|
|
<UButtonGroup v-if="editor">
|
|
|
|
|
|
<UButton
|
|
@click="editor.chain().focus().toggleBold().run()"
|
|
:disabled="!editor.can().chain().focus().toggleBold().run()"
|
|
:variant="editor.isActive('bold') ? 'solid' : 'outline'"
|
|
>
|
|
B
|
|
</UButton>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleItalic().run()"
|
|
:disabled="!editor.can().chain().focus().toggleItalic().run()"
|
|
:variant="editor.isActive('italic') ? 'solid' : 'outline'"
|
|
>
|
|
<span class="italic">I</span>
|
|
</UButton>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleStrike().run()"
|
|
:disabled="!editor.can().chain().focus().toggleStrike().run()"
|
|
:variant="editor.isActive('strike') ? 'solid' : 'outline'"
|
|
>
|
|
<span class="line-through">D</span>
|
|
</UButton>
|
|
</UButtonGroup>
|
|
<UButtonGroup>
|
|
<!-- <UButton
|
|
@click="editor.chain().focus().toggleCode().run()"
|
|
:disabled="!editor.can().chain().focus().toggleCode().run()"
|
|
:class="{ 'is-active': editor.isActive('code') }"
|
|
>
|
|
code
|
|
</UButton>
|
|
<UButton @click="editor.chain().focus().unsetAllMarks().run()">
|
|
clear marks
|
|
</UButton>
|
|
<UButton @click="editor.chain().focus().clearNodes().run()">
|
|
clear nodes
|
|
</UButton>
|
|
<UButton
|
|
@click="editor.chain().focus().setParagraph().run()"
|
|
:class="{ 'is-active': editor.isActive('paragraph') }"
|
|
>
|
|
<span>P</span>
|
|
</UButton>-->
|
|
<UButton
|
|
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
|
|
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
|
|
icon="i-mdi-format-header-1"
|
|
/>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
|
|
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
|
|
icon="i-mdi-format-header-2"
|
|
/>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
|
|
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
|
|
icon="i-mdi-format-header-3"
|
|
/>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
|
|
:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
|
|
icon="i-mdi-format-header-4"
|
|
/>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
|
|
:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
|
|
icon="i-mdi-format-header-5"
|
|
/>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
|
|
:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
|
|
icon="i-mdi-format-header-6"
|
|
/>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleBulletList().run()"
|
|
:class="{ 'is-active': editor.isActive('bulletList') }"
|
|
icon="i-mdi-format-list-bulleted"
|
|
/>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleOrderedList().run()"
|
|
:class="{ 'is-active': editor.isActive('orderedList') }"
|
|
icon="i-mdi-format-list-numbered"
|
|
/>
|
|
<!-- <UButton
|
|
@click="editor.chain().focus().toggleCodeBlock().run()"
|
|
:class="{ 'is-active': editor.isActive('codeBlock') }"
|
|
>
|
|
code block
|
|
</UButton>
|
|
<UButton
|
|
@click="editor.chain().focus().toggleBlockquote().run()"
|
|
:class="{ 'is-active': editor.isActive('blockquote') }"
|
|
>
|
|
blockquote
|
|
</UButton>
|
|
<UButton @click="editor.chain().focus().setHorizontalRule().run()">
|
|
horizontal rule
|
|
</UButton>
|
|
<UButton @click="editor.chain().focus().setHardBreak().run()">
|
|
hard break
|
|
</UButton>-->
|
|
|
|
</UButtonGroup>
|
|
</InputGroup>
|
|
|
|
<TiptapEditorContent class="mt-5" :editor="editor" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |