fix：富文本编辑器：1.修改了只读模式下显示了’请输入内容‘ 的bug

src/components/Editor/index.vue

@@ -25,14 +25,17 @@
     />
   </div>
   <!-- 图片预览对话框 -->
-  <el-dialog v-model="previewDialogVisible" title="图片预览" width="80%" append-to-body>
+  <el-dialog v-model="previewDialogVisible" title="图片预览" width="90%" append-to-body>
     <div class="image-preview-container">
-      <el-image
+      <div class="image-wrapper">
-        v-if="currentPreviewImage"
+        <img
-        :src="currentPreviewImage"
+          v-if="currentPreviewImage"
-        fit="contain"
+          :src="currentPreviewImage"
-        style="width: 100%; max-height: 70vh;"
+          alt="预览图片"
-      />
+          class="preview-image"
+          @load="handleImageLoad"
+        />
+      </div>
       <div v-if="imageUrlList.length > 1" class="image-preview-nav">
         <el-button
           :disabled="currentImageIndex === 0"
@@ -94,6 +97,13 @@ const currentPreviewImage = computed(() => {
   return imageUrlList.value[currentImageIndex.value] || '';
 });
 
+// 图片加载处理
+const handleImageLoad = (event: Event) => {
+  const img = event.target as HTMLImageElement;
+  // 图片加载完成后，确保图片能够正确显示
+  img.style.display = 'block';
+};
+
 const options = computed(() => {
   return {
     theme: 'snow',
@@ -126,7 +136,7 @@ const options = computed(() => {
         }
       }
     },
-    placeholder: '请输入内容',
+    placeholder: props.readOnly ? '' : '请输入内容', // 只读模式下不显示占位符
     readOnly: props.readOnly
   };
 });
@@ -176,6 +186,10 @@ watch(
       const quill = toRaw(quillEditorRef.value).getQuill();
       if (quill) {
         quill.enable(!newVal);
+        // 如果切换到只读模式，移除焦点
+        if (newVal) {
+          quill.blur();
+        }
       }
     }
     // 重新初始化图片点击事件
@@ -317,7 +331,7 @@ const handleUploadError = (err: any) => {
 onMounted(() => {
   nextTick(() => {
     initImageClickEvent();
-    // 如果已经是只读模式，确保图片可以点击
+    // 如果已经是只读模式，确保图片可以点击并且移除焦点
     if (props.readOnly && quillEditorRef.value) {
       const quill = toRaw(quillEditorRef.value).getQuill();
       if (quill) {
@@ -326,6 +340,8 @@ onMounted(() => {
         if (editorContainer) {
           editorContainer.style.pointerEvents = 'auto';
         }
+        // 移除焦点
+        quill.blur();
       }
     }
   });
@@ -426,6 +442,7 @@ onMounted(() => {
 /* 只读模式下的图片样式 - 确保图片仍然可以点击 */
 .editor :deep(.ql-editor.ql-disabled) {
   pointer-events: none; /* 禁用整个编辑器的指针事件 */
+  user-select: none; /* 禁用文本选择 */
 }
 
 .editor :deep(.ql-editor.ql-disabled img) {
@@ -433,6 +450,23 @@ onMounted(() => {
   cursor: pointer;
 }
 
+/* 隐藏只读模式下的占位符和光标 */
+.editor :deep(.ql-editor.ql-disabled::before) {
+  display: none !important; /* 隐藏占位符 */
+}
+
+.editor :deep(.ql-editor.ql-disabled .ql-cursor) {
+  display: none !important; /* 隐藏光标 */
+}
+
+.editor :deep(.ql-editor.ql-disabled *) {
+  caret-color: transparent !important; /* 隐藏光标 */
+}
+
+.editor :deep(.ql-editor.ql-disabled:focus) {
+  outline: none !important; /* 移除焦点样式 */
+}
+
 /* 图片预览容器样式 */
 .image-preview-container {
   display: flex;
@@ -440,6 +474,30 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   min-height: 400px;
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 100%;
+  flex: 1;
+  overflow: auto;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 75vh;
+  height: auto;
+  width: auto;
+  object-fit: contain;
+  display: block;
+  margin: 0 auto;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 }
 
 .image-preview-nav {
@@ -448,6 +506,7 @@ onMounted(() => {
   justify-content: center;
   gap: 20px;
   margin-top: 20px;
+  flex-shrink: 0;
 }
 
 .image-counter {