diff --git a/resources/assets/js/pages/manage/file.vue b/resources/assets/js/pages/manage/file.vue
index 6a76a90b7..12a267843 100644
--- a/resources/assets/js/pages/manage/file.vue
+++ b/resources/assets/js/pages/manage/file.vue
@@ -336,7 +336,7 @@
             class="page-file-drawer"
             :beforeClose="fileBeforeClose"
             :mask-closable="false">
-            <FilePreview v-if="fileInfo.permission === 0" :file="fileInfo"/>
+            <FilePreview v-if="isPreview" :file="fileInfo"/>
             <FileContent v-else ref="fileContent" v-model="fileShow" :file="fileInfo"/>
         </DrawerOverlay>
 
@@ -586,6 +586,10 @@ export default {
             return array;
         },
 
+        isPreview() {
+            return this.windowSmall || this.fileInfo.permission === 0
+        },
+
         isParentShare() {
             const {navigator} = this;
             return !!navigator.find(({share}) => share);
diff --git a/resources/assets/js/pages/single/file.vue b/resources/assets/js/pages/single/file.vue
index 31e0803a3..64bd9bf41 100644
--- a/resources/assets/js/pages/single/file.vue
+++ b/resources/assets/js/pages/single/file.vue
@@ -43,7 +43,7 @@ export default {
             return this.$route.query ? $A.runNum(this.$route.query.history_id) : 0;
         },
         isPreview() {
-            return this.code || this.historyId > 0 || (this.fileInfo && this.fileInfo.permission === 0)
+            return this.windowSmall || this.code || this.historyId > 0 || (this.fileInfo && this.fileInfo.permission === 0)
         },
         pageName() {
             let name = this.fileInfo ? this.fileInfo.name : '';
diff --git a/resources/assets/sass/pages/components/file-content.scss b/resources/assets/sass/pages/components/file-content.scss
index 50682bee7..40698931b 100644
--- a/resources/assets/sass/pages/components/file-content.scss
+++ b/resources/assets/sass/pages/components/file-content.scss
@@ -163,6 +163,14 @@
             display: flex;
         }
 
+        .teditor-wrapper {
+            .tox-editor-header {
+                .tox-toolbar--scrolling {
+                    flex-wrap: wrap;
+                }
+            }
+        }
+
         .mdeditor-box {
             position: relative;
             width: 100%;
@@ -301,6 +309,21 @@
     }
     .content-body {
         overflow: hidden;
+        .teditor-wrapper {
+            .tox-editor-header,
+            .tox-statusbar {
+                display: none;
+            }
+        }
+        .teditor-loadedstyle {
+            .tox-menubar,
+            .tox-toolbar-overlord {
+                padding: 0;
+            }
+            .tox-sidebar-wrap {
+                margin: 0;
+            }
+        }
         .markdown-preview-warp {
             flex: 1;
             overflow: auto;
@@ -323,11 +346,6 @@
         .content-body {
             min-width: 768px;
             overflow-x: auto;
-            .tox {
-                .tox-toolbar--scrolling {
-                    flex-wrap: wrap;
-                }
-            }
             .teditor-loadedstyle {
                 .tox-menubar,
                 .tox-toolbar-overlord {