From f3a91f075853486778e24cddb3f0dbaf06abbbc2 Mon Sep 17 00:00:00 2001
From: guanpeng <huxin@123.com>
Date: Fri, 18 Jul 2025 22:47:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=AE=A2=E6=B5=81=E4=B8=80=E5=BC=A0?=
 =?UTF-8?q?=E5=9B=BE=E7=95=8C=E9=9D=A2BUG=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/QuillEditor/index.vue      | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/components/QuillEditor/index.vue

diff --git a/Dkl-vue3-ui-DP/src/components/QuillEditor/index.vue b/Dkl-vue3-ui-DP/src/components/QuillEditor/index.vue
new file mode 100644
index 0000000..9dc2d6b
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/components/QuillEditor/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div ref="editorRef"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import Quill from 'quill';
+import 'quill/dist/quill.snow.css';
+
+const props = defineProps({
+  content: String,
+  options: Object
+});
+const emit = defineEmits(['update:content']);
+
+const editorRef = ref();
+let quill = null;
+
+onMounted(() => {
+  quill = new Quill(editorRef.value, {
+    theme: 'snow',
+    modules: props.options?.modules || {
+      toolbar: [
+        ['bold', 'italic'],
+        [{ header: [1, 2, false] }],
+        ['link', 'image']
+      ]
+    },
+    placeholder: props.options?.placeholder || '请输入内容...'
+  });
+
+  quill.on('text-change', () => {
+    emit('update:content', quill.root.innerHTML);
+  });
+
+  if (props.content) {
+    quill.root.innerHTML = props.content;
+  }
+});
+
+watch(() => props.content, (newVal) => {
+  if (quill && newVal !== quill.root.innerHTML) {
+    quill.root.innerHTML = newVal;
+  }
+});
+</script>
\ No newline at end of file