大客流一张图界面BUG处理

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>