Merge branch 'master' of https://github.com/datawhalechina/whale-web

2021-04-26 18:39:37 +08:00 · 2021-04-26 18:39:37 +08:00 · 41fa45e864
parent f23900fc56 61fa5e4496
commit 41fa45e864
9 changed files with 324 additions and 126 deletions
--- a/bluewhale/bluewhale/settings.py
+++ b/bluewhale/bluewhale/settings.py
@ -87,13 +87,18 @@ WSGI_APPLICATION = 'bluewhale.wsgi.application'
 # Database
 # https://docs.djangoproject.com/en/3.1/ref/settings/#databases

+# ENV variables
+# export DB_HOST=127.0.0.1
+# export DB_USER=bluewhale
+# export DB_PASSWORD=bluewhale
+# export DB_DATABASE=bluewhale
 DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
-        'NAME': 'bluewhale',
-        'USER': 'bluewhale',
-        'PASSWORD': 'bluewhale',
-        'HOST': '127.0.0.1',
+        'NAME': os.getenv('DB_DATABASE', 'bluewhale'),
+        'USER': os.getenv('DB_USER', 'bluewhale'),
+        'PASSWORD': os.getenv('DB_PASSWORD', 'bluewhale'),
+        'HOST': os.getenv('DB_HOST', '127.0.0.1'),
        'PORT': '3306',
        'OPTIONS': {
            'charset': 'utf8mb4',
--- a/client/.editorconfig
+++ b/client/.editorconfig
@ -1,4 +1,4 @@
-[*.{js,jsx,ts,tsx,vue}]
+[*.{js,jsx,ts,tsx,vue,scss}]
 indent_style = space
 indent_size = 2
 end_of_line = lf
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -1544,11 +1544,6 @@
      "integrity": "sha1-RCsh9BlCesqooxBuvF1zNRxAcAI=",
      "dev": true
    },
-    "@tinymce/tinymce-vue": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npm.taobao.org/@tinymce/tinymce-vue/download/@tinymce/tinymce-vue-3.2.8.tgz?cache=0&sync_timestamp=1610428833329&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40tinymce%2Ftinymce-vue%2Fdownload%2F%40tinymce%2Ftinymce-vue-3.2.8.tgz",
-      "integrity": "sha1-AUVxtS7I+oNmWn+oh79lFAIH3nE="
-    },
    "@types/anymatch": {
      "version": "1.3.1",
      "resolved": "https://registry.npm.taobao.org/@types/anymatch/download/@types/anymatch-1.3.1.tgz",
@ -2176,6 +2171,17 @@
            "unique-filename": "^1.1.1"
          }
        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995355917&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
+          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
        "cliui": {
          "version": "6.0.0",
          "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-6.0.0.tgz?cache=0&sync_timestamp=1604880226973&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-6.0.0.tgz",
@ -2202,6 +2208,25 @@
          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
          "dev": true
        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@ -2218,6 +2243,16 @@
            "minipass": "^3.1.1"
          }
        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1611394404603&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
        "terser-webpack-plugin": {
          "version": "2.3.8",
          "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz",
@ -2235,6 +2270,18 @@
            "webpack-sources": "^1.4.3"
          }
        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.2.0",
+          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&sync_timestamp=1616796537201&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
+          "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
+        },
        "wrap-ansi": {
          "version": "6.2.0",
          "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-6.2.0.tgz",
@ -2738,7 +2785,6 @@
      "version": "1.0.10",
      "resolved": "https://registry.npm.taobao.org/argparse/download/argparse-1.0.10.tgz",
      "integrity": "sha1-vNZ5HqWuCXJeF+WtmIE0zUCz2RE=",
-      "dev": true,
      "requires": {
        "sprintf-js": "~1.0.2"
      }
@ -3013,6 +3059,27 @@
        "object.assign": "^4.1.0"
      }
    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1618851907522&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
    "balanced-match": {
      "version": "1.0.0",
      "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@ -8836,6 +8903,14 @@
        "verror": "1.10.0"
      }
    },
+    "katex": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npm.taobao.org/katex/download/katex-0.6.0.tgz",
+      "integrity": "sha1-EkGOCRIcBckgQbazuftrqyE8tvM=",
+      "requires": {
+        "match-at": "^0.1.0"
+      }
+    },
    "killable": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
@ -8889,6 +8964,14 @@
      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
      "dev": true
    },
+    "linkify-it": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npm.taobao.org/linkify-it/download/linkify-it-1.2.4.tgz",
+      "integrity": "sha1-B3NSbDF8j9E71TTuHRgP+Iq/iBo=",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
    "lint-staged": {
      "version": "9.5.0",
      "resolved": "https://registry.npm.taobao.org/lint-staged/download/lint-staged-9.5.0.tgz",
@ -9633,12 +9716,105 @@
        "object-visit": "^1.0.0"
      }
    },
+    "markdown-it": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npm.taobao.org/markdown-it/download/markdown-it-6.1.1.tgz?cache=0&sync_timestamp=1618575147599&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarkdown-it%2Fdownload%2Fmarkdown-it-6.1.1.tgz",
+      "integrity": "sha1-ztA39Ec+6fUVOsQU933IPJG6knw=",
+      "requires": {
+        "argparse": "^1.0.7",
+        "entities": "~1.1.1",
+        "linkify-it": "~1.2.2",
+        "mdurl": "~1.0.1",
+        "uc.micro": "^1.0.1"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npm.taobao.org/entities/download/entities-1.1.2.tgz?cache=0&sync_timestamp=1611535322406&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fentities%2Fdownload%2Fentities-1.1.2.tgz",
+          "integrity": "sha1-vfpzUplmTfr9NFKe1PhSKidf6lY="
+        }
+      }
+    },
+    "markdown-it-abbr": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-abbr/download/markdown-it-abbr-1.0.4.tgz",
+      "integrity": "sha1-1mtTZFIcuz3Yqlna37ovtoZcj9g="
+    },
+    "markdown-it-deflist": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-deflist/download/markdown-it-deflist-2.1.0.tgz",
+      "integrity": "sha1-UNela5VEzYElL3YjvXheKKjc71w="
+    },
+    "markdown-it-emoji": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-emoji/download/markdown-it-emoji-1.4.0.tgz",
+      "integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw="
+    },
+    "markdown-it-footnote": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-footnote/download/markdown-it-footnote-2.0.0.tgz",
+      "integrity": "sha1-FOnE9o/xLPNU+jZa43gnboEEypQ="
+    },
+    "markdown-it-ins": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-ins/download/markdown-it-ins-2.0.0.tgz",
+      "integrity": "sha1-papqMPHi9x6Ul1Z8/f9A8f3mdIM="
+    },
+    "markdown-it-katex": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-katex/download/markdown-it-katex-2.0.3.tgz",
+      "integrity": "sha1-17hqGuoLnWSW+rTnkZoY/e9YnDk=",
+      "requires": {
+        "katex": "^0.6.0"
+      }
+    },
+    "markdown-it-mark": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-mark/download/markdown-it-mark-2.0.0.tgz",
+      "integrity": "sha1-RqGqlHEFrtgYiXjgoBYXnkBPQsc="
+    },
+    "markdown-it-sub": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-sub/download/markdown-it-sub-1.0.0.tgz",
+      "integrity": "sha1-N1/WAm6ufdywEkl/ZBEZXqHjr+g="
+    },
+    "markdown-it-sup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-sup/download/markdown-it-sup-1.0.0.tgz",
+      "integrity": "sha1-y5yf+RpSVawI8/09YyhuFd8KH8M="
+    },
+    "markdown-it-task-lists": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-task-lists/download/markdown-it-task-lists-2.1.1.tgz",
+      "integrity": "sha1-9o9NKsK61aLDc7qTCBoaaEhBcIg="
+    },
+    "markdown-it-toc-and-anchor": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npm.taobao.org/markdown-it-toc-and-anchor/download/markdown-it-toc-and-anchor-4.2.0.tgz",
+      "integrity": "sha1-0WEzJ8xjxh+CzWbLrFVk9NsSwOk=",
+      "requires": {
+        "clone": "^2.1.0",
+        "uslug": "^1.0.4"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npm.taobao.org/clone/download/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        }
+      }
+    },
    "marked": {
      "version": "1.2.7",
      "resolved": "https://registry.npm.taobao.org/marked/download/marked-1.2.7.tgz?cache=0&sync_timestamp=1612382312415&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmarked%2Fdownload%2Fmarked-1.2.7.tgz",
      "integrity": "sha1-bhS1lVgdIxnNzwM6JMqvQUVaAfs=",
      "dev": true
    },
+    "match-at": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npm.taobao.org/match-at/download/match-at-0.1.1.tgz",
+      "integrity": "sha1-JdBA0pF3dwTV5lVru3kjDsLeBUA="
+    },
    "md5": {
      "version": "2.3.0",
      "resolved": "https://registry.npm.taobao.org/md5/download/md5-2.3.0.tgz?cache=0&sync_timestamp=1596362680344&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmd5%2Fdownload%2Fmd5-2.3.0.tgz",
@ -9666,6 +9842,11 @@
      "integrity": "sha1-aZs8OKxvHXKAkaZGULZdOIUC/Vs=",
      "dev": true
    },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.nlark.com/mdurl/download/mdurl-1.0.1.tgz",
+      "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
+    },
    "media-typer": {
      "version": "0.3.0",
      "resolved": "https://registry.npm.taobao.org/media-typer/download/media-typer-0.3.0.tgz",
@ -13624,8 +13805,7 @@
    "sprintf-js": {
      "version": "1.0.3",
      "resolved": "https://registry.npm.taobao.org/sprintf-js/download/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
    },
    "srcset": {
      "version": "1.0.0",
@ -14373,6 +14553,11 @@
      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
      "dev": true
    },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.nlark.com/uc.micro/download/uc.micro-1.0.6.tgz",
+      "integrity": "sha1-nEEagCpAmpH8bPdAgbq6NLJEmaw="
+    },
    "uglify-js": {
      "version": "3.4.10",
      "resolved": "https://registry.npm.taobao.org/uglify-js/download/uglify-js-3.4.10.tgz?cache=0&sync_timestamp=1611096871045&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuglify-js%2Fdownload%2Fuglify-js-3.4.10.tgz",
@ -14473,6 +14658,11 @@
      "integrity": "sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY=",
      "dev": true
    },
+    "unorm": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npm.taobao.org/unorm/download/unorm-1.6.0.tgz",
+      "integrity": "sha1-ApsolmH7pxTxqa9DnrUdmxbCBa8="
+    },
    "unpipe": {
      "version": "1.0.0",
      "resolved": "https://registry.npm.taobao.org/unpipe/download/unpipe-1.0.0.tgz",
@ -14609,6 +14799,14 @@
      "integrity": "sha1-1QyMrHmhn7wg8pEfVuuXP04QBw8=",
      "dev": true
    },
+    "uslug": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npm.taobao.org/uslug/download/uslug-1.0.4.tgz",
+      "integrity": "sha1-uaIvCRTgqGFAYz2swwLl9PpFBnc=",
+      "requires": {
+        "unorm": ">= 1.0.0"
+      }
+    },
    "util": {
      "version": "0.11.1",
      "resolved": "https://registry.npm.taobao.org/util/download/util-0.11.1.tgz?cache=0&sync_timestamp=1588238435623&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Futil%2Fdownload%2Futil-0.11.1.tgz",
@ -14829,84 +15027,30 @@
        }
      }
    },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.1.2",
-      "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.1.2.tgz?cache=0&sync_timestamp=1608187944571&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.1.2.tgz",
-      "integrity": "sha1-XAO2xQ0qX5g8fOuhXFDXjKKymPQ=",
-      "dev": true,
-      "optional": true,
+    "vue-markdown": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npm.taobao.org/vue-markdown/download/vue-markdown-2.2.4.tgz",
+      "integrity": "sha1-2w93QXjzvJHuGMYm2Go6DS3iJ0Y=",
      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
+        "highlight.js": "^9.12.0",
+        "markdown-it": "^6.0.1",
+        "markdown-it-abbr": "^1.0.3",
+        "markdown-it-deflist": "^2.0.1",
+        "markdown-it-emoji": "^1.1.1",
+        "markdown-it-footnote": "^2.0.0",
+        "markdown-it-ins": "^2.0.0",
+        "markdown-it-katex": "^2.0.3",
+        "markdown-it-mark": "^2.0.0",
+        "markdown-it-sub": "^1.0.0",
+        "markdown-it-sup": "^1.0.0",
+        "markdown-it-task-lists": "^2.0.1",
+        "markdown-it-toc-and-anchor": "^4.1.2"
      },
      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1604053731560&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
-          "integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1611394404603&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
+        "highlight.js": {
+          "version": "9.18.5",
+          "resolved": "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.5.tgz",
+          "integrity": "sha1-0Yo1mGfzeME41oGe38KorNXymCU="
        }
      }
    },
--- a/client/package.json
+++ b/client/package.json
@ -10,12 +10,13 @@
    "mock": "prism mock ../openapi.yaml"
  },
  "dependencies": {
-    "@tinymce/tinymce-vue": "^3.2.8",
    "axios": "^0.21.1",
+    "babel-runtime": "^6.26.0",
    "core-js": "^3.6.5",
    "lodash": "^4.17.20",
    "md5": "^2.3.0",
    "vue": "^2.6.11",
+    "vue-markdown": "^2.2.4",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.0"
--- a/client/src/assets/global.scss
+++ b/client/src/assets/global.scss
@ -0,0 +1,6 @@
+body {
+  height: 100%;
+}
+.full-height {
+  height: 100%;
+}
--- a/client/src/main.js
+++ b/client/src/main.js
@ -5,6 +5,7 @@ import router from './router';
 import vuetify from './plugins/vuetify';
 import store from './store';
 import axios from './utils/request';
+import '@/assets/global.scss';

 Vue.config.productionTip = false;

--- a/client/src/views/ArticleDetail.vue
+++ b/client/src/views/ArticleDetail.vue
@ -1,11 +1,17 @@
 <template>
  <v-container fluid>
    <h2 v-text="article.title"></h2>
-    <div v-html="article.content"></div>
+    <vue-markdown
+      :source="article.content"
+      :html="false"
+    >
+    </vue-markdown>
  </v-container>
 </template>

 <script>
+import VueMarkdown from 'vue-markdown';
+
 export default {
  name: 'ArticleDetail',
  data() {
@ -16,6 +22,9 @@ export default {
      },
    };
  },
+  components: {
+    VueMarkdown,
+  },
  mounted() {
    const { id } = this.$route.params;
    this.$axios.get(`/articles/${id}`).then((data) => {
--- a/client/src/views/ArticleEditor.vue
+++ b/client/src/views/ArticleEditor.vue
@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container fluid class="full-height">
    <v-row>
      <v-col
        cols="12"
@ -12,56 +12,90 @@
        ></v-text-field>
      </v-col>
    </v-row>
-    <editor
-      :api-key="api_key"
-      :init="tiny"
-      v-model="article.content"
-      cloud-channel="5-stable"></editor>
-    <v-btn
-      :loading="loading"
-      color="success"
-      @click="save"
-    >
-      Save
-      <v-icon right>mdi-content-save</v-icon>
-    </v-btn>
+    <v-row class="editor-container">
+      <v-col
+        cols="6"
+        sm="6"
+      >
+        <textarea
+          class="editor"
+          label="Content (Markdown)"
+          v-model="article.content"
+        ></textarea>
+      </v-col>
+      <v-col
+        cols="6"
+        sm="6"
+      >
+        <vue-markdown
+          class="result-html"
+          :source="article.content"
+          :html="false"
+        >
+        </vue-markdown>
+      </v-col>
+    </v-row>
+    <v-row justify="end">
+      <v-btn
+        :loading="loading"
+        color="success"
+        @click="save"
+      >
+        Save
+        <v-icon right>mdi-content-save</v-icon>
+      </v-btn>
+    </v-row>
  </v-container>
 </template>

+<style lang="scss" scoped>
+.result-html {
+  // vh, header, footer, title input, save button, container margin, row margin
+  height: calc(100vh - 48px - 60px - 94px - 48px - 24px - 12px);
+  padding: 2px 10px;
+  overflow: scroll;
+  background-color: #fff;
+  border: 1px solid#ccc;
+  border-radius: 4px;
+  position: relative;
+}
+.editor-container {
+  height: calc(100% - 94px - 36px);
+  .editor {
+    height: 100%;
+    max-height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    resize: none;
+    outline: none;
+    background-color: #f6f6f6;
+    overflow-y: scroll;
+    padding: 2px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
+    border-image: initial;
+  }
+}
+</style>
+
 <script>
-import Editor from '@tinymce/tinymce-vue';
+import VueMarkdown from 'vue-markdown';

 export default {
  name: 'ArticleDetail',
  data() {
    return {
      loading: false,
-      api_key: 'p71cr32cmowz59y5v09l0qt6zur14elj4yftbkhx432lggnp',
      id: null,
      article: {
        title: '',
        content: '',
      },
-      tiny: {
-        height: 500,
-        menubar: false,
-        // inline: true,
-        plugins: [
-          'advlist autolink lists link image charmap print preview anchor',
-          'searchreplace visualblocks code fullscreen',
-          'insertdatetime media table paste help wordcount codesample',
-        ],
-        toolbar: [
-          'undo redo | formatselect | bold italic underline strikethrough backcolor | '
-          + 'alignleft aligncenter alignright alignjustify | '
-          + 'bullist numlist outdent indent | removeformat | help',
-          'table tabledelete | image | codesample | code',
-        ],
-      },
    };
  },
  components: {
-    Editor,
+    VueMarkdown,
  },
  methods: {
    save() {
--- a/client/src/views/Articles.vue
+++ b/client/src/views/Articles.vue
@ -1,7 +1,5 @@
 <template>
-  <v-container fluid>
-    <router-view></router-view>
-  </v-container>
+  <router-view></router-view>
 </template>

 <script>