started toolbar
This commit is contained in:
@@ -1,7 +1,156 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor">
|
<div class="sm-editor">
|
||||||
<EditorContent
|
<div
|
||||||
:editor="editor" />
|
v-if="editor"
|
||||||
|
class="flex bg-white p-1 border-t border-x border-gray rounded-t-2">
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().toggleBold().run()"
|
||||||
|
:disabled="!editor.can().chain().focus().toggleBold().run()"
|
||||||
|
:class="[
|
||||||
|
'flex',
|
||||||
|
editor.isActive('bold')
|
||||||
|
? ['bg-sky-6', 'text-white']
|
||||||
|
: ['bg-white', 'text-gray-6'],
|
||||||
|
'p-1',
|
||||||
|
'hover-bg-gray-3',
|
||||||
|
]">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="h-5 w-5"
|
||||||
|
viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M13.5,15.5H10V12.5H13.5A1.5,1.5 0 0,1 15,14A1.5,1.5 0 0,1 13.5,15.5M10,6.5H13A1.5,1.5 0 0,1 14.5,8A1.5,1.5 0 0,1 13,9.5H10M15.6,10.79C16.57,10.11 17.25,9 17.25,8C17.25,5.74 15.5,4 13.25,4H7V18H14.04C16.14,18 17.75,16.3 17.75,14.21C17.75,12.69 16.89,11.39 15.6,10.79Z"
|
||||||
|
fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().toggleItalic().run()"
|
||||||
|
:disabled="!editor.can().chain().focus().toggleItalic().run()"
|
||||||
|
:class="{ 'is-active': editor.isActive('italic') }">
|
||||||
|
italic
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().toggleStrike().run()"
|
||||||
|
:disabled="!editor.can().chain().focus().toggleStrike().run()"
|
||||||
|
:class="{ 'is-active': editor.isActive('strike') }">
|
||||||
|
strike
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().toggleCode().run()"
|
||||||
|
:disabled="!editor.can().chain().focus().toggleCode().run()"
|
||||||
|
:class="{ 'is-active': editor.isActive('code') }">
|
||||||
|
code
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().unsetAllMarks().run()">
|
||||||
|
clear marks
|
||||||
|
</button>
|
||||||
|
<button @click.prevent="editor.chain().focus().clearNodes().run()">
|
||||||
|
clear nodes
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().setParagraph().run()"
|
||||||
|
:class="{ 'is-active': editor.isActive('paragraph') }">
|
||||||
|
paragraph
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="
|
||||||
|
editor.chain().focus().toggleHeading({ level: 1 }).run()
|
||||||
|
"
|
||||||
|
:class="{
|
||||||
|
'is-active': editor.isActive('heading', { level: 1 }),
|
||||||
|
}">
|
||||||
|
h1
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="
|
||||||
|
editor.chain().focus().toggleHeading({ level: 2 }).run()
|
||||||
|
"
|
||||||
|
:class="{
|
||||||
|
'is-active': editor.isActive('heading', { level: 2 }),
|
||||||
|
}">
|
||||||
|
h2
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="
|
||||||
|
editor.chain().focus().toggleHeading({ level: 3 }).run()
|
||||||
|
"
|
||||||
|
:class="{
|
||||||
|
'is-active': editor.isActive('heading', { level: 3 }),
|
||||||
|
}">
|
||||||
|
h3
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="
|
||||||
|
editor.chain().focus().toggleHeading({ level: 4 }).run()
|
||||||
|
"
|
||||||
|
:class="{
|
||||||
|
'is-active': editor.isActive('heading', { level: 4 }),
|
||||||
|
}">
|
||||||
|
h4
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="
|
||||||
|
editor.chain().focus().toggleHeading({ level: 5 }).run()
|
||||||
|
"
|
||||||
|
:class="{
|
||||||
|
'is-active': editor.isActive('heading', { level: 5 }),
|
||||||
|
}">
|
||||||
|
h5
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="
|
||||||
|
editor.chain().focus().toggleHeading({ level: 6 }).run()
|
||||||
|
"
|
||||||
|
:class="{
|
||||||
|
'is-active': editor.isActive('heading', { level: 6 }),
|
||||||
|
}">
|
||||||
|
h6
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().toggleBulletList().run()"
|
||||||
|
:class="{ 'is-active': editor.isActive('bulletList') }">
|
||||||
|
bullet list
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="
|
||||||
|
editor.chain().focus().toggleOrderedList().run()
|
||||||
|
"
|
||||||
|
:class="{ 'is-active': editor.isActive('orderedList') }">
|
||||||
|
ordered list
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().toggleCodeBlock().run()"
|
||||||
|
:class="{ 'is-active': editor.isActive('codeBlock') }">
|
||||||
|
code block
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().toggleBlockquote().run()"
|
||||||
|
:class="{ 'is-active': editor.isActive('blockquote') }">
|
||||||
|
blockquote
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="
|
||||||
|
editor.chain().focus().setHorizontalRule().run()
|
||||||
|
">
|
||||||
|
horizontal rule
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().setHardBreak().run()">
|
||||||
|
hard break
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().undo().run()"
|
||||||
|
:disabled="!editor.can().chain().focus().undo().run()">
|
||||||
|
undo
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click.prevent="editor.chain().focus().redo().run()"
|
||||||
|
:disabled="!editor.can().chain().focus().redo().run()">
|
||||||
|
redo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<EditorContent :editor="editor" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -14,24 +163,22 @@ const props = defineProps({
|
|||||||
modelValue: {
|
modelValue: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const emits = defineEmits(["update:modelValue"]);
|
const emits = defineEmits(["update:modelValue"]);
|
||||||
|
|
||||||
const editor = useEditor({
|
const editor = useEditor({
|
||||||
content: props.modelValue,
|
content: props.modelValue,
|
||||||
extensions: [
|
extensions: [StarterKit],
|
||||||
StarterKit,
|
|
||||||
],
|
|
||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
emits("update:modelValue", editor.value.getHTML());
|
emits("update:modelValue", editor.value.getHTML());
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
editor.value.destroy();
|
editor.value.destroy();
|
||||||
})
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.modelValue,
|
() => props.modelValue,
|
||||||
@@ -43,21 +190,49 @@ watch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
editor.value.commands.setContent(newValue, false);
|
editor.value.commands.setContent(newValue, false);
|
||||||
}
|
},
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.ProseMirror {
|
.sm-editor {
|
||||||
border-width: 1px;
|
.toolbar {
|
||||||
border-radius: 0.5rem;
|
// display: flex;
|
||||||
border-color: rgba(156,163,175,1);
|
// border-width: 1px 1px 0 1px;
|
||||||
color: rgba(75,85,99,1);
|
// border-radius: 0.5rem 0.5rem 0 0;
|
||||||
padding: 1rem;
|
// border-color: rgba(156, 163, 175, 1);
|
||||||
background-color: rgba(255,255,255,1);
|
// background-color: rgba(255, 255, 255, 1);
|
||||||
height: 24rem;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
// w-full text-gray-6 flex-1 px-4 text-lg pt-5 border-gray border-1 rounded-l-2 rounded-r-2 bg-white
|
button {
|
||||||
</style>
|
display: flex;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
color: rgba(75, 85, 99, 1);
|
||||||
|
padding: 0.25rem;
|
||||||
|
margin: 0.25rem;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 1.2rem;
|
||||||
|
width: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.is-active {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ProseMirror {
|
||||||
|
border-width: 1px;
|
||||||
|
border-radius: 0 0 0.5rem 0.5rem;
|
||||||
|
border-color: rgba(156, 163, 175, 0.5) rgba(156, 163, 175, 1)
|
||||||
|
rgba(156, 163, 175, 1);
|
||||||
|
color: rgba(75, 85, 99, 1);
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
height: 24rem;
|
||||||
|
overflow: scroll;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user