feat(Editor): 更新内容处理逻辑以支持Delta格式转换为HTML

- 修改Editor组件以将Delta格式内容转换为HTML并更新内部状态管理
- 调整contentType为html以匹配新的内容处理方式
- 在App.vue中实现Delta格式内容的处理逻辑，确保编辑器能够正确显示内容

src/App.vue

@@ -82,8 +82,27 @@ function getSafeContent(content) {
     return '';
   }
   
-  // 直接返回内容，让Editor组件处理Delta格式
-  return content;
+  // 如果是Delta格式，转换为HTML
+  if (typeof content === 'object' && content.ops) {
+    let html = '';
+    for (const op of content.ops) {
+      if (op.insert) {
+        if (typeof op.insert === 'string') {
+          html += op.insert;
+        } else if (op.insert.image) {
+          html += `<img src="${op.insert.image}" alt="image">`;
+        }
+      }
+    }
+    return html;
+  }
+  
+  // 如果是字符串，直接返回
+  if (typeof content === 'string') {
+    return content;
+  }
+  
+  return '';
 }
 </script>
 

src/components/Editor.vue

@@ -10,7 +10,7 @@
         @update:content="handleContentUpdate"
         @ready="handleEditorReady"
         @error="handleEditorError"
-        contentType="delta"
+        contentType="html"
       />
     </div>
     <div v-else class="placeholder-container">
@@ -24,7 +24,7 @@
 
 <script setup>
 /* eslint-disable no-undef */
-import { ref, computed, onUnmounted } from 'vue';
+import { ref, computed, onUnmounted, watch } from 'vue';
 import { QuillEditor } from '@vueup/vue-quill';
 import '@vueup/vue-quill/dist/vue-quill.snow.css';
 import { Document } from '@element-plus/icons-vue';
@@ -48,16 +48,7 @@ const emit = defineEmits(['update:content']);
 
 const editorKey = ref(0);
 const editorInstance = ref(null);
-
-// 计算编辑器内容
-const editorContent = computed({
-  get() {
-    return props.content ?? '';
-  },
-  set(value) {
-    emit('update:content', value);
-  }
-});
+const internalContent = ref('');
 
 const editorOptions = {
   theme: 'snow',
@@ -72,6 +63,52 @@ const editorOptions = {
   placeholder: '请输入章节内容...'
 };
 
+// 计算编辑器内容
+const editorContent = computed({
+  get() {
+    return internalContent.value;
+  },
+  set(value) {
+    internalContent.value = value;
+    emit('update:content', value);
+  }
+});
+
+// 将Delta格式转换为HTML
+function deltaToHtml(delta) {
+  if (!delta || !delta.ops) {
+    return '';
+  }
+  
+  let html = '';
+  for (const op of delta.ops) {
+    if (op.insert) {
+      if (typeof op.insert === 'string') {
+        html += op.insert;
+      } else if (op.insert.image) {
+        html += `<img src="${op.insert.image}" alt="image">`;
+      }
+    }
+  }
+  return html;
+}
+
+// 监听props.content变化
+watch(() => props.content, (newContent) => {
+  if (newContent) {
+    // 如果是Delta格式，转换为HTML
+    if (typeof newContent === 'object' && newContent.ops) {
+      internalContent.value = deltaToHtml(newContent);
+    } else if (typeof newContent === 'string') {
+      internalContent.value = newContent;
+    } else {
+      internalContent.value = '';
+    }
+  } else {
+    internalContent.value = '';
+  }
+}, { immediate: true });
+
 // 处理编辑器准备就绪
 function handleEditorReady(quill) {
   editorInstance.value = quill;