fix

src/App.vue

@@ -216,7 +216,7 @@ export default {
           originalText,
           selectionInfo,
           "\n![img](",
-          `${url} '${name}')\n`
+          `${url} '=600 #left')\n`
         );
         _this.text = newText;
         _this.$refs.mdUploadFile.value = "";

src/assets/style/iconfont.less

@@ -122,3 +122,18 @@
 .icon-shipin:before {
   content: "\e63c";
 }
+.icon-biaoti:before {
+  content: "\e78a";
+}
+
+.icon-sijibiaoti:before {
+  content: "\e603";
+}
+
+.icon-wujibiaoti:before {
+  content: "\e675";
+}
+
+.icon-liujibiaoti:before {
+  content: "\e676";
+}

src/assets/style/markdown.less

@@ -15,7 +15,7 @@
   }
   img {
     max-width: 100%;
-    height: auto;
+    // height: auto;
     &.right {
       border: 1px solid #ccc;
       float: right;

src/components/content/components/help-doc.vue

@@ -68,7 +68,22 @@ export default {
         },
         {
           title: "图片",
-          doc: '![alt](url "title")',
+          doc: "![alt](url)",
+          icon: "tupian"
+        },
+        {
+          title: "图片大小",
+          doc: '![alt](url "=300x200")',
+          icon: "tupian"
+        },
+        {
+          title: "图片位置",
+          doc: '![alt](url "#left")',
+          icon: "tupian"
+        },
+        {
+          title: "图片名称",
+          doc: '![alt](url "%title")',
           icon: "tupian"
         },
         {

src/components/content/mixins/render-mixins.js

@@ -77,19 +77,41 @@ export default {
                   class="video-js"
                   controls
                   src="${href}"
-                   />`;
+                   ></video>`;
           }
           // ![img](...)渲染图片
           let out = '<img src="' + href + '" alt="' + text + '"';
           if (title) {
-            out += ' title="' + title + '"';
+            const reg_title = /(\%([\u4E00-\u9FA5\w.]+)\s??)/;
+            const reg_align = /(\#([a-zA-Z]+)\s??)/;
+            const reg_width = /(\=(\d+)\*?\s??)/;
+            const reg_height = /([\*|x](\d+)\s??)/;
+
+            if (reg_title.exec(title)) {
+              var t = reg_title.exec(title)[2];
+              out += ' title="' + t + '"';
+            }
+
+            if (reg_align.exec(title)) {
+              var a = reg_align.exec(title)[2];
+              if (a === "center") {
+                out += 'style="display:block;margin: 0 auto;"';
+              }
+              out += ' align="' + a + '"';
+            }
+            if (reg_width.exec(title)) {
+              var w = reg_width.exec(title)[2];
+              out += ' width="' + w + 'px"';
+            }
+            if (reg_height.exec(title)) {
+              var h = reg_height.exec(title)[2];
+              out += ' height="' + h + 'px"';
+            }
           }
           out += "/>";
           return out;
         },
         link(href, title, text) {
-          console.log(href, title, text);
-
           if (href === null) {
             return text;
           }

src/components/header/components/headline-select.vue

+<template>
+  <div class="headline_select_container">
+    <ul>
+      <li
+        @click="$emit('select', index)"
+        v-for="(item, index) in list"
+        :key="index"
+      >
+        <span :class="['icon iconfont', `icon-${item.icon}`]"></span>
+        <span>{{ item.title }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {
+          title: "一级标题",
+          icon: "yijibiaoti"
+        },
+        {
+          title: "二级标题",
+          icon: "erjibiaoti"
+        },
+        {
+          title: "三级标题",
+          icon: "sanjibiaoti"
+        },
+        {
+          title: "四级标题",
+          icon: "sijibiaoti"
+        },
+        // {
+        //   title: "五级标题",
+        //   icon: "wujibiaoti"
+        // },
+        // {
+        //   title: "六级标题",
+        //   icon: "liujibiaoti"
+        // }
+      ]
+    };
+  }
+};
+</script>
+<style lang="less" scoped>
+.headline_select_container {
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 18px;
+    pointer-events: none;
+  }
+}
+ul {
+  max-height: 150px;
+  overflow-y: hidden;
+  margin-top: 2px;
+  margin-bottom: 4px;
+  border-top: 1px solid #e1e1e1;
+  padding-top: 6px;
+  box-sizing: border-box;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 1em;
+    background-color: rgba(50, 50, 50, 0.3);
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 1em;
+    background-color: rgba(50, 50, 50, 0);
+  }
+  li {
+    cursor: pointer;
+    height: 24px;
+    line-height: 24px;
+    .iconfont {
+      display: inline-block;
+      vertical-align: bottom;
+    }
+    &:hover {
+      color: var(--md-editor-border-color-active);
+    }
+  }
+}
+</style>

src/components/header/components/tool-button.vue

@@ -10,6 +10,13 @@
   >
     <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
   </div>
+  <div
+    v-else-if="info.name === 'headline'"
+    v-tip.bottom="headlineOptions"
+    class="tool_button"
+  >
+    <span :class="['icon iconfont', `icon-${info.icon}`]"></span>
+  </div>
   <div
     v-else-if="info.name === 'table'"
     @click="handleTool(info.name, info.startStr, info.endStr)"
@@ -42,8 +49,9 @@ import codeSelect from "./code-select";
 import videoSelect from "./video-select";
 import tableSelect from "./table-select";
 import markdownDoc from "./markdown-doc";
+import headlineSelect from "./headline-select";
 export default {
-  components: { codeSelect, tableSelect, videoSelect },
+  components: { codeSelect, tableSelect, videoSelect, headlineSelect },
   props: {
     info: {
       type: Object,
@@ -138,6 +146,24 @@ export default {
         theme: this.darkMode ? "dark" : "light"
       };
     },
+    headlineOptions() {
+      return {
+        content: this.info.tip,
+        customComponent: headlineSelect,
+        customClass: "headlineSelectDialog",
+        width: 110,
+        customListeners: {
+          select: val => {
+            this.closeTips();
+            const lang = "#".repeat(val + 1);
+            this.handleTool("code", "\n" + lang + " ", "\n");
+          }
+        },
+        zIndex: parseInt(this.zIndex) + 1,
+        theme: this.darkMode ? "dark" : "light"
+      };
+    },
+
     tableOptions() {
       return {
         content: this.info.tip,

src/components/header/md-header.vue

@@ -163,6 +163,13 @@ export default {
         tip: "全屏模式"
       },
       toolButtonList: [
+        {
+          name: "headline",
+          icon: "biaoti",
+          tip: "添加标题",
+          startStr: "\n",
+          endStr: "\n"
+        },
         {
           name: "bold",
           icon: "bold",