Преглед изворни кода

fix: quill toolbar/editor stacking + empty editor space

yangyi пре 2 дана
родитељ
комит
ad5e92ce4b
1 измењених фајлова са 19 додато и 4 уклоњено
  1. 19 4
      src/view/PostEditorView.vue

+ 19 - 4
src/view/PostEditorView.vue

@@ -28,11 +28,15 @@
         </el-row>
 
         <el-form-item label="内容简介">
-          <QuillEditor v-model:content="form.contentIntro" content-type="html" :toolbar="toolbar" class="quill-editor" />
+          <div class="editor-wrapper">
+            <QuillEditor v-model:content="form.contentIntro" content-type="html" :toolbar="toolbar" class="quill-editor" />
+          </div>
         </el-form-item>
 
         <el-form-item label="付费内容">
-          <QuillEditor v-model:content="form.contentPaid" content-type="html" :toolbar="toolbar" class="quill-editor" />
+          <div class="editor-wrapper">
+            <QuillEditor v-model:content="form.contentPaid" content-type="html" :toolbar="toolbar" class="quill-editor" />
+          </div>
         </el-form-item>
 
         <el-form-item>
@@ -157,6 +161,10 @@ onMounted(() => loadPost())
   justify-content: center;
   gap: 12px;
 }
+.editor-wrapper {
+  width: 100%;
+  display: block;
+}
 
 @media (max-width: 768px) {
   .post-editor {
@@ -177,12 +185,19 @@ onMounted(() => loadPost())
 </style>
 
 <style>
-.quill-editor .ql-container {
+.editor-wrapper .ql-container.ql-snow {
   min-height: 400px;
+  height: auto;
+}
+.editor-wrapper .ql-editor {
+  min-height: 350px;
 }
 @media (max-width: 768px) {
-  .quill-editor .ql-container {
+  .editor-wrapper .ql-container.ql-snow {
     min-height: 300px;
   }
+  .editor-wrapper .ql-editor {
+    min-height: 250px;
+  }
 }
 </style>