feat:添加深夜模式

7274a5e1 · 璃白. · 02f55966 · 7274a5e1 · 7274a5e1 · 7274a5e1
11 changed file
--- a/dist/index.html
+++ b/dist/index.html
@@ -5,7 +5,12 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
-    <style></style>
+    <style>
+      .md_container {
+        width: 600px !important;
+        margin: 40px auto;
+      }
+    </style>
  </head>
  <body>
    <div id="app"></div>
@@ -13,8 +18,9 @@
    <script>
      new MdEditor({
        el: "#app", // required
-        value: "",
+        value: "34567567567",
        themeOptions: {
+          dark: true,
          borderColor: "#dbdbdb",
          borderColorActive: "#409eff",
          textColor: "#303030",
@@ -30,14 +36,23 @@
          ol: true,
          task: true,
          table: true,
-          fullscreen: true
+          fullScreen: true
        },
        canPreview: true,
        canAttachFile: true,
        placeholder: "请输入内容",
+        onFocus: function(res) {
+          console.log(res);
+        },
+        onBlur: function(res) {
+          console.log(res);
+        },
        onChange: function(res) {
          console.log(res);
        },
+        onSubmit: function(res) {
+          console.log(res);
+        },
        onUpload: function(file, callback) {
          new Promise((res, rej) => {
            setTimeout(() => {

--- a/dist/markdown-editor.js
+++ b/dist/markdown-editor.js
--- a/package.json
+++ b/package.json
 {
  "name": "markdown-editor",
  "description": " A open source markdown editor of csdn codechina team contributed",
-  "version": "0.1.1",
+  "version": "0.3.1",
  "publisher": "guoweijia",
  "scripts": {
    "start": "webpack serve --mode=development",

--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
      :toolsOptions="toolsOptions"
      :fullScreen.sync="fullScreen"
    />
-  <markdownPreview :text="text" :html.sync="html" v-show="showPreview" />
+    <markdownPreview :text="text" :html.sync="html" v-show="showPreview" />
    <markdown-editor
      :selectionInfo.sync="selectionInfo"
      :text.sync="text"
@@ -17,6 +17,7 @@
      :placeholder="placeholder"
      :isFocus.sync="isFocus"
      :fullScreen.sync="fullScreen"
+      @submit="submit"
      v-show="!showPreview"
    />
    <markdown-footer
@@ -88,6 +89,19 @@ export default {
        });
      }
    },
+    isFocus: {
+      handler: function(val) {
+        const value = {
+          text: this.text,
+          html: this.html
+        };
+        if (val) {
+          this.$emit("focus", value);
+        } else {
+          this.$emit("blur", value);
+        }
+      }
+    },
    value: {
      immediate: true,
      handler: function(val) {
@@ -117,12 +131,21 @@ export default {
        this.fileList = [];
      }
    }
+  },
+  methods: {
+    submit() {
+      this.$emit("submit", {
+        text: this.text,
+        html: this.html
+      });
+    }
  }
 };
 </script>
 <style lang="less" scoped>
 .md_container {
  width: 100%;
+  background: var(--md-editor-frame-bg-color);
  // margin: 200px auto;
  border: 1px solid var(--md-editor-border-color);
  border-radius: 4px;

--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
@@ -40,11 +40,45 @@ export function formatText(text, selectionInfo, startStr = "", endStr = "") {

 // 初始化样式
 export function initStyle({
+  dark,
  borderColor,
  borderColorActive,
  textColor,
-  textColorActive
+  textColorActive,
+  frameBgColor,
+  contentBgColor,
+  codeBgColor
 }) {
+  // 夜晚模式
+  if (dark) {
+    borderColor = "#b2b2b2";
+    borderColorActive = "#fff";
+    textColor = "#fff";
+    textColorActive = "#fff";
+    frameBgColor = "#343434";
+    codeBgColor = "#484848";
+    contentBgColor = "#484848";
+  }
+  if (frameBgColor) {
+    document.documentElement.style.setProperty(
+      "--md-editor-frame-bg-color",
+      frameBgColor
+    );
+  }
+  if (contentBgColor) {
+    document.documentElement.style.setProperty(
+      "--md-editor-content-bg-color",
+      contentBgColor
+  );
+  }
+
+  if (codeBgColor) {
+    document.documentElement.style.setProperty(
+      "--md-editor-code-bg-color",
+      codeBgColor
+    );
+  }
+
  if (borderColor) {
    document.documentElement.style.setProperty(
      "--md-editor-border-color",

--- a/src/assets/style/markdown.less
+++ b/src/assets/style/markdown.less
@@ -106,7 +106,7 @@
  }
  p {
    font-size: 18px;
-    color: #4d4d4d;
+    color: var(--md-editor-text-color-active);
    font-weight: 400;
    line-height: 26px !important;
    margin: 0 0 16px;
@@ -244,14 +244,14 @@
        }
      }
      &:not(.hljs) {
-        background-color: #f3f4f5;
+        background-color: var(--md-editor-code-bg-color);
      }
    }
  }
  code {
    border-radius: 4px;
    display: inline-block;
-    background-color: #f3f4f5;
+    background-color: var(--md-editor-code-bg-color);
    padding: 2px 6px;
    font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB,
      Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, SimHei, SimSun;

--- a/src/assets/style/variable.less
+++ b/src/assets/style/variable.less
@@ -3,4 +3,7 @@
  --md-editor-border-color-active: #409eff;
  --md-editor-text-color: #303030;
  --md-editor-text-color-active: #000;
+  --md-editor-frame-bg-color: #fff;
+  --md-editor-content-bg-color: #fff;
+  --md-editor-code-bg-color: #f3f4f5;
 }
--- a/src/components/content/md-preview.vue
+++ b/src/components/content/md-preview.vue
@@ -29,7 +29,7 @@ export default {
        }
      });
      const str = val + "";
-      if (!str.trim()) return;
+      // if (!str.trim()) return;
      const html = marked(str);
      this.$emit("update:html", html);
    }

--- a/src/components/content/md-textarea.vue
+++ b/src/components/content/md-textarea.vue
 <template>
-  <div :class="['md_textarea', { fullScreen }]">
+  <div :class="['md_textarea', { fullScreen, isFocus }]">
    <textarea
      :id="id"
      @change="$emit('update:text', textContent)"
      @focus="setFocus(true)"
      @blur="setFocus(false)"
      @paste="pasteFile"
+      @keydown.meta.enter.exact="submit"
+      @keydown.ctrl.enter.exact="submit"
      v-model="textContent"
      :placeholder="placeholder"
      rows="10"
@@ -69,6 +71,9 @@ export default {
  },

  methods: {
+    submit() {
+      this.$emit("submit");
+    },
    setFocus(val) {
      this.$emit("update:isFocus", val);
    },
@@ -104,7 +109,16 @@ export default {
 .md_textarea {
  position: relative;
  padding: 10px 0;
-  background: #fff;
+  background: var(--md-editor-content-bg-color);
+  border-left: 1px solid var(--md-editor-border-color);
+  border-right: 1px solid var(--md-editor-border-color);
+  transition: border 0.3s;
+  padding: 14px;
+  box-sizing: border-box;
+  &.isFocus {
+    border-left: 1px solid var(--md-editor-border-color-active);
+    border-right: 1px solid var(--md-editor-border-color-active);
+  }
  &.fullScreen {
    position: fixed;
    width: 100vw;
@@ -124,6 +138,7 @@ export default {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
+    background: var(--md-editor-content-bg-color);
    color: var(--md-editor-text-color);
    resize: none;
    font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",

--- a/src/components/footer/md-footer.vue
+++ b/src/components/footer/md-footer.vue
 <template>
  <div :class="['md_footer', { active: isFocus }]">
    <div class="doc"></div>
-    <upload-files @changeFileList="$emit('update:fileList', $event)" :fileList="fileList" v-if="canAttachFile" />
+    <upload-files
+      @changeFileList="$emit('update:fileList', $event)"
+      :fileList="fileList"
+      v-if="canAttachFile"
+    />
  </div>
 </template>
 <script>
@@ -9,19 +13,19 @@ import uploadFiles from "./upload-files";
 export default {
  components: { uploadFiles },
  props: {
-     isFocus: {
+    isFocus: {
      type: Boolean,
      default: false
    },
-     canAttachFile: {
+    canAttachFile: {
      type: Boolean,
      default: false
    },
    fileList: {
      type: Array,
-      default: ()=>[]
+      default: () => []
    }
-  },
+  }
 };
 </script>
 <style lang="less" scoped>

--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,9 @@ function initMdEditor(obj) {
    el,
    onChange,
    onUpload,
+    onFocus,
+    onBlur,
+    onSubmit,
    placeholder,
    value,
    canPreview,
@@ -29,6 +32,15 @@ function initMdEditor(obj) {
          change(val) {
            onChange(val);
          },
+          focus(val) {
+            onFocus(val);
+          },
+          blur(val) {
+            onBlur(val);
+          },
+          submit(val) {
+            onSubmit(val);
+          },
          upload({ val, callback }) {
            onUpload(val, function(res) {
              callback(res);