11<template >
2- <div >
3- <div v-if =" editor" >
4- <button
5- :disabled =" !editor.can().chain().focus().toggleBold().run()"
6- :class =" { 'is-active': editor.isActive('bold') }"
7- @click =" editor.chain().focus().toggleBold().run()"
8- >
9- bold
10- </button >
11- <button
12- :disabled =" !editor.can().chain().focus().toggleItalic().run()"
13- :class =" { 'is-active': editor.isActive('italic') }"
14- @click =" editor.chain().focus().toggleItalic().run()"
15- >
16- italic
17- </button >
18- <button
19- :disabled =" !editor.can().chain().focus().toggleStrike().run()"
20- :class =" { 'is-active': editor.isActive('strike') }"
21- @click =" editor.chain().focus().toggleStrike().run()"
22- >
23- strike
24- </button >
25- <button
26- :disabled =" !editor.can().chain().focus().toggleCode().run()"
27- :class =" { 'is-active': editor.isActive('code') }"
28- @click =" editor.chain().focus().toggleCode().run()"
29- >
30- code
31- </button >
32- <button @click =" editor.chain().focus().unsetAllMarks().run()" >
33- clear marks
34- </button >
35- <button @click =" editor.chain().focus().clearNodes().run()" >
36- clear nodes
37- </button >
38- <button
39- :class =" { 'is-active': editor.isActive('paragraph') }"
40- @click =" editor.chain().focus().setParagraph().run()"
41- >
42- paragraph
43- </button >
44- <button
45- :class =" { 'is-active': editor.isActive('heading', { level: 1 }) }"
46- @click =" editor.chain().focus().toggleHeading({ level: 1 }).run()"
47- >
48- h1
49- </button >
50- <button
51- :class =" { 'is-active': editor.isActive('heading', { level: 2 }) }"
52- @click =" editor.chain().focus().toggleHeading({ level: 2 }).run()"
53- >
54- h2
55- </button >
56- <button
57- :class =" { 'is-active': editor.isActive('heading', { level: 3 }) }"
58- @click =" editor.chain().focus().toggleHeading({ level: 3 }).run()"
59- >
60- h3
61- </button >
62- <button
63- :class =" { 'is-active': editor.isActive('heading', { level: 4 }) }"
64- @click =" editor.chain().focus().toggleHeading({ level: 4 }).run()"
65- >
66- h4
67- </button >
68- <button
69- :class =" { 'is-active': editor.isActive('heading', { level: 5 }) }"
70- @click =" editor.chain().focus().toggleHeading({ level: 5 }).run()"
71- >
72- h5
73- </button >
74- <button
75- :class =" { 'is-active': editor.isActive('heading', { level: 6 }) }"
76- @click =" editor.chain().focus().toggleHeading({ level: 6 }).run()"
77- >
78- h6
79- </button >
80- <button
81- :class =" { 'is-active': editor.isActive('bulletList') }"
82- @click =" editor.chain().focus().toggleBulletList().run()"
83- >
84- bullet list
85- </button >
86- <button
87- :class =" { 'is-active': editor.isActive('orderedList') }"
88- @click =" editor.chain().focus().toggleOrderedList().run()"
89- >
90- ordered list
91- </button >
92- <button
93- :class =" { 'is-active': editor.isActive('codeBlock') }"
94- @click =" editor.chain().focus().toggleCodeBlock().run()"
95- >
96- code block
97- </button >
98- <button
99- :class =" { 'is-active': editor.isActive('blockquote') }"
100- @click =" editor.chain().focus().toggleBlockquote().run()"
101- >
102- blockquote
103- </button >
104- <button @click =" editor.chain().focus().setHorizontalRule().run()" >
105- horizontal rule
106- </button >
107- <button @click =" editor.chain().focus().setHardBreak().run()" >
108- hard break
109- </button >
110- <button
111- :disabled =" !editor.can().chain().focus().undo().run()"
112- @click =" editor.chain().focus().undo().run()"
113- >
114- undo
115- </button >
116- <button
117- :disabled =" !editor.can().chain().focus().redo().run()"
118- @click =" editor.chain().focus().redo().run()"
119- >
120- redo
121- </button >
2+ <div >
3+ <div v-if =" editor" >
4+ <button
5+ :disabled =" !editor.can().chain().focus().toggleBold().run()"
6+ :class =" { 'is-active': editor.isActive('bold') }"
7+ @click =" editor.chain().focus().toggleBold().run()"
8+ >
9+ bold
10+ </button >
11+ <button
12+ :disabled =" !editor.can().chain().focus().toggleItalic().run()"
13+ :class =" { 'is-active': editor.isActive('italic') }"
14+ @click =" editor.chain().focus().toggleItalic().run()"
15+ >
16+ italic
17+ </button >
18+ <button
19+ :disabled =" !editor.can().chain().focus().toggleStrike().run()"
20+ :class =" { 'is-active': editor.isActive('strike') }"
21+ @click =" editor.chain().focus().toggleStrike().run()"
22+ >
23+ strike
24+ </button >
25+ <button
26+ :disabled =" !editor.can().chain().focus().toggleCode().run()"
27+ :class =" { 'is-active': editor.isActive('code') }"
28+ @click =" editor.chain().focus().toggleCode().run()"
29+ >
30+ code
31+ </button >
32+ <button @click =" editor.chain().focus().unsetAllMarks().run()" >
33+ clear marks
34+ </button >
35+ <button @click =" editor.chain().focus().clearNodes().run()" >
36+ clear nodes
37+ </button >
38+ <button
39+ :class =" { 'is-active': editor.isActive('paragraph') }"
40+ @click =" editor.chain().focus().setParagraph().run()"
41+ >
42+ paragraph
43+ </button >
44+ <button
45+ :class =" {
46+ 'is-active': editor.isActive('heading', { level: 1 }),
47+ }"
48+ @click ="
49+ editor.chain().focus().toggleHeading({ level: 1 }).run()
50+ "
51+ >
52+ h1
53+ </button >
54+ <button
55+ :class =" {
56+ 'is-active': editor.isActive('heading', { level: 2 }),
57+ }"
58+ @click ="
59+ editor.chain().focus().toggleHeading({ level: 2 }).run()
60+ "
61+ >
62+ h2
63+ </button >
64+ <button
65+ :class =" {
66+ 'is-active': editor.isActive('heading', { level: 3 }),
67+ }"
68+ @click ="
69+ editor.chain().focus().toggleHeading({ level: 3 }).run()
70+ "
71+ >
72+ h3
73+ </button >
74+ <button
75+ :class =" {
76+ 'is-active': editor.isActive('heading', { level: 4 }),
77+ }"
78+ @click ="
79+ editor.chain().focus().toggleHeading({ level: 4 }).run()
80+ "
81+ >
82+ h4
83+ </button >
84+ <button
85+ :class =" {
86+ 'is-active': editor.isActive('heading', { level: 5 }),
87+ }"
88+ @click ="
89+ editor.chain().focus().toggleHeading({ level: 5 }).run()
90+ "
91+ >
92+ h5
93+ </button >
94+ <button
95+ :class =" {
96+ 'is-active': editor.isActive('heading', { level: 6 }),
97+ }"
98+ @click ="
99+ editor.chain().focus().toggleHeading({ level: 6 }).run()
100+ "
101+ >
102+ h6
103+ </button >
104+ <button
105+ :class =" { 'is-active': editor.isActive('bulletList') }"
106+ @click =" editor.chain().focus().toggleBulletList().run()"
107+ >
108+ bullet list
109+ </button >
110+ <button
111+ :class =" { 'is-active': editor.isActive('orderedList') }"
112+ @click =" editor.chain().focus().toggleOrderedList().run()"
113+ >
114+ ordered list
115+ </button >
116+ <button
117+ :class =" { 'is-active': editor.isActive('codeBlock') }"
118+ @click =" editor.chain().focus().toggleCodeBlock().run()"
119+ >
120+ code block
121+ </button >
122+ <button
123+ :class =" { 'is-active': editor.isActive('blockquote') }"
124+ @click =" editor.chain().focus().toggleBlockquote().run()"
125+ >
126+ blockquote
127+ </button >
128+ <button @click =" editor.chain().focus().setHorizontalRule().run()" >
129+ horizontal rule
130+ </button >
131+ <button @click =" editor.chain().focus().setHardBreak().run()" >
132+ hard break
133+ </button >
134+ <button
135+ :disabled =" !editor.can().chain().focus().undo().run()"
136+ @click =" editor.chain().focus().undo().run()"
137+ >
138+ undo
139+ </button >
140+ <button
141+ :disabled =" !editor.can().chain().focus().redo().run()"
142+ @click =" editor.chain().focus().redo().run()"
143+ >
144+ redo
145+ </button >
146+ </div >
147+ <TiptapEditorContent :editor =" editor" />
122148 </div >
123- <TiptapEditorContent :editor =" editor" />
124- </div >
125149</template >
126150
127151<script setup>
@@ -133,15 +157,15 @@ const editor = useEditor({
133157
134158<style scoped>
135159button {
136- border-radius : 3px ;
137- background-image : linear-gradient (
138- to top ,
139- rgb (207 , 207 , 207 ) 16% ,
140- rgb (252 , 252 , 252 ) 79%
141- );
142- padding : 3px ;
143- border : 1px solid #000 ;
144- color : black ;
145- text-decoration : none ;
160+ border-radius : 3px ;
161+ background-image : linear-gradient (
162+ to top ,
163+ rgb (207 , 207 , 207 ) 16% ,
164+ rgb (252 , 252 , 252 ) 79%
165+ );
166+ padding : 3px ;
167+ border : 1px solid #000 ;
168+ color : black ;
169+ text-decoration : none ;
146170}
147171 </style >
0 commit comments