59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<div class="bg-white dark:bg-white rounded-md border border-gray-200 dark:border-gray-200 overflow-hidden">
|
|
<UEditor
|
|
v-slot="{ editor }"
|
|
v-model="content"
|
|
content-type="html"
|
|
:editable="!props.disabled"
|
|
:placeholder="props.placeholder"
|
|
:ui="{
|
|
content: 'bg-white dark:bg-white',
|
|
base: 'min-h-[200px] p-3 bg-white dark:bg-white'
|
|
}"
|
|
class="w-full"
|
|
>
|
|
<UEditorToolbar
|
|
:editor="editor"
|
|
:items="toolbarItems"
|
|
class="border-b border-muted sticky top-0 inset-x-0 px-3 py-2 z-50 bg-default overflow-x-auto"
|
|
/>
|
|
</UEditor>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
modelValue: string
|
|
disabled?: boolean
|
|
placeholder?: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
const content = computed({
|
|
get: () => props.modelValue,
|
|
set: (newValue: string) => {
|
|
emit('update:modelValue', newValue)
|
|
}
|
|
})
|
|
|
|
const toolbarItems = [
|
|
[
|
|
{ kind: 'undo', icon: 'i-lucide-undo' },
|
|
{ kind: 'redo', icon: 'i-lucide-redo' }
|
|
],
|
|
[
|
|
{ kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
|
|
{ kind: 'mark', mark: 'italic', icon: 'i-lucide-italic' },
|
|
{ kind: 'mark', mark: 'underline', icon: 'i-lucide-underline' }
|
|
],
|
|
[
|
|
{ kind: 'bulletList', icon: 'i-lucide-list' },
|
|
{ kind: 'orderedList', icon: 'i-lucide-list-ordered' }
|
|
],
|
|
[{ kind: 'link', icon: 'i-lucide-link' }]
|
|
]
|
|
</script>
|