refactor: use uni-app framework (#55)

* update framework to uni-app

* fix: bug fix

* fix: bug fix

* 修改输出路径

* feat: publicPath

* feat: manifest update

* fix: cssEditor theme

* fix: style

* style: format code with prettier

* fix: table style & copy style on the night mode

* fix: upload image

* fix: style

Co-authored-by: yanglbme <szuyanglb@outlook.com>

.browserslistrc

@@ -1,2 +0,0 @@
-> 1%
-last 2 versions

.editorconfig

@@ -1,5 +1,18 @@
-[*.{js,jsx,ts,tsx,vue}]
+# https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
 indent_style = space
-indent_size = 4
-trim_trailing_whitespace = true
 insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0

babel.config.js

@@ -1,3 +1,60 @@
+const plugins = [];
+
+if (process.env.UNI_OPT_TREESHAKINGNG) {
+  plugins.push(
+    require("@dcloudio/vue-cli-plugin-uni-optimize/packages/babel-plugin-uni-api/index.js")
+  );
+}
+
+if (
+  (process.env.UNI_PLATFORM === "app-plus" && process.env.UNI_USING_V8) ||
+  (process.env.UNI_PLATFORM === "h5" &&
+    process.env.UNI_H5_BROWSER === "builtin")
+) {
+  const path = require("path");
+
+  const isWin = /^win/.test(process.platform);
+
+  const normalizePath = (path) => (isWin ? path.replace(/\\/g, "/") : path);
+
+  const input = normalizePath(process.env.UNI_INPUT_DIR);
+  try {
+    plugins.push([
+      require("@dcloudio/vue-cli-plugin-hbuilderx/packages/babel-plugin-console"),
+      {
+        file(file) {
+          file = normalizePath(file);
+          if (file.indexOf(input) === 0) {
+            return path.relative(input, file);
+          }
+          return false;
+        },
+      },
+    ]);
+  } catch (e) {}
+}
+
+process.UNI_LIBRARIES = process.UNI_LIBRARIES || ["@dcloudio/uni-ui"];
+process.UNI_LIBRARIES.forEach((libraryName) => {
+  plugins.push([
+    "import",
+    {
+      libraryName: libraryName,
+      customName: (name) => {
+        return `${libraryName}/lib/${name}/${name}`;
+      },
+    },
+  ]);
+});
 module.exports = {
-    presets: ["@vue/cli-plugin-babel/preset"],
+  presets: [
+    [
+      "@vue/app",
+      {
+        modules: "commonjs",
+        useBuiltIns: process.env.UNI_PLATFORM === "h5" ? "usage" : "entry",
+      },
+    ],
+  ],
+  plugins,
 };

jest.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    preset: "@vue/cli-plugin-unit-jest",
-};

package.json

@@ -1,53 +1,112 @@
 {
-  "name": "vue-md",
+  "name": "md",
-  "version": "1.4.7",
+  "version": "1.5.0",
-  "homepage": ".",
+  "private": true,
-  "description": "An open-source wechat markdown editor.",
-  "author": "doocs",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "npm run dev:h5",
-    "build": "vue-cli-service build",
+    "build": "npm run build:h5",
-    "lint": "vue-cli-service lint",
+    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
-    "test:unit": "vue-cli-service test:unit"
+    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
+    "build:h5": "cross-env NODE_ENV=production UNI_OUTPUT_DIR=dist UNI_PLATFORM=h5 vue-cli-service uni-build",
+    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
+    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
+    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
+    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
+    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
+    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
+    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
+    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
+    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
+    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
+    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
+    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
+    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
+    "dev:h5": "cross-env NODE_ENV=development UNI_OUTPUT_DIR=dist UNI_PLATFORM=h5 vue-cli-service uni-serve",
+    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
+    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
+    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
+    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
+    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
+    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
+    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
+    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
+    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
+    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
+    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
+    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
+    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
+    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
+    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
+    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
+    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
+    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
   },
   "dependencies": {
+    "@dcloudio/uni-app-plus": "^2.0.0-30720210122002",
+    "@dcloudio/uni-h5": "^2.0.0-30720210122002",
+    "@dcloudio/uni-helper-json": "*",
+    "@dcloudio/uni-mp-360": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-alipay": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-baidu": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-qq": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-toutiao": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-vue": "^2.0.0-30720210122002",
+    "@dcloudio/uni-mp-weixin": "^2.0.0-30720210122002",
+    "@dcloudio/uni-quickapp-native": "^2.0.0-30720210122002",
+    "@dcloudio/uni-quickapp-webview": "^2.0.0-30720210122002",
+    "@dcloudio/uni-stat": "^2.0.0-30720210122002",
+    "@vue/shared": "^3.0.0",
     "ali-oss": "^6.11.2",
     "axios": "^0.21.0",
     "buffer-from": "^1.1.1",
     "codemirror": "^5.58.3",
-    "core-js": "^3.7.0",
+    "core-js": "^3.8.3",
     "cos-js-sdk-v5": "^1.1.0",
     "crypto-js": "^4.0.0",
     "element-ui": "^2.14.1",
+    "flyio": "^0.6.2",
     "jquery": "^3.5.1",
     "juice": "^7.0.0",
-    "less": "^3.12.2",
     "marked": "^2.0.0",
     "prettier": "^2.2.0",
     "prettify": "^0.1.7",
     "qiniu-js": "^3.1.2",
+    "regenerator-runtime": "^0.12.1",
     "uuid": "^8.3.1",
     "vue": "^2.6.12",
     "vue-router": "^3.4.9",
     "vuex": "^3.5.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.9",
+    "@dcloudio/types": "*",
-    "@vue/cli-plugin-eslint": "^4.5.9",
+    "@dcloudio/uni-automator": "^2.0.0-30720210122002",
-    "@vue/cli-plugin-unit-jest": "^4.5.9",
+    "@dcloudio/uni-cli-shared": "^2.0.0-30720210122002",
-    "@vue/cli-service": "^4.5.9",
+    "@dcloudio/uni-migration": "^2.0.0-30720210122002",
-    "@vue/eslint-config-standard": "^5.1.2",
+    "@dcloudio/uni-template-compiler": "^2.0.0-30720210122002",
-    "@vue/test-utils": "1.1.1",
+    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.0-30720210122002",
-    "babel-eslint": "^10.1.0",
+    "@dcloudio/vue-cli-plugin-uni": "^2.0.0-30720210122002",
-    "eslint": "^7.14.0",
+    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.0-30720210122002",
-    "eslint-plugin-import": "^2.22.1",
+    "@dcloudio/webpack-uni-mp-loader": "^2.0.0-30720210122002",
-    "eslint-plugin-node": "^11.1.0",
+    "@dcloudio/webpack-uni-pages-loader": "^2.0.0-30720210122002",
-    "eslint-plugin-promise": "^4.2.1",
+    "@vue/cli-plugin-babel": "~4.5.0",
-    "eslint-plugin-standard": "^5.0.0",
+    "@vue/cli-service": "~4.5.0",
-    "eslint-plugin-vue": "^7.1.0",
+    "async-validator": "^1.11.5",
-    "less-loader": "^7.1.0",
+    "babel-plugin-import": "^1.11.0",
-    "node-sass": "^5.0.0",
+    "cross-env": "^7.0.2",
-    "sass-loader": "^10.1.0",
+    "jest": "^25.4.0",
-    "vue-template-compiler": "^2.6.12"
+    "less": "^3.12.2",
+    "less-loader": "^5.0.0",
+    "mini-types": "*",
+    "miniprogram-api-typings": "*",
+    "postcss-comment": "^2.0.0",
+    "sass-loader": "^11.0.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "Android >= 4",
+    "ios >= 8"
+  ],
+  "uni-app": {
+    "scripts": {}
   }
 }

postcss.config.js

@@ -0,0 +1,22 @@
+const path = require("path");
+module.exports = {
+  parser: require("postcss-comment"),
+  plugins: [
+    require("postcss-import")({
+      resolve(id, basedir, importOptions) {
+        if (id.startsWith("~@/")) {
+          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
+        } else if (id.startsWith("@/")) {
+          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
+        } else if (id.startsWith("/") && !id.startsWith("//")) {
+          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
+        }
+        return id;
+      },
+    }),
+    require("autoprefixer")({
+      remove: process.env.UNI_PLATFORM !== "h5",
+    }),
+    require("@dcloudio/vue-cli-plugin-uni/packages/postcss"),
+  ],
+};

public/index.html

@@ -1,33 +1,29 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta
-      name="keywords"
-      content="md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs"
-    />
-    <meta
-      name="description"
-      content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器"
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <title>微信 Markdown 编辑器</title>
-    <link
-      rel="shortcut icon"
-      href="https://gitee.com/yanglbme/resource/raw/master/doocs-md/favicon.png"
-    />
-    <link
-      rel="apple-touch-icon-precomposed"
-      href="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png"
-    />
-    <script src="https://cdn.bootcdn.net/ajax/libs/prettify/r224/prettify.min.js"></script>
-  </head>
 
-  <body>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="keywords" content="md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs" />
+  <meta name="description" content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器" />
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <!-- <title>
+            <%= htmlWebpackPlugin.options.title %>
+        </title> -->
+  <title>微信 Markdown 编辑器</title>
+  <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
+  <link rel="shortcut icon" href="https://gitee.com/yanglbme/resource/raw/master/doocs-md/favicon.png" />
+  <link rel="apple-touch-icon-precomposed" href="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png" />
+  <script src="https://cdn.bootcdn.net/ajax/libs/prettify/r224/prettify.min.js"></script>
+</head>
+
+<body>
+  <noscript>
+    <strong>Please enable JavaScript to continue.</strong>
+  </noscript>
   <div id="app"></div>
-  </body>
+  <!-- built files will be auto injected -->
+</body>
+
 </html>

src/App.vue

@@ -1,43 +1,76 @@
-<template>
-    <transition name="fade" v-if="loading">
-        <loading />
-    </transition>
-    <codemirror-editor v-else />
-</template>
-
 <script>
-import Loading from "./components/Loading";
-import CodemirrorEditor from "./view/CodemirrorEditor";
 export default {
-    name: "App",
+  onLaunch: function () {
-    components: {
+    console.log("App Launch");
-        Loading,
-        CodemirrorEditor,
   },
-    data() {
+  onShow: function () {
-        return {
+    console.log("App Show");
-            loading: true,
-        };
   },
-    mounted() {
+  onHide: function () {
-        setTimeout(() => {
+    console.log("App Hide");
-            this.loading = false;
-        }, 100);
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less">
-.fade-enter,
+/* 每个页面公共css */
-.fade-leave-to {
+@import url("./assets/less/style-mirror.css");
-    opacity: 0;
+@import url("./assets/less/theme.less");
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
 }
-.fade-enter-to,
+
-.fade-leave {
+::-webkit-scrollbar-track {
-    opacity: 1;
+  border-radius: 6px;
+  background-color: rgba(200, 200, 200, 0.3);
 }
-.fade-enter-active,
+
-.fade-leave-active {
+::-webkit-scrollbar-thumb {
-    transition: all 1s;
+  border-radius: 6px;
+  background-color: rgba(144, 146, 152, 0.5);
+  transition: background-color 0.3s;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144, 146, 152, 0.5);
+}
+/* CSS-hints */
+.CodeMirror-hints {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  list-style: none;
+
+  margin: 0;
+  padding: 2px;
+
+  border-radius: 4px;
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  min-width: 200px;
+  font-size: 12px;
+  font-family: monospace;
+
+  max-height: 20em;
+  overflow-y: auto;
+  color: #333333;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  margin-top: 10px;
+  padding: 4px 6px;
+  border-radius: 2px;
+  white-space: pre;
+  color: black;
+  cursor: pointer;
+}
+.CodeMirror-hint:first-of-type {
+  margin-top: 0;
+}
+.CodeMirror-hint:hover {
+  background: #f0f0f0;
 }
 </style>

src/assets/less/app.less

@@ -41,14 +41,6 @@ body {
   flex-direction: column;
 }
 
-.top {
-  height: 60px;
-  padding: 10px 20px;
-  display: flex;
-  align-items: center;
-  margin-right: 20px;
-}
-
 .web-title {
   margin: 0 15px 0 5px;
 }
@@ -75,7 +67,6 @@ section {
   display: flex;
   flex-direction: column;
   padding-top: 0;
-  padding-bottom: 10px;
 }
 
 .ctrl {
@@ -92,8 +83,8 @@ section {
   align-items: center;
   justify-content: center;
   display: flex;
-  overflow: scroll;
   word-break: break-all;
+  overflow-y: scroll;
 }
 
 .main-section {
@@ -107,6 +98,7 @@ section {
 }
 
 .preview {
+  position: relative;
   margin: 0 -20px;
   width: 375px;
   padding: 20px;
@@ -123,31 +115,6 @@ section {
   width: 100% !important;
 }
 
-/* 
-.preview table tr:nth-child(even){
-  background: rgb(250, 250, 250);
-}
- */
-.select-item-left {
-  float: left;
-}
-
-.select-item-right {
-  float: right;
-  color: #8492a6;
-  font-size: 13px;
-}
-
-.CodeMirror {
-  height: 100% !important;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  font-size: 14px;
-  padding: 20px;
-  width: 100% !important;
-  font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue",
-    sans-serif !important;
-}
-
 /* ele ui */
 .el-form-item {
   margin-bottom: 0 !important;
@@ -157,33 +124,10 @@ section {
   cursor: pointer;
 }
 
-::-webkit-scrollbar {
+uni-page-body,
-  width: 6px;
+uni-page-refresh {
-  height: 6px;
+  display: block;
-  background-color: #fff;
+  box-sizing: border-box;
-}
+  width: 100%;
-
+  height: 100%;
-::-webkit-scrollbar-track {
-  border-radius: 6px;
-  background-color: rgba(200, 200, 200, 0.3);
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 6px;
-  background-color: rgba(144, 146, 152, 0.5);
-  transition: background-color 0.3s;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(144, 146, 152, 0.5);
-}
-
-.CodeMirror-vscrollbar:focus {
-  outline: none;
-}
-
-.CodeMirror-scroll,
-.preview-wrapper {
-  overflow: unset;
-  overflow-y: scroll;
 }

src/assets/less/style-mirror.css

@@ -9,13 +9,19 @@
 */
 
 .cm-s-style-mirror.CodeMirror {
-  background: #f5f5f5;
   color: #444;
   font-size: 16px;
-  padding: 20px;
   line-height: 25px;
 }
 
+.cm-s-style-mirror .CodeMirror-scroll {
+  padding: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-x: hidden!important;
+  overflow-y: scroll!important;
+}
+
 .cm-s-style-mirror div.CodeMirror-selected {
   background: #e0e0e0;
 }

src/assets/less/theme.less

@@ -129,3 +129,32 @@
     background-color: @nightCodeMirrorColor;
   }
 }
+
+.CodeMirror {
+  padding-bottom: 0;
+  height: 100% !important;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue",
+    sans-serif !important;
+}
+
+.CodeMirror-vscrollbar:focus {
+  outline: none;
+}
+
+.CodeMirror-scroll {
+  padding: 20px;
+  padding-bottom: 0px;
+  overflow-x: hidden !important;
+  overflow-y: scroll !important;
+}
+
+.CodeMirror-vscrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+.codeMirror-wrapper {
+  height: 100% !important;
+}

src/assets/scripts/renderers/wx-renderer.js

@@ -111,10 +111,7 @@ class WxRenderer {
         }
       };
       renderer.paragraph = (text) => {
-                if (
+        if (text.indexOf("<figure") != -1 && text.indexOf("<img") != -1) {
-                    text.indexOf("<figure") != -1 &&
-                    text.indexOf("<img") != -1
-                ) {
           return text;
         }
         return text.replace(/ /g, "") === ""
@@ -123,13 +120,8 @@ class WxRenderer {
       };
 
       renderer.blockquote = (text) => {
-                text = text.replace(
+        text = text.replace(/<p.*?>/g, `<p ${getStyles("blockquote_p")}>`);
-                    /<p.*?>/g,
+        return `<blockquote ${getStyles("blockquote")}>${text}</blockquote>`;
-                    `<p ${getStyles("blockquote_p")}>`
-                );
-                return `<blockquote ${getStyles(
-                    "blockquote"
-                )}>${text}</blockquote>`;
       };
       renderer.code = (text, lang) => {
         text = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -178,24 +170,20 @@ class WxRenderer {
           )}>${text}</figcaption>`;
         }
         let figureStyles = getStyles("figure");
-                let imgStyles = getStyles(
+        let imgStyles = getStyles(ENV_STRETCH_IMAGE ? "image" : "image_org");
-                    ENV_STRETCH_IMAGE ? "image" : "image_org"
-                );
         return `<figure ${figureStyles}><img ${imgStyles} src="${href}" title="${title}" alt="${text}"/>${subText}</figure>`;
       };
       renderer.link = (href, title, text) => {
         if (href.startsWith("https://mp.weixin.qq.com")) {
-                    return `<a href="${href}" title="${
+          return `<a href="${href}" title="${title || text}" ${getStyles(
-                        title || text
+            "wx_link"
-                    }" ${getStyles("wx_link")}>${text}</a>`;
+          )}>${text}</a>`;
         }
         if (href === text || !status) {
           return text;
         }
         let ref = addFootnote(title || text, href);
-                return `<span ${getStyles(
+        return `<span ${getStyles("link")}>${text}<sup>[${ref}]</sup></span>`;
-                    "link"
-                )}>${text}<sup>[${ref}]</sup></span>`;
       };
       renderer.strong = (text) =>
         `<strong ${getStyles("strong")}>${text}</strong>`;

src/assets/scripts/tokenTools.js

@@ -49,9 +49,7 @@ export function utf8to16(str) {
         char2 = str.charCodeAt(i++);
         char3 = str.charCodeAt(i++);
         out += String.fromCharCode(
-                    ((c & 0x0f) << 12) |
+          ((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0)
-                        ((char2 & 0x3f) << 6) |
-                        ((char3 & 0x3f) << 0)
         );
         break;
     }
@@ -208,9 +206,7 @@ export function base64encode(str) {
     c2 = str.charCodeAt(i++);
     if (i == len) {
       out += base64EncodeChars.charAt(c1 >> 2);
-            out += base64EncodeChars.charAt(
+      out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
-                ((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4)
-            );
       out += base64EncodeChars.charAt((c2 & 0xf) << 2);
       out += "=";
       break;

src/assets/scripts/util.js

@@ -110,11 +110,7 @@ export function css2json(css) {
   // 初始化返回值
   let json = {};
 
-    while (
+  while (css.length > 0 && css.indexOf("{") !== -1 && css.indexOf("}") !== -1) {
-        css.length > 0 &&
-        css.indexOf("{") !== -1 &&
-        css.indexOf("}") !== -1
-    ) {
     // 存储第一个左/右花括号的下标
     const lbracket = css.indexOf("{");
     const rbracket = css.indexOf("}");

src/components/CodemirrorEditor/header.vue

@@ -1,11 +1,8 @@
 <template>
   <el-container class="top is-dark">
+    <div class="left-side">
       <!-- 图片上传 -->
-        <el-tooltip
+      <el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
-            :effect="effect"
-            content="上传图片"
-            placement="bottom-start"
-        >
         <i
           class="el-icon-upload"
           size="medium"
@@ -51,8 +48,6 @@
           @click="$emit('show-dialog-form')"
         ></i>
       </el-tooltip>
-        <el-form size="mini" class="ctrl" :inline="true">
-            <el-form-item>
       <el-select
         v-model="selectFont"
         size="mini"
@@ -71,8 +66,6 @@
           <span class="select-item-right">Abc</span>
         </el-option>
       </el-select>
-            </el-form-item>
-            <el-form-item>
       <el-select
         v-model="selectSize"
         size="mini"
@@ -90,8 +83,6 @@
           <span class="select-item-right">{{ size.desc }}</span>
         </el-option>
       </el-select>
-            </el-form-item>
-            <el-form-item>
       <el-select
         v-model="selectColor"
         size="mini"
@@ -109,7 +100,6 @@
           <span class="select-item-right">{{ color.desc }}</span>
         </el-option>
       </el-select>
-            </el-form-item>
       <el-tooltip content="自定义颜色" :effect="effect" placement="top">
         <el-color-picker
           v-model="selectColor"
@@ -132,7 +122,8 @@
         >
         </el-switch>
       </el-tooltip>
-        </el-form>
+    </div>
+    <div class="right-side">
       <el-tooltip
         class="item"
         :effect="effect"
@@ -175,6 +166,7 @@
         ></div>
         <div class="mode__switch" v-else @click="themeChanged"></div>
       </el-tooltip>
+    </div>
     <resetDialog
       :showResetConfirm="showResetConfirm"
       @confirm="confirmReset"
@@ -291,8 +283,7 @@ export default {
         // 输出提示
         this.$notify({
           showClose: true,
-                    message:
+          message: "已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴",
-                        "已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴",
           offset: 80,
           duration: 1600,
           type: "success",
@@ -300,7 +291,6 @@ export default {
         this.$emit("refresh");
         this.$emit("endCopy");
       }, 350);
-            e.target.blur();
     },
     // 自定义CSS样式
     async customStyle() {
@@ -375,6 +365,7 @@ export default {
 }
 .mode__switch {
   margin-left: 24px;
+  margin-right: 24px;
   width: 24px;
   height: 24px;
   background: url("../../assets/images/night.png") no-repeat;
@@ -386,6 +377,37 @@ export default {
   background-size: cover;
 }
 .top {
+  height: 60px;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
   margin-right: 0;
 }
+.el-select {
+  margin-right: 12px;
+}
+.left-side {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.right-side {
+  display: flex;
+  align-items: center;
+}
+
+/*
+.preview table tr:nth-child(even){
+  background: rgb(250, 250, 250);
+}
+ */
+.select-item-left {
+  float: left;
+}
+
+.select-item-right {
+  float: right;
+  color: #8492a6;
+  font-size: 13px;
+}
 </style>

src/components/CodemirrorEditor/insertForm.vue

@@ -47,9 +47,7 @@
       <el-button :type="btnType" plain @click="$emit('input', false)"
         >取 消</el-button
       >
-            <el-button :type="btnType" @click="insertTable" plain
+      <el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
-                >确 定</el-button
-            >
     </div>
   </el-dialog>
 </template>

src/components/CodemirrorEditor/resetDialog.vue

@@ -5,13 +5,9 @@
     :visible="showResetConfirm"
     @close="$emit('close')"
   >
-        <div class="text">
+    <div class="text">此操作将丢失本地缓存的文本和自定义样式，是否继续?</div>
-            此操作将丢失本地缓存的文本和自定义样式，是否继续?
-        </div>
     <div slot="footer" class="dialog-footer">
-            <el-button :type="btnType" plain @click="$emit('close')"
+      <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
-                >取 消</el-button
-            >
       <el-button :type="btnType" @click="$emit('confirm')" plain
         >确 定</el-button
       >

src/components/CodemirrorEditor/uploadImgDialog.vue

@@ -23,7 +23,7 @@
         </el-select>
         <el-upload
           drag
-                    action
+          action=""
           :headers="{ 'Content-Type': 'multipart/form-data' }"
           :show-file-list="false"
           :multiple="true"
@@ -68,14 +68,11 @@
               type="primary"
               href="https://gitee.com/profile/personal_access_tokens"
               target="_blank"
-                            >请在
+              >请在 Gitee「设置->安全设置->私人令牌」中生成</el-link
-                            Gitee「设置->安全设置->私人令牌」中生成</el-link
             >
           </el-form-item>
           <el-form-item>
-                        <el-button
+            <el-button type="primary" @click="saveGiteeConfiguration"
-                            type="primary"
-                            @click="saveGiteeConfiguration"
               >保存配置</el-button
             >
           </el-form-item>
@@ -114,9 +111,7 @@
             >
           </el-form-item>
           <el-form-item>
-                        <el-button
+            <el-button type="primary" @click="saveGitHubConfiguration"
-                            type="primary"
-                            @click="saveGitHubConfiguration"
               >保存配置</el-button
             >
           </el-form-item>
@@ -173,9 +168,7 @@
             >
           </el-form-item>
           <el-form-item>
-                        <el-button
+            <el-button type="primary" @click="saveAliOSSConfiguration"
-                            type="primary"
-                            @click="saveAliOSSConfiguration"
               >保存配置</el-button
             >
           </el-form-item>
@@ -232,9 +225,7 @@
             >
           </el-form-item>
           <el-form-item>
-                        <el-button
+            <el-button type="primary" @click="saveTxCOSConfiguration"
-                            type="primary"
-                            @click="saveTxCOSConfiguration"
               >保存配置</el-button
             >
           </el-form-item>
@@ -291,9 +282,7 @@
             >
           </el-form-item>
           <el-form-item>
-                        <el-button
+            <el-button type="primary" @click="saveQiniuConfiguration"
-                            type="primary"
-                            @click="saveQiniuConfiguration"
               >保存配置</el-button
             >
           </el-form-item>
@@ -401,23 +390,16 @@ export default {
     },
     saveGitHubConfiguration() {
       if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
-                const blankElement = this.formGitHub.repo
+        const blankElement = this.formGitHub.repo ? "token" : "GitHub 仓库";
-                    ? "token"
-                    : "GitHub 仓库";
         this.$message.error(`参数「​${blankElement}」不能为空`);
         return;
       }
-            localStorage.setItem(
+      localStorage.setItem("githubConfig", JSON.stringify(this.formGitHub));
-                "githubConfig",
-                JSON.stringify(this.formGitHub)
-            );
       this.$message.success("保存成功");
     },
     saveGiteeConfiguration() {
       if (!(this.formGitee.repo && this.formGitee.accessToken)) {
-                const blankElement = this.formGitee.repo
+        const blankElement = this.formGitee.repo ? "私人令牌" : "Gitee 仓库";
-                    ? "私人令牌"
-                    : "Gitee 仓库";
         this.$message.error(`参数「​${blankElement}」不能为空`);
         return;
       }
@@ -436,10 +418,7 @@ export default {
         this.$message.error(`阿里云 OSS 参数配置不全`);
         return;
       }
-            localStorage.setItem(
+      localStorage.setItem("aliOSSConfig", JSON.stringify(this.formAliOSS));
-                "aliOSSConfig",
-                JSON.stringify(this.formAliOSS)
-            );
       this.$message.success("保存成功");
     },
 

src/main.js

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import App from "./App.vue";
+import App from "./App";
 import store from "./store";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
@@ -13,13 +13,15 @@ import "codemirror/addon/edit/matchbrackets";
 import "codemirror/addon/selection/active-line";
 import "codemirror/addon/hint/show-hint.js";
 import "codemirror/addon/hint/css-hint.js";
-import "./assets/less/theme.less";
 
 Vue.use(ElementUI);
 
 Vue.config.productionTip = false;
 
-new Vue({
+App.mpType = "app";
+
+const app = new Vue({
   store,
-    render: (h) => h(App),
+  ...App,
-}).$mount("#app");
+});
+app.$mount();

src/manifest.json

@@ -0,0 +1,71 @@
+{
+  "name": "uni-md",
+  "appid": "",
+  "description": "",
+  "versionName": "1.0.0",
+  "versionCode": "100",
+  "transformPx": false,
+  "h5": {
+    "publicPath": "/md/"
+  },
+  "app-plus": {
+    "usingComponents": true,
+    "splashscreen": {
+      "alwaysShowBeforeRender": true,
+      "waiting": true,
+      "autoclose": true,
+      "delay": 0
+    },
+    "modules": {},
+    "distribute": {
+      "android": {
+        "permissions": [
+          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+          "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+          "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+          "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
+          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+          "<uses-feature android:name=\"android.hardware.camera\"/>",
+          "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+        ]
+      },
+      "ios": {},
+      "sdkConfigs": {}
+    }
+  },
+  "quickapp": {},
+  "mp-weixin": {
+    "appid": "",
+    "setting": {
+      "urlCheck": false
+    },
+    "usingComponents": true
+  },
+  "mp-alipay": {
+    "usingComponents": true
+  },
+  "mp-baidu": {
+    "usingComponents": true
+  },
+  "mp-toutiao": {
+    "usingComponents": true
+  },
+  "mp-qq": {
+    "usingComponents": true
+  }
+}

src/pages.json

@@ -0,0 +1,17 @@
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationStyle": "custom",
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  }
+}

src/pages/index/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <transition name="fade" v-if="loading">
+    <loading />
+  </transition>
+  <codemirror-editor v-else />
+</template>
+
+<script>
+import Loading from "../../components/Loading";
+import CodemirrorEditor from "./view/CodemirrorEditor";
+export default {
+  name: "App",
+  components: {
+    Loading,
+    CodemirrorEditor,
+  },
+  data() {
+    return {
+      loading: true,
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.loading = false;
+    }, 100);
+  },
+};
+</script>
+
+<style scoped>
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave {
+  opacity: 1;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 1s;
+}
+</style>

src/pages/index/view/CodemirrorEditor.vue

@@ -0,0 +1,486 @@
+<template>
+  <div class="container" :class="{ container_night: nightMode }">
+    <el-container>
+      <el-header class="editor__header">
+        <editor-header
+          ref="header"
+          @refresh="onEditorRefresh"
+          @cssChanged="cssChanged"
+          @download="downloadEditorContent"
+          @showCssEditor="showCssEditor = !showCssEditor"
+          @show-about-dialog="aboutDialogVisible = true"
+          @show-dialog-form="dialogFormVisible = true"
+          @show-dialog-upload-img="dialogUploadImgVisible = true"
+          @startCopy="(isCoping = true), (backLight = true)"
+          @endCopy="endCopy"
+        />
+      </el-header>
+      <el-main class="main-body">
+        <el-row class="main-section">
+          <el-col
+            :span="12"
+            class="codeMirror-wrapper"
+            @contextmenu.prevent.native="openMenu($event)"
+          >
+            <textarea
+              id="editor"
+              type="textarea"
+              placeholder="Your markdown text here."
+              v-model="source"
+            >
+            </textarea>
+          </el-col>
+          <el-col
+            :span="12"
+            class="preview-wrapper"
+            id="preview"
+            ref="preview"
+            :class="{
+              'preview-wrapper_night': nightMode && isCoping,
+            }"
+          >
+            <section
+              id="output-wrapper"
+              :class="{ output_night: nightMode && !backLight }"
+            >
+              <div class="preview">
+                <section id="output" v-html="output"></section>
+                <div class="loading-mask" v-if="nightMode && isCoping">
+                  <div class="loading__img"></div>
+                  <span>正在生成</span>
+                </div>
+              </div>
+            </section>
+          </el-col>
+          <transition
+            name="custom-classes-transition"
+            enter-active-class="bounceInRight"
+          >
+            <el-col
+              id="cssBox"
+              v-show="showCssEditor"
+              :span="12"
+              class="cssEditor-wrapper"
+            >
+              <textarea
+                id="cssEditor"
+                type="textarea"
+                placeholder="Your custom css here."
+              >
+              </textarea>
+            </el-col>
+          </transition>
+        </el-row>
+      </el-main>
+    </el-container>
+    <upload-img-dialog
+      v-model="dialogUploadImgVisible"
+      @close="dialogUploadImgVisible = false"
+      @beforeUpload="beforeUpload"
+      @uploadImage="uploadImage"
+      @uploaded="uploaded"
+    />
+    <about-dialog v-model="aboutDialogVisible" />
+    <insert-form-dialog v-model="dialogFormVisible" />
+    <right-click-menu
+      v-model="rightClickMenuVisible"
+      :left="mouseLeft"
+      :top="mouseTop"
+      @menuTick="onMenuEvent"
+      @closeMenu="closeRightClickMenu"
+    />
+  </div>
+</template>
+<script>
+import editorHeader from "../../../components/CodemirrorEditor/header";
+import aboutDialog from "../../../components/CodemirrorEditor/aboutDialog";
+import insertFormDialog from "../../../components/CodemirrorEditor/insertForm";
+import rightClickMenu from "../../../components/CodemirrorEditor/rightClickMenu";
+import uploadImgDialog from "../../../components/CodemirrorEditor/uploadImgDialog";
+
+import {
+  css2json,
+  downloadMD,
+  formatDoc,
+  setFontSize,
+  saveEditorContent,
+  customCssWithTemplate,
+  checkImage,
+} from "../../../assets/scripts/util";
+
+import { toBase64 } from "../../../assets/scripts/util";
+import fileApi from "../../../api/file";
+
+require("codemirror/mode/javascript/javascript");
+import { mapState, mapMutations } from "vuex";
+export default {
+  data() {
+    return {
+      showCssEditor: false,
+      aboutDialogVisible: false,
+      dialogUploadImgVisible: false,
+      dialogFormVisible: false,
+      isCoping: false,
+      isImgLoading: false,
+      backLight: false,
+      timeout: null,
+      changeTimer: null,
+      source: "",
+      mouseLeft: 0,
+      mouseTop: 0,
+    };
+  },
+  components: {
+    editorHeader,
+    aboutDialog,
+    insertFormDialog,
+    rightClickMenu,
+    uploadImgDialog,
+  },
+  computed: {
+    ...mapState({
+      wxRenderer: (state) => state.wxRenderer,
+      output: (state) => state.output,
+      editor: (state) => state.editor,
+      cssEditor: (state) => state.cssEditor,
+      currentSize: (state) => state.currentSize,
+      currentColor: (state) => state.currentColor,
+      nightMode: (state) => state.nightMode,
+      rightClickMenuVisible: (state) => state.rightClickMenuVisible,
+    }),
+  },
+  created() {
+    this.initEditorState();
+    this.$nextTick(() => {
+      this.initEditor();
+      this.initCssEditor();
+      this.onEditorRefresh();
+    });
+  },
+  methods: {
+    initEditor() {
+      this.initEditorEntity();
+      this.editor.on("change", (cm, e) => {
+        if (this.changeTimer) clearTimeout(this.changeTimer);
+        this.changeTimer = setTimeout(() => {
+          this.onEditorRefresh();
+          saveEditorContent(this.editor, "__editor_content");
+        }, 300);
+      });
+
+      // 粘贴上传图片并插入
+      this.editor.on("paste", (cm, e) => {
+        if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
+          return;
+        }
+        for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
+          let item = e.clipboardData.items[i];
+          if (item.kind === "file") {
+            // 校验图床参数
+            const pasteFile = item.getAsFile();
+            const isValid = this.beforeUpload(pasteFile);
+            if (!isValid) {
+              continue;
+            }
+            this.uploadImage(pasteFile);
+          }
+        }
+      });
+
+      this.editor.on("mousedown", () => {
+        this.$store.commit("setRightClickMenuVisible", false);
+      });
+      this.editor.on("blur", () => {
+        //!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
+        this.$store.commit("setRightClickMenuVisible", false);
+      });
+      this.editor.on("scroll", () => {
+        this.$store.commit("setRightClickMenuVisible", false);
+      });
+    },
+    initCssEditor() {
+      this.initCssEditorEntity();
+      // 自动提示
+      this.cssEditor.on("keyup", (cm, e) => {
+        if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
+          cm.showHint(e);
+        }
+      });
+      this.cssEditor.on("update", (instance) => {
+        this.cssChanged();
+        saveEditorContent(this.cssEditor, "__css_content");
+      });
+    },
+    cssChanged() {
+      let json = css2json(this.cssEditor.getValue(0));
+      let theme = setFontSize(this.currentSize.replace("px", ""));
+
+      theme = customCssWithTemplate(json, this.currentColor, theme);
+      this.setWxRendererOptions({
+        theme: theme,
+      });
+      this.onEditorRefresh();
+    },
+    beforeUpload(file) {
+      // validate image
+      const checkResult = checkImage(file);
+      if (!checkResult.ok) {
+        this.$message.error(checkResult.msg);
+        return false;
+      }
+
+      // check image host
+      let imgHost = localStorage.getItem("imgHost");
+      imgHost = imgHost ? imgHost : "default";
+      localStorage.setItem("imgHost", imgHost);
+
+      const config = localStorage.getItem(`${imgHost}Config`);
+      const isValidHost = imgHost == "default" || config;
+      if (!isValidHost) {
+        this.$message.error(`请先配置 ${imgHost} 图床参数`);
+        return false;
+      }
+      return true;
+    },
+    uploadImage(file) {
+      this.isImgLoading = true;
+      toBase64(file)
+        .then((base64Content) => {
+          fileApi
+            .fileUpload(base64Content, file)
+            .then((url) => {
+              this.uploaded(url);
+            })
+            .catch((err) => {
+              this.$message.error(err.message);
+            });
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        });
+      this.isImgLoading = false;
+    },
+    // 图片上传结束
+    uploaded(response) {
+      if (!response) {
+        this.$message.error("上传图片未知异常");
+        return;
+      }
+      this.dialogUploadImgVisible = false;
+      // 上传成功，获取光标
+      const cursor = this.editor.getCursor();
+      const imageUrl = response;
+      const markdownImage = `![](${imageUrl})`;
+      // 将 Markdown 形式的 URL 插入编辑框光标所在位置
+      this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
+      this.$message.success("图片上传成功");
+      this.onEditorRefresh();
+    },
+    // 左右滚动
+    leftAndRightScroll() {
+      const scrollCB = (text) => {
+        let source, target;
+
+        clearTimeout(this.timeout);
+        if (text === "preview") {
+          source = this.$refs.preview.$el;
+          target = document.getElementsByClassName("CodeMirror-scroll")[0];
+          this.editor.off("scroll", editorScrollCB);
+          this.timeout = setTimeout(() => {
+            this.editor.on("scroll", editorScrollCB);
+          }, 300);
+        } else if (text === "editor") {
+          source = document.getElementsByClassName("CodeMirror-scroll")[0];
+          target = this.$refs.preview.$el;
+          target.removeEventListener("scroll", previewScrollCB, false);
+          this.timeout = setTimeout(() => {
+            target.addEventListener("scroll", previewScrollCB, false);
+          }, 300);
+        }
+
+        let percentage =
+          source.scrollTop / (source.scrollHeight - source.offsetHeight);
+        let height = percentage * (target.scrollHeight - target.offsetHeight);
+
+        target.scrollTo(0, height);
+      };
+      const editorScrollCB = () => {
+        scrollCB("editor");
+      };
+      const previewScrollCB = () => {
+        scrollCB("preview");
+      };
+
+      this.$refs.preview.$el.addEventListener("scroll", previewScrollCB, false);
+      this.editor.on("scroll", editorScrollCB);
+    },
+    // 更新编辑器
+    onEditorRefresh() {
+      this.editorRefresh();
+      setTimeout(() => PR.prettyPrint(), 0);
+    },
+    // 复制结束
+    endCopy() {
+      this.backLight = false;
+      setTimeout(() => {
+        this.isCoping = false;
+      }, 800);
+    },
+    // 下载编辑器内容到本地
+    downloadEditorContent() {
+      downloadMD(this.editor.getValue(0));
+    },
+    // 格式化文档
+    formatContent() {
+      const doc = formatDoc(this.editor.getValue(0));
+      localStorage.setItem("__editor_content", doc);
+      this.editor.setValue(doc);
+    },
+    // 右键菜单
+    openMenu(e) {
+      const menuMinWidth = 105;
+      const offsetLeft = this.$el.getBoundingClientRect().left;
+      const offsetWidth = this.$el.offsetWidth;
+      const maxLeft = offsetWidth - menuMinWidth;
+      const left = e.clientX - offsetLeft;
+      this.mouseLeft = Math.min(maxLeft, left);
+      this.mouseTop = e.clientY + 10;
+      this.$store.commit("setRightClickMenuVisible", true);
+    },
+    closeRightClickMenu() {
+      this.$store.commit("setRightClickMenuVisible", false);
+    },
+    onMenuEvent(type, info = {}) {
+      switch (type) {
+        case "pageReset":
+          this.$refs.header.showResetConfirm = true;
+          break;
+        case "insertPic":
+          this.dialogUploadImgVisible = true;
+          break;
+        case "download":
+          this.downloadEditorContent();
+          break;
+        case "insertTable":
+          this.dialogFormVisible = true;
+          break;
+        case "formatMarkdown":
+          this.formatContent();
+          break;
+        default:
+          break;
+      }
+    },
+    ...mapMutations([
+      "initEditorState",
+      "initEditorEntity",
+      "setWxRendererOptions",
+      "editorRefresh",
+      "initCssEditorEntity",
+    ]),
+  },
+  mounted() {
+    setTimeout(() => {
+      this.leftAndRightScroll();
+      PR.prettyPrint();
+    }, 300);
+  },
+};
+</script>
+<style lang="less" scoped>
+.main-body {
+  padding-top: 12px;
+  overflow: hidden;
+}
+.el-main {
+  transition: all 0.3s;
+  padding: 0;
+  margin: 20px;
+  margin-top: 0;
+}
+.container {
+  transition: all 0.3s;
+}
+.textarea-wrapper {
+  height: 100%;
+}
+.preview-wrapper_night {
+  overflow-y: inherit;
+  position: relative;
+  left: -3px;
+  .preview {
+    background-color: #fff;
+  }
+}
+#output-wrapper {
+  position: relative;
+  user-select: text;
+}
+.loading-mask {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 376px;
+  height: 101%;
+  padding-top: 1px;
+  font-size: 15px;
+  color: gray;
+  background-color: #1e1e1e;
+  .loading__img {
+    position: absolute;
+    left: 50%;
+    top: 330px;
+    width: 50px;
+    height: 50px;
+    transform: translate(-50%, -50%);
+    background: url("../../../assets/images/favicon.png") no-repeat;
+    background-size: cover;
+  }
+  span {
+    position: absolute;
+    left: 50%;
+    top: 390px;
+    transform: translate(-50%, -50%);
+  }
+}
+.bounceInRight {
+  animation-name: bounceInRight;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+/deep/ .preview-table {
+  border-spacing: 0px;
+}
+
+@keyframes bounceInRight {
+  0%,
+  60%,
+  75%,
+  90%,
+  100% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  0% {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0);
+  }
+  75% {
+    transform: translate3d(10px, 0, 0);
+  }
+  90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+  100% {
+    transform: none;
+  }
+}
+</style>
+<style lang="less" scoped>
+@import url("../../../assets/less/app.less");
+@import url("../../../assets/less/github-v2.min.css");
+</style>

src/store/index.js

@@ -69,8 +69,7 @@ const mutations = {
     state.currentSize =
       localStorage.getItem("size") || config.sizeOption[2].value;
     state.codeTheme =
-            localStorage.getItem("codeTheme") ||
+      localStorage.getItem("codeTheme") || config.codeThemeOption[0].value;
-            config.codeThemeOption[0].value;
     state.citeStatus = localStorage.getItem("citeStatus") === "true";
     state.nightMode = localStorage.getItem("nightMode") === "true";
     state.wxRenderer = new WxRenderer({
@@ -81,10 +80,13 @@ const mutations = {
     });
   },
   initEditorEntity(state) {
-        state.editor = CodeMirror.fromTextArea(
+    const editorDom = document.getElementById("editor");
-            document.getElementById("editor"),
+
-            {
+    if (!editorDom.value) {
-                value: "",
+      editorDom.value =
+        localStorage.getItem("__editor_content") || formatDoc(DEFAULT_CONTENT);
+    }
+    state.editor = CodeMirror.fromTextArea(editorDom, {
       mode: "text/x-markdown",
       theme: "xq-light",
       lineNumbers: false,
@@ -99,20 +101,16 @@ const mutations = {
         },
         "Ctrl-S": function save(editor) {},
       },
-            }
+    });
-        );
-
-        // 如果有编辑器内容被保存则读取，否则加载默认内容
-        state.editor.setValue(
-            localStorage.getItem("__editor_content") ||
-                formatDoc(DEFAULT_CONTENT)
-        );
   },
   initCssEditorEntity(state) {
-        state.cssEditor = CodeMirror.fromTextArea(
+    const cssEditorDom = document.getElementById("cssEditor");
-            document.getElementById("cssEditor"),
+
-            {
+    if (!cssEditorDom.value) {
-                value: "",
+      cssEditorDom.value =
+        localStorage.getItem("__css_content") || DEFAULT_CSS_CONTENT;
+    }
+    state.cssEditor = CodeMirror.fromTextArea(cssEditorDom, {
       mode: "css",
       theme: "style-mirror",
       lineNumbers: false,
@@ -127,13 +125,7 @@ const mutations = {
         },
         "Ctrl-S": function save(editor) {},
       },
-            }
+    });
-        );
-
-        // 如果有编辑器内容被保存则读取，否则加载默认内容
-        state.cssEditor.setValue(
-            localStorage.getItem("__css_content") || DEFAULT_CSS_CONTENT
-        );
   },
   editorRefresh(state) {
     let output = marked(state.editor.getValue(0), {
@@ -152,6 +144,7 @@ const mutations = {
   },
   clearEditorToDefault(state) {
     const doc = formatDoc(DEFAULT_CONTENT);
+
     state.editor.setValue(doc);
     state.cssEditor.setValue(DEFAULT_CSS_CONTENT);
   },

src/view/CodemirrorEditor.vue

@@ -1,505 +0,0 @@
-<template>
-    <div class="container" :class="{ container_night: nightMode }">
-        <el-container>
-            <el-header class="editor__header">
-                <editor-header
-                    ref="header"
-                    @refresh="onEditorRefresh"
-                    @cssChanged="cssChanged"
-                    @download="downloadEditorContent"
-                    @showCssEditor="showCssEditor = !showCssEditor"
-                    @show-about-dialog="aboutDialogVisible = true"
-                    @show-dialog-form="dialogFormVisible = true"
-                    @show-dialog-upload-img="dialogUploadImgVisible = true"
-                    @startCopy="(isCoping = true), (backLight = true)"
-                    @endCopy="endCopy"
-                />
-            </el-header>
-            <el-main class="main-body">
-                <el-row class="main-section">
-                    <el-col
-                        :span="12"
-                        @contextmenu.prevent.native="openMenu($event)"
-                    >
-                        <textarea
-                            id="editor"
-                            type="textarea"
-                            placeholder="Your markdown text here."
-                            v-model="source"
-                        >
-                        </textarea>
-                    </el-col>
-                    <el-col
-                        :span="12"
-                        class="preview-wrapper"
-                        id="preview"
-                        ref="preview"
-                        :class="{
-                            'preview-wrapper_night': nightMode && isCoping,
-                        }"
-                    >
-                        <section
-                            id="output-wrapper"
-                            :class="{ output_night: nightMode && !backLight }"
-                        >
-                            <div class="preview">
-                                <section id="output" v-html="output"></section>
-                                <div
-                                    class="loading-mask"
-                                    v-if="nightMode && isCoping"
-                                >
-                                    <div class="loading__img"></div>
-                                    <span>正在生成</span>
-                                </div>
-                            </div>
-                        </section>
-                    </el-col>
-                    <transition
-                        name="custom-classes-transition"
-                        enter-active-class="bounceInRight"
-                    >
-                        <el-col id="cssBox" :span="12" v-show="showCssEditor">
-                            <textarea
-                                id="cssEditor"
-                                type="textarea"
-                                placeholder="Your custom css here."
-                            >
-                            </textarea>
-                        </el-col>
-                    </transition>
-                </el-row>
-            </el-main>
-        </el-container>
-        <upload-img-dialog
-            v-model="dialogUploadImgVisible"
-            @close="dialogUploadImgVisible = false"
-            @beforeUpload="beforeUpload"
-            @uploadImage="uploadImage"
-            @uploaded="uploaded"
-        />
-        <about-dialog v-model="aboutDialogVisible" />
-        <insert-form-dialog v-model="dialogFormVisible" />
-        <right-click-menu
-            v-model="rightClickMenuVisible"
-            :left="mouseLeft"
-            :top="mouseTop"
-            @menuTick="onMenuEvent"
-            @closeMenu="closeRightClickMenu"
-        />
-    </div>
-</template>
-<script>
-import editorHeader from "../components/CodemirrorEditor/header";
-import aboutDialog from "../components/CodemirrorEditor/aboutDialog";
-import insertFormDialog from "../components/CodemirrorEditor/insertForm";
-import rightClickMenu from "../components/CodemirrorEditor/rightClickMenu";
-import uploadImgDialog from "../components/CodemirrorEditor/uploadImgDialog";
-
-import {
-    css2json,
-    downloadMD,
-    formatDoc,
-    setFontSize,
-    saveEditorContent,
-    customCssWithTemplate,
-    checkImage,
-} from "../assets/scripts/util";
-
-import { toBase64 } from "../assets/scripts/util";
-import fileApi from "../api/file";
-
-require("codemirror/mode/javascript/javascript");
-import { mapState, mapMutations } from "vuex";
-export default {
-    data() {
-        return {
-            showCssEditor: false,
-            aboutDialogVisible: false,
-            dialogUploadImgVisible: false,
-            dialogFormVisible: false,
-            isCoping: false,
-            isImgLoading: false,
-            backLight: false,
-            timeout: null,
-            changeTimer: null,
-            source: "",
-            mouseLeft: 0,
-            mouseTop: 0,
-        };
-    },
-    components: {
-        editorHeader,
-        aboutDialog,
-        insertFormDialog,
-        rightClickMenu,
-        uploadImgDialog,
-    },
-    computed: {
-        ...mapState({
-            wxRenderer: (state) => state.wxRenderer,
-            output: (state) => state.output,
-            editor: (state) => state.editor,
-            cssEditor: (state) => state.cssEditor,
-            currentSize: (state) => state.currentSize,
-            currentColor: (state) => state.currentColor,
-            nightMode: (state) => state.nightMode,
-            rightClickMenuVisible: (state) => state.rightClickMenuVisible,
-        }),
-    },
-    created() {
-        this.initEditorState();
-        this.$nextTick(() => {
-            this.initEditor();
-            this.initCssEditor();
-            this.onEditorRefresh();
-        });
-    },
-    methods: {
-        initEditor() {
-            this.initEditorEntity();
-            this.editor.on("change", (cm, e) => {
-                if (this.changeTimer) clearTimeout(this.changeTimer);
-                this.changeTimer = setTimeout(() => {
-                    this.onEditorRefresh();
-                    saveEditorContent(this.editor, "__editor_content");
-                }, 300);
-            });
-
-            // 粘贴上传图片并插入
-            this.editor.on("paste", (cm, e) => {
-                if (
-                    !(e.clipboardData && e.clipboardData.items) ||
-                    this.isImgLoading
-                ) {
-                    return;
-                }
-                for (
-                    let i = 0, len = e.clipboardData.items.length;
-                    i < len;
-                    ++i
-                ) {
-                    let item = e.clipboardData.items[i];
-                    if (item.kind === "file") {
-                        // 校验图床参数
-                        const pasteFile = item.getAsFile();
-                        const isValid = this.beforeUpload(pasteFile);
-                        if (!isValid) {
-                            continue;
-                        }
-                        this.uploadImage(pasteFile);
-                    }
-                }
-            });
-
-            this.editor.on("mousedown", () => {
-                this.$store.commit("setRightClickMenuVisible", false);
-            });
-            this.editor.on("blur", () => {
-                //!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
-                this.$store.commit("setRightClickMenuVisible", false);
-            });
-            this.editor.on("scroll", () => {
-                this.$store.commit("setRightClickMenuVisible", false);
-            });
-        },
-        initCssEditor() {
-            this.initCssEditorEntity();
-            // 自动提示
-            this.cssEditor.on("keyup", (cm, e) => {
-                if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
-                    cm.showHint(e);
-                }
-            });
-            this.cssEditor.on("update", (instance) => {
-                this.cssChanged();
-                saveEditorContent(this.cssEditor, "__css_content");
-            });
-        },
-        cssChanged() {
-            let json = css2json(this.cssEditor.getValue(0));
-            let theme = setFontSize(this.currentSize.replace("px", ""));
-
-            theme = customCssWithTemplate(json, this.currentColor, theme);
-            this.setWxRendererOptions({
-                theme: theme,
-            });
-            this.onEditorRefresh();
-        },
-        beforeUpload(file) {
-            // validate image
-            const checkResult = checkImage(file);
-            if (!checkResult.ok) {
-                this.$message.error(checkResult.msg);
-                return false;
-            }
-
-            // check image host
-            let imgHost = localStorage.getItem("imgHost");
-            imgHost = imgHost ? imgHost : "default";
-            localStorage.setItem("imgHost", imgHost);
-
-            const config = localStorage.getItem(`${imgHost}Config`);
-            const isValidHost = imgHost == "default" || config;
-            if (!isValidHost) {
-                this.$message.error(`请先配置 ${imgHost} 图床参数`);
-                return false;
-            }
-            return true;
-        },
-        uploadImage(file) {
-            this.isImgLoading = true;
-            toBase64(file)
-                .then((base64Content) => {
-                    fileApi
-                        .fileUpload(base64Content, file)
-                        .then((url) => {
-                            this.uploaded(url);
-                        })
-                        .catch((err) => {
-                            this.$message.error(err.message);
-                        });
-                })
-                .catch((err) => {
-                    this.$message.error(err.message);
-                });
-            this.isImgLoading = false;
-        },
-        // 图片上传结束
-        uploaded(response) {
-            if (!response) {
-                this.$message.error("上传图片未知异常");
-                return;
-            }
-            this.dialogUploadImgVisible = false;
-            // 上传成功，获取光标
-            const cursor = this.editor.getCursor();
-            const imageUrl = response;
-            const markdownImage = `![](${imageUrl})`;
-            // 将 Markdown 形式的 URL 插入编辑框光标所在位置
-            this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
-            this.$message.success("图片上传成功");
-            this.onEditorRefresh();
-        },
-        // 左右滚动
-        leftAndRightScroll() {
-            const scrollCB = (text) => {
-                let source, target;
-
-                clearTimeout(this.timeout);
-                if (text === "preview") {
-                    source = this.$refs.preview.$el;
-                    target = document.getElementsByClassName(
-                        "CodeMirror-scroll"
-                    )[0];
-                    this.editor.off("scroll", editorScrollCB);
-                    this.timeout = setTimeout(() => {
-                        this.editor.on("scroll", editorScrollCB);
-                    }, 300);
-                } else if (text === "editor") {
-                    source = document.getElementsByClassName(
-                        "CodeMirror-scroll"
-                    )[0];
-                    target = this.$refs.preview.$el;
-                    target.removeEventListener(
-                        "scroll",
-                        previewScrollCB,
-                        false
-                    );
-                    this.timeout = setTimeout(() => {
-                        target.addEventListener(
-                            "scroll",
-                            previewScrollCB,
-                            false
-                        );
-                    }, 300);
-                }
-
-                let percentage =
-                    source.scrollTop /
-                    (source.scrollHeight - source.offsetHeight);
-                let height =
-                    percentage * (target.scrollHeight - target.offsetHeight);
-
-                target.scrollTo(0, height);
-            };
-            const editorScrollCB = () => {
-                scrollCB("editor");
-            };
-            const previewScrollCB = () => {
-                scrollCB("preview");
-            };
-
-            this.$refs.preview.$el.addEventListener(
-                "scroll",
-                previewScrollCB,
-                false
-            );
-            this.editor.on("scroll", editorScrollCB);
-        },
-        // 更新编辑器
-        onEditorRefresh() {
-            this.editorRefresh();
-            setTimeout(() => PR.prettyPrint(), 0);
-        },
-        // 复制结束
-        endCopy() {
-            this.backLight = false;
-            setTimeout(() => {
-                this.isCoping = false;
-            }, 800);
-        },
-        // 下载编辑器内容到本地
-        downloadEditorContent() {
-            downloadMD(this.editor.getValue(0));
-        },
-        // 格式化文档
-        formatContent() {
-            const doc = formatDoc(this.editor.getValue(0));
-            localStorage.setItem("__editor_content", doc);
-            this.editor.setValue(doc);
-        },
-        // 右键菜单
-        openMenu(e) {
-            const menuMinWidth = 105;
-            const offsetLeft = this.$el.getBoundingClientRect().left;
-            const offsetWidth = this.$el.offsetWidth;
-            const maxLeft = offsetWidth - menuMinWidth;
-            const left = e.clientX - offsetLeft;
-            this.mouseLeft = Math.min(maxLeft, left);
-            this.mouseTop = e.clientY + 10;
-            this.$store.commit("setRightClickMenuVisible", true);
-        },
-        closeRightClickMenu() {
-            this.$store.commit("setRightClickMenuVisible", false);
-        },
-        onMenuEvent(type, info = {}) {
-            switch (type) {
-                case "pageReset":
-                    this.$refs.header.showResetConfirm = true;
-                    break;
-                case "insertPic":
-                    this.dialogUploadImgVisible = true;
-                    break;
-                case "download":
-                    this.downloadEditorContent();
-                    break;
-                case "insertTable":
-                    this.dialogFormVisible = true;
-                    break;
-                case "formatMarkdown":
-                    this.formatContent();
-                    break;
-                default:
-                    break;
-            }
-        },
-        ...mapMutations([
-            "initEditorState",
-            "initEditorEntity",
-            "setWxRendererOptions",
-            "editorRefresh",
-            "initCssEditorEntity",
-        ]),
-    },
-    mounted() {
-        setTimeout(() => {
-            this.leftAndRightScroll();
-            PR.prettyPrint();
-        }, 300);
-    },
-};
-</script>
-<style lang="less" scoped>
-.main-body {
-    padding-top: 12px;
-    overflow: hidden;
-}
-.el-main {
-    transition: all 0.3s;
-    padding: 0;
-    margin: 20px;
-    margin-top: 0;
-}
-.container {
-    transition: all 0.3s;
-}
-.preview {
-    transition: background 0s;
-    transition-delay: 0.2s;
-}
-.preview-wrapper_night {
-    overflow-y: inherit;
-    position: relative;
-    left: -3px;
-    .preview {
-        background-color: #fff;
-    }
-}
-#output-wrapper {
-    position: relative;
-}
-.loading-mask {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 376px;
-    height: 101%;
-    padding-top: 1px;
-    font-size: 15px;
-    color: gray;
-    background-color: #1e1e1e;
-    .loading__img {
-        position: absolute;
-        left: 50%;
-        top: 330px;
-        width: 50px;
-        height: 50px;
-        transform: translate(-50%, -50%);
-        background: url("../assets/images/favicon.png") no-repeat;
-        background-size: cover;
-    }
-    span {
-        position: absolute;
-        left: 50%;
-        top: 390px;
-        transform: translate(-50%, -50%);
-    }
-}
-.bounceInRight {
-    animation-name: bounceInRight;
-    animation-duration: 1s;
-    animation-fill-mode: both;
-}
-@keyframes bounceInRight {
-    0%,
-    60%,
-    75%,
-    90%,
-    100% {
-        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-    0% {
-        opacity: 0;
-        transform: translate3d(3000px, 0, 0);
-    }
-    60% {
-        opacity: 1;
-        transform: translate3d(-25px, 0, 0);
-    }
-    75% {
-        transform: translate3d(10px, 0, 0);
-    }
-    90% {
-        transform: translate3d(-5px, 0, 0);
-    }
-    100% {
-        transform: none;
-    }
-}
-</style>
-<style lang="less">
-@import url("../assets/less/app.less");
-@import url("../assets/less/style-mirror.css");
-@import url("../assets/less/github-v2.min.css");
-</style>

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "types": [
+      "@dcloudio/types",
+      "miniprogram-api-typings",
+      "mini-types"
+    ]
+  }
+}

vue.config.js

@@ -1,4 +1,20 @@
-module.exports = {
+const fs = require("fs");
-    outputDir: "dist",
+function writeManifestJson() {
-    publicPath: process.env.NETLIFY ? "/" : "/md/",
+  fs.readFile("./src/manifest.json", function (err, data) {
-};
+    if (err) {
+      return console.error(err);
+    }
+    const strData = data.toString();
+    const manifest = JSON.parse(strData);
+
+    manifest.h5.publicPath = process.env.NETLIFY ? "/" : "/md/";
+    const result = JSON.stringify(manifest, null, 4);
+
+    fs.writeFile("./src/manifest.json", result, function (err) {
+      if (err) {
+        console.error(err);
+      }
+    });
+  });
+}
+writeManifestJson();