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

update Editor usage

Browse source
This commit is contained in:
Julian Krauser 2025-07-17 13:57:50 +02:00
parent a2101db747
commit 08c3698dd8
8 changed files with 34 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/QuillEditor.vue
View file

@ -4,7 +4,7 @@
<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import Quill, { Delta } from "quill";
import Quill, { Delta, type QuillOptions } from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
@ -14,21 +14,24 @@ type RangeStatic = { index: number; length: number };
<script lang="ts">
export default defineComponent({
props: {
options: {
type: Object as PropType<QuillOptions>,
default: {},
},
toolbar: {
type: [String, Array, Object],
default: "",
},
modules: {
type: Object as PropType<Record<string, unknown>>,
default: {},
},
content: {
type: [String, Object] as PropType<string | Delta>,
type: [String, Object] as PropType<string | Delta | null>,
default: "",
},
contentType: {
type: String as PropType<"delta" | "html" | "text">,
default: "text",
validator: (value: string) => {
return ["delta", "html", "text"].includes(value);
},
},
readonly: { type: Boolean, default: false },
placeholder: String,
@ -51,6 +54,16 @@ export default defineComponent({
instance: undefined as undefined | Quill,
};
},
computed: {
value: {
get(): string | Delta {
return this.content ?? "";
},
set(val: string | Delta) {
this.$emit("update:content", val);
},
},
},
mounted() {
this.instance = new Quill(this.$refs.quill as HTMLElement, {
theme: "snow",
@ -59,6 +72,7 @@ export default defineComponent({
},
placeholder: this.placeholder,
readOnly: this.readonly,
...this.options,
});
this.instance.on("selection-change", (range, oldRange, source) => {
@ -70,12 +84,12 @@ export default defineComponent({
this.$emit("selectionChange", { range, oldRange, source });
});
this.instance.on("text-change", (delta, oldDelta, source) => {
this.$emit("update:content", this.getContent());
this.value = this.getContent();
this.$emit("textChange", { delta, oldDelta, source });
});
this.$emit("ready", this.instance as Quill);
this.setContent(this.content);
this.setContent(this.value);
},
beforeUnmount() {
this.instance = undefined;
@ -91,6 +105,7 @@ export default defineComponent({
}
},
setContent(content: Delta | string) {
if (content == "") return;
if (this.contentType === "delta") {
if (typeof content !== "string") {
this.instance?.setContents(content);
@ -98,6 +113,9 @@ export default defineComponent({
} else if (this.contentType === "html") {
if (typeof content === "string" && this.instance) {
this.instance.root.innerHTML = content;
// this.instance.clipboard.dangerouslyPasteHTML(content);
// let delta = this.instance.clipboard.convert({ html: content });
// this.instance?.setContents(delta);
}
} else {
if (typeof content === "string") {

3
src/views/admin/club/newsletter/NewsletterData.vue
View file

@ -52,8 +52,7 @@ import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import QuillEditor from "@/components/QuillEditor.vue";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useAbilityStore } from "@/stores/ability";
</script>

3
src/views/admin/club/newsletter/NewsletterDates.vue
View file

@ -107,8 +107,7 @@
import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import QuillEditor from "@/components/QuillEditor.vue";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useNewsletterDatesStore } from "@/stores/admin/club/newsletter/newsletterDates";
import { useAbilityStore } from "@/stores/ability";

6
src/views/admin/club/newsletter/NewsletterOverview.vue
View file

@ -18,13 +18,12 @@
<label for="summary">Zusammenfassung</label>
<QuillEditor
id="summary"
theme="snow"
placeholder="Zusammenfassung zum Newsletter..."
style="height: 250px; max-height: 250px; min-height: 250px"
contentType="html"
:toolbar="toolbarOptions"
v-model:content="activeNewsletterObj.description"
:enable="can('create', 'club', 'newsletter')"
:readonly="!can('create', 'club', 'newsletter')"
:style="!can('create', 'club', 'newsletter') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
/>
</div>
@ -42,8 +41,7 @@ import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import QuillEditor from "@/components/QuillEditor.vue";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useAbilityStore } from "@/stores/ability";
</script>

3
src/views/admin/club/protocol/ProtocolAgenda.vue
View file

@ -78,8 +78,7 @@
import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import QuillEditor from "@/components/QuillEditor.vue";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useProtocolAgendaStore } from "@/stores/admin/club/protocol/protocolAgenda";
import { useAbilityStore } from "@/stores/ability";

3
src/views/admin/club/protocol/ProtocolDecisions.vue
View file

@ -78,8 +78,7 @@
import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import QuillEditor from "@/components/QuillEditor.vue";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useProtocolDecisionStore } from "@/stores/admin/club/protocol/protocolDecision";
import { useAbilityStore } from "@/stores/ability";

3
src/views/admin/club/protocol/ProtocolOverview.vue
View file

@ -64,8 +64,7 @@ import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useProtocolStore } from "@/stores/admin/club/protocol/protocol";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import QuillEditor from "@/components/QuillEditor.vue";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useAbilityStore } from "@/stores/ability";
</script>

3
src/views/admin/club/protocol/ProtocolVoting.vue
View file

@ -95,8 +95,7 @@
import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import QuillEditor from "@/components/QuillEditor.vue";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useProtocolVotingStore } from "@/stores/admin/club/protocol/protocolVoting";
import { useAbilityStore } from "@/stores/ability";