Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 30 Packages Wiki Activity Actions

enhance unmount and format

Browse source
This commit is contained in:
Julian Krauser 2025-07-18 15:52:54 +02:00
parent e6dfde058d
commit 4265ed6791
1 changed files with 28 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/QuillEditor.vue
View file

@ -1,5 +1,7 @@
<template> <template>
<div :id="id" :style="style" class="flex flex-col">
<div ref="quill"></div> <div ref="quill"></div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -18,6 +20,8 @@ const instance = ref<undefined | Quill>();
const model = ref<string | Delta>(""); const model = ref<string | Delta>("");
const props = defineProps({ const props = defineProps({
id: String,
style: [String, Object],
options: { options: {
type: Object as PropType<QuillOptions>, type: Object as PropType<QuillOptions>,
default: {}, default: {},
@ -54,11 +58,16 @@ watch(
() => props.content, () => props.content,
(val, oldVal) => { (val, oldVal) => {
if (!instance.value || !val || isEqual(val, model.value)) return; if (!instance.value || !val || isEqual(val, model.value)) return;
console.log("hi");
setContent(cloneDeep(val)); setContent(cloneDeep(val));
}, },
{ deep: true } { deep: true }
); );
watch(
() => props.readonly,
(val, oldVal) => {
instance.value?.enable(val);
}
);
watch(model, (val, oldVal) => { watch(model, (val, oldVal) => {
emit("update:content", cloneDeep(val)); emit("update:content", cloneDeep(val));
}); });
@ -81,7 +90,6 @@ onMounted(() => {
} else { } else {
emit("focus"); emit("focus");
} }
console.log(range);
emit("selectionChange", { range, oldRange, source }); emit("selectionChange", { range, oldRange, source });
}); });
quill.on(Quill.events.TEXT_CHANGE, (delta, oldDelta, source) => { quill.on(Quill.events.TEXT_CHANGE, (delta, oldDelta, source) => {
@ -94,7 +102,11 @@ onMounted(() => {
setContent(cloneDeep(props.content ?? "")); setContent(cloneDeep(props.content ?? ""));
}); });
onUnmounted(() => { onUnmounted(() => {
if (instance.value) {
instance.value.off(Quill.events.SELECTION_CHANGE);
instance.value.off(Quill.events.TEXT_CHANGE);
instance.value = undefined; instance.value = undefined;
}
}); });
function getContent(): string | Delta { function getContent(): string | Delta {
@ -125,3 +137,15 @@ function setContent(content: Delta | string) {
} }
} }
</script> </script>
<style>
.ql-container {
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.ql-toolbar {
background: var(--color-gray-100);
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
}
</style>