68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<script setup>
|
|
import {ref, watch} from "vue";
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
height: {
|
|
type: String,
|
|
required: false,
|
|
default: "60vh"
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: false,
|
|
default: ""
|
|
},
|
|
rules: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => []
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
|
|
const content = ref("");
|
|
watch(() => props.modelValue, (newVal) => {
|
|
content.value = props.modelValue;
|
|
}, {immediate: true})
|
|
|
|
watch(content, () => emit("update:modelValue", content.value));
|
|
|
|
const definitions = {
|
|
left: {icon: "format_align_left"},
|
|
center: {icon: "format_align_center"},
|
|
right: {icon: "format_align_right"},
|
|
justify: {icon: "format_align_justify"},
|
|
bold: {icon: 'format_bold'},
|
|
italic: {icon: 'format_italic'},
|
|
strike: {icon: 'strikethrough_s'},
|
|
underline: {icon: 'format_underline'},
|
|
unordered: {icon: 'format_list_bulleted'},
|
|
ordered: {icon: 'format_list_numbered'},
|
|
undo: {icon: 'undo'},
|
|
redo: {icon: 'redo'},
|
|
}
|
|
|
|
const toolbar = [
|
|
["bold", "italic", "strike"],
|
|
["left", "center", "justify", "right"],
|
|
['unordered', 'ordered'],
|
|
["undo", "redo"]
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<q-editor
|
|
v-model="content"
|
|
:definitions="definitions"
|
|
:toolbar="toolbar"
|
|
:height="height"
|
|
v-bind="$attrs"
|
|
:rules="rules"
|
|
/>
|
|
</template>
|