✨ better editor layout

dmi · May 15, 2021 · 457618b · 457618b
1 parent cf6cc42
commit 457618b
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 53 deletions.
diff --git a/media/main.css b/media/main.css
@@ -1,24 +1,23 @@
 #vditor {
-  border: none;
-  padding-top: 30px;
-  height: 100vh;
+    border: none;
+    height: 100vh;
 }
 
 .vditor-reset {
-  font-size: 20px;
-  padding: 0 10% !important;
+    font-size: 20px;
+    padding: 0 5% !important;
 }
 
 .vditor-toolbar {
-  border: none;
-  background-color: transparent;
+    border: none;
+    background-color: transparent;
 }
 
 .vditor-outline {
-  border: none;
-  background-color: transparent;
+    border: none;
+    background-color: transparent;
 }
 
 .vditor-outline__title {
-  border: none;
+    border: none;
 }
diff --git a/media/main.js b/media/main.js
@@ -11,6 +11,56 @@
     const saveIcon =
         '<svg t="1590139100426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4845" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M292.571429 877.714286l438.857143 0 0-219.428571-438.857143 0 0 219.428571zm512 0l73.142857 0 0-512q0-8-5.714286-22t-11.428571-19.714286l-160.571429-160.571429q-5.714286-5.714286-19.428571-11.428571t-22.285714-5.714286l0 237.714286q0 22.857143-16 38.857143t-38.857143 16l-329.142857 0q-22.857143 0-38.857143-16t-16-38.857143l0-237.714286-73.142857 0 0 731.428571 73.142857 0 0-237.714286q0-22.857143 16-38.857143t38.857143-16l475.428571 0q22.857143 0 38.857143 16t16 38.857143l0 237.714286zm-219.428571-530.285714l0-182.857143q0-7.428571-5.428571-12.857143t-12.857143-5.428571l-109.714286 0q-7.428571 0-12.857143 5.428571t-5.428571 12.857143l0 182.857143q0 7.428571 5.428571 12.857143t12.857143 5.428571l109.714286 0q7.428571 0 12.857143-5.428571t5.428571-12.857143zm365.714286 18.285714l0 530.285714q0 22.857143-16 38.857143t-38.857143 16l-768 0q-22.857143 0-38.857143-16t-16-38.857143l0-768q0-22.857143 16-38.857143t38.857143-16l530.285714 0q22.857143 0 50.285714 11.428571t43.428571 27.428571l160 160q16 16 27.428571 43.428571t11.428571 50.285714z" p-id="4846"></path></svg>';
 
+    let toolbar = [
+        'emoji',
+        'headings',
+        'bold',
+        'italic',
+        'strike',
+        'link',
+        '|',
+        'list',
+        'ordered-list',
+        'check',
+        'outdent',
+        'indent',
+        '|',
+        'quote',
+        'line',
+        'code',
+        'inline-code',
+        'insert-before',
+        'insert-after',
+        '|',
+        'table',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'outline',
+        'edit-mode',
+        {
+            name: 'save',
+            tipPosition: 'n',
+            tip: 'save',
+            icon: saveIcon,
+            className: 'right',
+            click: () => {
+                saveDoc();
+            }
+        },
+        {
+            name: 'more',
+            toolbar: ['both', 'preview', 'devtools']
+        }
+    ].map((menuItem) => {
+        if (typeof menuItem === 'string') {
+            menuItem = { name: menuItem };
+        }
+        menuItem.tipPosition = 's';
+        return menuItem;
+    });
+
     let linkBase = '';
     let editorTheme = {};
     let imgConfig = {};
@@ -26,49 +76,7 @@
             postition: 'left'
         },
         cache: { enable: false },
-        toolbar: [
-            'emoji',
-            'headings',
-            'bold',
-            'italic',
-            'strike',
-            'link',
-            '|',
-            'list',
-            'ordered-list',
-            'check',
-            'outdent',
-            'indent',
-            '|',
-            'quote',
-            'line',
-            'code',
-            'inline-code',
-            'insert-before',
-            'insert-after',
-            '|',
-            'table',
-            '|',
-            'undo',
-            'redo',
-            '|',
-            'outline',
-            'edit-mode',
-            {
-                name: 'save',
-                tipPosition: 'n',
-                tip: 'save',
-                icon: saveIcon,
-                className: 'right',
-                click: () => {
-                    saveDoc();
-                }
-            },
-            {
-                name: 'more',
-                toolbar: ['both', 'preview', 'devtools']
-            }
-        ],
+        toolbar: toolbar,
         toolbarConfig: {
             pin: true
         },