发布1.4.0版本

.editorconfig

@@ -1,9 +1,16 @@
+# http://editorconfig.org
 root = true
 
 [*]
-charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
-insert_final_newline = true
+charset = utf-8
 trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.eslintignore

@@ -0,0 +1,4 @@
+# Created by .ignore support plugin (hsz.mobi)
+src/markdown/font/*.js
+src/doc.js
+src/markdown/js/hljs.js

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "rules": {},
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:vue/essential"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "plugins": [
+    "vue"
+  ]
+}

dist/iconfont.svg

@@ -41,6 +41,9 @@ Created by iconfont
     <glyph glyph-name="download" unicode="&#59054;" d="M391.38165448 725.93326272l240.95928598 0 0-64.1844201-240.95928598 0 0 64.1844201ZM391.38165448 788.7264396l240.95928598 0 0-33.48092532-240.95928598 0 0 33.48092532ZM861.69471958 252.86553432999995L833.07556085 93.04951446999996 190.59307034 93.04951446999996 162.00173642 252.86553432999995 90.5339419 252.86553432999995 90.5339419-1.8628535200000442 933.85644986-1.8628535200000442 933.85644986 252.86553432999995ZM843.99050449 537.55120495L632.34094046 537.55120495 632.34094046 629.63133654 391.38165448 629.63133654 391.38165448 536.8294444 182.40918149 536.8294444 511.15260556 176.78976975Z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="close" unicode="&#58960;" d="M822.00345 119.17756599999996l0.022513 0.022513L246.50423 694.6829250000001c-5.78782 5.791913-13.785981 9.374508-22.621207 9.374508-17.662265 0-31.980365-14.3181-31.980365-31.980365 0-8.834202 3.582595-16.832364 9.373485-22.620184L776.11226 74.66067599999997c5.838985-6.277984 14.166651-10.209526 23.416316-10.209526 17.662265 0 31.980365 14.3181 31.980365 31.980365C831.508941 105.33223299999997 827.871087 113.37951299999997 822.00345 119.17756599999996zM776.783549 694.551942l-0.022513 0.022513L201.278189 119.05272200000002c-5.791913-5.78782-9.374508-13.785981-9.374508-22.621207 0-17.662265 14.3181-31.980365 31.980365-31.980365 8.834202 0 16.832364 3.582595 22.620184 9.373485l574.797231 574.836117c6.277984 5.838985 10.209526 14.166651 10.209526 23.416316 0 17.662265-14.3181 31.980365-31.980365 31.980365C790.628882 704.057433 782.580578 700.41958 776.783549 694.551942z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="group" unicode="&#58951;" d="M34.45656213 145.22855360000005l397.95204694 0L432.408608 622.7725376000001 34.45656213 622.7725376000001 34.45656213 145.22855360000005zM87.5167616 569.71233813l291.83055467 0 0-371.4224928-291.83055467 0L87.5167616 569.71233813zM591.58920853 622.7725376000001l0-477.543984 397.95313814 0L989.54234667 622.7725376000001 591.58920853 622.7725376000001zM936.4832384 198.28875413000003l-291.83055467 0L644.65268373 569.71233813l291.83055467 0L936.4832384 198.28875413000003zM565.0585632 808.48378347c0 29.302032-23.73088 53.06020053-53.05910827 53.06020053-29.27583573 0-53.06020053-23.75816853-53.06020053-53.06020053 0-19.63110613 10.68167893-36.75934187 26.53064533-45.93689707L485.46989973 5.454204799999957c-15.8489664-9.17755627-26.53064533-26.3068832-26.53064533-45.93689707 0-29.3031232 23.7843648-53.06020053 53.06020053-53.06020053 29.32822827 0 53.05910827 23.75816853 53.05910827 53.06020053 0 19.63983787-10.66748907 36.77571413-26.53064533 45.95108694L538.5279168 762.5326965300001C554.39107307 771.70697813 565.0585632 788.8428544 565.0585632 808.48378347z"  horiz-adv-x="1024" />
 
     
@@ -77,6 +80,9 @@ Created by iconfont
     <glyph glyph-name="checked" unicode="&#58896;" d="M883.37066667 806.34346667H177.03786667c-43.69066667 0-80.0992-36.4096-80.0992-80.10026667V12.629333330000009c0-43.69066667 36.40853333-80.0992 80.0992-80.0992h713.61493333c43.69066667 0 80.0992 36.40853333 80.0992 80.0992V726.2432c-7.28213333 43.69066667-43.69066667 80.10026667-87.38133333 80.10026667z m29.12746666-786.432c0-14.56426667-14.56426667-29.12746667-29.12746666-29.12746667H177.03786667c-14.5632 0-29.1264 14.5632-29.1264 29.12746667V726.2432c0 14.56426667 14.5632 29.12746667 29.1264 29.12746667h713.61493333c14.5632 0 29.1264-14.5632 29.1264-29.12746667v-706.33173333h-7.28106667zM468.30933333 143.70133333c-14.5632 0-29.12746667 7.28213333-36.40853333 14.5632l-174.76266667 174.76266667c-21.84533333 21.84533333-21.84533333 58.25493333 0 80.10026667 21.84533333 21.84533333 58.25386667 21.84533333 80.0992 0l167.48053334-167.4816c21.84533333-21.84533333 21.84533333-58.25386667 0-80.0992-7.28106667-14.5632-21.84533333-21.84533333-36.40853334-21.84533334zM468.30933333 143.70133333c-14.5632 0-29.12746667 7.28213333-36.40853333 14.5632-29.12746667 29.12746667-29.12746667 58.25493333 0 80.10026667L766.86186667 580.608c21.84533333 21.84533333 58.25493333 21.84533333 80.10026666 0 21.84533333-21.84533333 21.84533333-58.25386667 0-80.0992L504.71786667 158.26453332999995c-7.28106667-7.28106667-21.84533333-14.5632-36.40853334-14.5632z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="clear" unicode="&#58921;" d="M118.25 110.49999998999999h787.5v-56.25H118.25zM884.70019531 524.30664062L645.11035156 764.40624999a70.76953125 70.76953125 0 0 1-49.86914062 21.09375c-15.99609375 0-31.57910156-5.79199219-43.26855469-17.51660156L135.67871094 350.34472655c-24.609375-24.67089844-22.96582031-66.64746094 3.61230469-93.28710937L229.4140625 166.74999999h395.5078125l263.39941406 264.26953125c24.59179688 24.67089844 22.95703125 66.64746094-3.62109375 93.28710938zM601.55175781 222.99999999H252.72265625l-73.63476563 73.828125c-5.2734375 5.32617188-5.35253906 12.08496094-3.59472656 13.84277344L404.68554687 540.54003905l257.10644532-257.09765625z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="ul" unicode="&#58916;" d="M149.3 746.7c47.1 0 85.3-38.2 85.3-85.3 0-47.1-38.2-85.3-85.3-85.3S64 614.2 64 661.3c0 47.2 38.2 85.4 85.3 85.4zM149.3 469.3c47.1 0 85.3-38.2 85.3-85.3s-38.2-85.3-85.3-85.3S64 336.9 64 384s38.2 85.3 85.3 85.3zM149.3 192c47.1 0 85.3-38.2 85.3-85.3 0-47.1-38.2-85.3-85.3-85.3S64 59.5 64 106.70000000000005c0 47.1 38.2 85.3 85.3 85.3zM362.7 704h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7zM362.7 426.7h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7zM362.7 149.29999999999995h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7z"  horiz-adv-x="1024" />
 
     
@@ -92,6 +98,9 @@ Created by iconfont
     <glyph glyph-name="ol" unicode="&#59121;" d="M349.29890773 763.63588267h542.33697494a54.23369707 54.23369707 0 0 0 0-108.4673952h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.4673952z m0-325.4021856h542.33697494a54.23369707 54.23369707 0 0 0 0-108.46739414h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.46739414z m0-325.40218454h542.33697494a54.23369707 54.23369707 0 0 0 0-108.4673952h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.4673952zM97.1122144 760.3818602700001v25.48983786a167.03978773 167.03978773 0 0 1 24.9475008 0 35.25190293 35.25190293 0 0 1 18.43945707 10.30440214 33.08255573 33.08255573 0 0 1 7.59271786 13.55842453 31.45554453 31.45554453 0 0 1 0 7.59271787H182.801456v-189.27560427h-40.67527253V760.3818602700001z m0-420.3111552a108.4673952 108.4673952 0 0 0 37.96358827 40.6752736 279.8458784 279.8458784 0 0 1 33.6248928 26.57451093 39.59059947 39.59059947 0 0 1 11.93141333 27.65918613 30.3708704 30.3708704 0 0 1-6.50804373 20.06646827 23.86282667 23.86282667 0 0 1-19.5241312 8.13505387 23.3204896 23.3204896 0 0 1-26.03217494-12.4737504 63.45342613 63.45342613 0 0 1-4.33869546-23.3204896h-35.251904a92.7396224 92.7396224 0 0 0 8.677392 39.59059946 54.23369707 54.23369707 0 0 0 54.23369706 28.7438592 67.7921216 67.7921216 0 0 0 48.26799147-16.81244586 58.5723936 58.5723936 0 0 0 17.89712-44.471632 60.7417408 60.7417408 0 0 0-12.4737504-37.96358827 126.90685227 126.90685227 0 0 0-27.65918613-24.40516373l-15.18543467-10.8467392-19.5241312-14.64309867a42.8446208 42.8446208 0 0 1-8.677392-10.30440213h83.5198944v-33.08255574H86.80781227a90.02793813 90.02793813 0 0 0 8.67739093 37.4212512z m27.11684907-304.2510432a43.38695787 43.38695787 0 0 1 3.7963584-18.98179414 25.48983787 25.48983787 0 0 1 24.9475008-14.10076053 27.65918613 27.65918613 0 0 1 17.35478293 5.4233696 28.2015232 28.2015232 0 0 1 8.13505493 21.6934784 24.9475008 24.9475008 0 0 1-15.18543466 25.48983787 78.0965248 78.0965248 0 0 1-27.11684907 7.0503808v27.11684906a71.58848107 71.58848107 0 0 1 25.48983787 3.7963584 22.23581547 22.23581547 0 0 1 12.4737504 23.32049067 24.9475008 24.9475008 0 0 1-6.50804374 17.89712 23.3204896 23.3204896 0 0 1-17.89712 7.0503808 22.77815253 22.77815253 0 0 1-19.5241312-8.677392 35.79424 35.79424 0 0 1-5.96570666-22.77815253h-35.251904a94.90897067 94.90897067 0 0 0 4.8810336 27.116848 61.28407787 61.28407787 0 0 0 14.6430976 20.60880533 50.97967573 50.97967573 0 0 0 17.354784 10.30440213 76.4695136 76.4695136 0 0 0 24.9475008 2.71168534 66.70744747 66.70744747 0 0 0 44.47163093-14.1007616 47.18331627 47.18331627 0 0 0 16.81244693-37.96358827 42.30228373 42.30228373 0 0 0-10.3044032-28.7438592 34.16722987 34.16722987 0 0 0-13.01608746-9.76206613 27.11684907 27.11684907 0 0 0 14.64309866-8.67739094 47.18331627 47.18331627 0 0 0 14.64309867-36.33657706 61.28407787 61.28407787 0 0 0-16.81244587-42.84462187 64.53810027 64.53810027 0 0 0-49.89500266-18.43945707 60.7417408 60.7417408 0 0 0-54.23369707 26.574512 79.18119787 79.18119787 0 0 0-9.219728 36.87891414z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="save" unicode="&#58952;" d="M788.69067383 752.15185547h-26.03759766v0.65917969H261.42932128v-0.65917969h-26.03759764c-50.92163086 0-92.20275879-41.19873047-92.2027588-92.12036133v-552.72216797c0-50.92163086 41.28112793-92.12036133 92.2027588-92.12036133h553.29895019c50.92163086 0 92.20275879 41.28112793 92.20275879 92.12036133V660.03149414c0 50.8392334-41.36352539 92.12036133-92.20275879 92.12036133z m-467.93518067-58.58459473H703.16210938v-118.48754882c0-21.83532715-19.03381348-39.55078125-42.51708985-39.55078125H363.272583c-23.48327637 0-42.51708984 17.71545411-42.51708983 39.55078125V693.5672607500001z m501.47094727-575.46386719c0-24.38964844-19.85778809-44.24743653-44.32983399-44.24743652H246.02099609c-24.4720459 0-44.32983398 19.77539063-44.32983398 44.24743652V649.31982422c0 24.38964844 19.85778809 44.24743653 44.32983398 44.24743653h15.32592774V568.5703125c0-50.92163086 40.78674317-92.12036133 91.1315918-92.12036133h318.96057129c50.34484864 0 91.1315918 41.28112793 91.13159179 92.12036133V693.5672607500001h15.24353027c24.4720459 0 44.32983398-19.77539063 44.32983399-44.24743653v-531.21643067zM607.58105469 568.2407226600001c16.31469727 0 29.66308594 13.34838867 29.66308593 29.66308593v32.95898438c0 16.31469727-13.34838867 29.66308594-29.66308593 29.66308594s-29.66308594-13.34838867-29.66308594-29.66308594v-32.95898438c0-16.31469727 13.34838867-29.66308594 29.66308594-29.66308593z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-meditor",
   "description": "一款使用marked和highlight.js开发的一款markdown编辑器",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "author": "zhaoxuhui<1258835133@qq.com>",
   "license": "MIT",
   "main": "build/index.js",
@@ -13,7 +13,10 @@
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "build:npm": "cross-env NODE_ENV=npm webpack --progress --hide-modules"
+    "build:npm": "cross-env NODE_ENV=npm webpack --progress --hide-modules",
+    "analyzer": "cross-env analyzer=true NODE_ENV=npm  webpack --progress --hide-modules",
+    "lint": "eslint --ext .js src ",
+    "lint:fix": "eslint --fix  --ext  .js src"
   },
   "dependencies": {
     "highlight.js": "^9.12.0",
@@ -31,17 +34,23 @@
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",
     "babel-preset-stage-3": "^6.24.1",
+    "compression-webpack-plugin": "^1.1.11",
     "cross-env": "^5.2.0",
     "css-loader": "^0.28.11",
-    "compression-webpack-plugin": "^1.1.11",
+    "eslint": "^6.6.0",
+    "eslint-plugin-vue": "^5.2.3",
     "file-loader": "^1.1.4",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "vue-loader": "^13.0.5",
     "vue-template-compiler": "^2.4.4",
     "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-dev-server": "^2.9.1"
   },
   "readmeFilename": "README.md",
-  "files":["build","README.md"]
+  "files": [
+    "build",
+    "README.md"
+  ]
 }

src/App.vue

@@ -4,7 +4,13 @@
             <h1>vue-markdown编辑器组件</h1>
             <a target="_blank" href="https://github.com/zhaoxuhui1122/vue-markdown">使用文档</a>
             <div class="content">
-        <mark-down @on-paste-image="handlePasteImage" @on-save="save" :theme="theme" :initialValue="initialValue" :markedOptions="{baseUrl:'http://smalleyes.oss-cn-shanghai.aliyuncs.com/'}"></mark-down>
+                <mark-down
+                    @on-paste-image="handlePasteImage"
+                    @on-save="save"
+                    :theme="theme"
+                    v-model="value"
+                    @on-theme-change="onThemeChange"
+                    :markedOptions="{baseUrl:'http://smalleyes.oss-cn-shanghai.aliyuncs.com/'}"/>
             </div>
         </div>
     </div>
@@ -16,6 +22,7 @@
     // import MarkDown from 'vue-meditor';
 
     import doc from './doc';
+
     export default {
         name: "app",
         components: {
@@ -23,7 +30,7 @@
         },
         data() {
             return {
-        initialValue: "",
+                value: "",
                 theme: 'OneDark'
             };
         },
@@ -33,13 +40,21 @@
             },
             handlePasteImage(res) {
                 console.log(res);
+            },
+            onThemeChange(theme) {
+                console.log(theme)
             }
         },
         mounted() {
             setTimeout(() => {
-        this.initialValue = doc;
+                this.value = doc;
             }, 1000);
 
+        },
+        watch: {
+            value() {
+                console.log(this.value)
+            }
         }
     };
 
@@ -53,7 +68,7 @@
     }
 
     .container {
-    width: 1200px;
+        width: 80vw;
         margin: 0 auto;
 
         h1 {
@@ -79,7 +94,7 @@
         }
 
         .content {
-      border: 1px solid #ccc;
+            /*border: 1px solid #ccc;*/
         }
     }
 

src/doc.js

@@ -37,7 +37,7 @@ components:{
 ...
 
 <template>
-    <mark-down/>
+    <mark-down v-model="value"/>
 </template>
 \`\`\`
 
@@ -45,14 +45,16 @@ components:{
 
 名称 | 类型|说明|默认值
 ---|---|---|---
-initialValue|String|编辑器初始化内容
+value|Number、String|输入框内的值，支持数据双向绑定（1.4.0新增）|''
 width|Number|编辑器宽度|
 height|Number|编辑器高度，单位 px|600
 theme|String|代码块主题配置，共有四个值，分别为Light、Dark、OneDark、GitHub|Light
-autoSave|Boolean|是否自动保存|true
+autoSave|Boolean|是否自动保存|false
 interval|Number|自动保存频率，单位毫秒|10000
 toolbars|Object|工具栏配置，具体功能详见工具栏功能配置表
 exportFileName|String|导出文件的名称|未命名文件
+bordered|Boolean|是否存在边框（1.4.0新增）|true
+isPreview|Boolean|是否是预览模式，预览模式工具栏将不会显示，单纯的用作展示md文件（1.4.0新增）|false
 
 ### 5.events
 
@@ -60,6 +62,9 @@ exportFileName|String|导出文件的名称|未命名文件
 ---|---
 on-save|自动保存或者手动保存时触发，返回当前编辑器内原始输入内容和转以后的内容
 on-paste-image|粘贴图片，返回当前粘贴的file文件
+on-theme-change|切换主题时触发，返回当前主题名称
+on-copy|复制代码后触发|返回复制的内容
+
 ### 6.工具栏配置
 
 名称 | 说明 | 默认显示
@@ -83,20 +88,23 @@ image|image|是
 table |表格|是
 checked|已完成列表|是
 notChecked |未完成列表|是
-shift|预览|是
+preview|预览|是
+split|分屏模式切换|是
 print |打印|否
 theme|主题切换|是
 fullscreen |全屏|是
 exportmd|导出为*.md文件|是
 importmd|导入本地*.md文件|是
-
+save|保存按钮|否
+clear|清空内容|否
 ### 7.其他说明
 **关于保存时返回值**
 
 \`\`\`
-    value // 编辑器输入的原始内容
+    {
-    html // 右侧现实的问转义后的内容
+        value, // 编辑器输入的原始内容
-    theme // 保存时的主题名字
+        theme, // 保存时的主题名字
+    }
 \`\`\`
 **标题配置**
 
@@ -125,6 +133,13 @@ const config = {
 
 
 ### 更新日志
+**1.4.0**
+- 支持输入值双向数据绑定
+- 支持预览模式
+- 支持复制代码块
+- 工具栏增加增加清空内容、保存、分屏、预览功能
+
+
 **1.3.0**
 - 支持配置marked的markedOptions，感谢[dkvirus](https://github.com/dkvirus)提出的[issues#12](https://github.com/zhaoxuhui1122/vue-markdown/issues/12)和具体的解决办法
 
@@ -159,5 +174,4 @@ const config = {
 - 修复主题无法更新的问题
 - 修复文档初始化值无法动态切换的问题
 
-
 `

src/markdown/css/dark.less

@@ -7,7 +7,7 @@
 .Dark {
     pre {
         display: block;
-    padding: 20px !important;
+        padding: 15px 20px !important;
         border-radius: 4px;
         margin: 20px 0 !important;
         background: #1e1e1e;
@@ -15,12 +15,14 @@
         overflow-y: hidden !important;
         overflow-x: auto !important;
         font-family: Menlo, Consolas, "Courier New", Courier, FreeMono, monospace !important;
+
         * {
             line-height: 1.6 !important;
             font-size: 14px;
             font-family: Menlo, Consolas, "Courier New", Courier, FreeMono, monospace !important;
         }
     }
+
     code {
         padding: 0 !important;
         margin: 0 !important;
@@ -32,9 +34,11 @@
     .hljs-symbol {
         color: #659bd1;
     }
+
     .hljs-keyword {
         color: #bc89bd;
     }
+
     .hljs-link {
         color: #569CD6;
         text-decoration: underline;
@@ -127,6 +131,7 @@
         display: inline-block;
         width: 100%;
     }
+
     .hljs-comment {
         font-style: normal;
     }

src/markdown/css/gitHub.less

@@ -5,7 +5,7 @@
 // gitHub 风格
 .GitHub {
   pre {
-    padding: 20px 20px 30px !important;
+      padding:15px 20px!important;
       display: block;
     overflow-x: auto;
     color: #333;

src/markdown/css/light.less

@@ -12,11 +12,12 @@
         border: 0 !important;
         border-radius: 0 !important;
         background: #f7f8fb !important;
-    padding: 20px !important;
+        padding: 15px 20px !important;
         border-radius: 4px !important;
         overflow-y: hidden !important;
         overflow-x: auto !important;
         margin: 20px 0 !important;
+
         code {
             line-height: @line-height !important;
             font-family: Consolas !important;
@@ -25,9 +26,11 @@
             color: #444;
         }
     }
+
     * {
         -webkit-font-smoothing: antialiased;
     }
+
     .hljs {
         display: block;
         overflow-x: auto;
@@ -35,58 +38,75 @@
         padding: 15px;
         -webkit-text-size-adjust: none;
     }
+
     .hljs-doctype {
         color: #999;
     }
+
     .hljs-tag {
         color: #3e76f6;
     }
+
     .hljs-attribute {
         color: #e96900;
     }
+
     .hljs-value {
         color: #42b983;
     }
+
     .hljs-keyword {
         color: #e96900;
     }
+
     .hljs-string {
         color: #42b983;
     }
+
     .hljs-comment {
         color: #b3b3b3;
     }
+
     .hljs-operator .hljs-comment {
         color: #525252;
     }
+
     .hljs-regexp {
         color: #af7dff;
     }
+
     .hljs-built_in {
         color: #2db7f5;
     }
+
     .css .hljs-class {
         color: #e96900;
     }
+
     .css .hljs-number,
     .javascript .hljs-number {
         color: #fc1e70;
     }
+
     .css .hljs-attribute {
         color: #af7dff;
     }
+
     .css .hljs-important {
         color: red;
     }
+
     .actionscript .hljs-literal,
     .javascript .hljs-literal {
         color: #fc1e70;
     }
+
     pre {
         padding: 0;
         margin: 0;
         background: @background !important;
     }
+
     code {
         display: inline-block;
         background: #f7f7f7;
@@ -97,6 +117,7 @@
         color: #666;
         border: 1px solid #eee;
     }
+
     pre code {
         display: inline;
         margin: 0;
@@ -104,6 +125,7 @@
         border: none;
         background: transparent;
     }
+
     pre.bg code {
         background: #f7f7f7;
     }

src/markdown/css/one-dark.less

@@ -4,7 +4,7 @@
 */
 .OneDark {
   pre {
-    padding: 20px 20px 30px !important;
+    padding:15px 20px!important;
     display: block;
     color: #abb2bf;
     font-family: Menlo, Consolas, "Courier New", Courier, FreeMono, monospace;

src/markdown/font/iconfont.svg

@@ -41,6 +41,9 @@ Created by iconfont
     <glyph glyph-name="download" unicode="&#59054;" d="M391.38165448 725.93326272l240.95928598 0 0-64.1844201-240.95928598 0 0 64.1844201ZM391.38165448 788.7264396l240.95928598 0 0-33.48092532-240.95928598 0 0 33.48092532ZM861.69471958 252.86553432999995L833.07556085 93.04951446999996 190.59307034 93.04951446999996 162.00173642 252.86553432999995 90.5339419 252.86553432999995 90.5339419-1.8628535200000442 933.85644986-1.8628535200000442 933.85644986 252.86553432999995ZM843.99050449 537.55120495L632.34094046 537.55120495 632.34094046 629.63133654 391.38165448 629.63133654 391.38165448 536.8294444 182.40918149 536.8294444 511.15260556 176.78976975Z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="close" unicode="&#58960;" d="M822.00345 119.17756599999996l0.022513 0.022513L246.50423 694.6829250000001c-5.78782 5.791913-13.785981 9.374508-22.621207 9.374508-17.662265 0-31.980365-14.3181-31.980365-31.980365 0-8.834202 3.582595-16.832364 9.373485-22.620184L776.11226 74.66067599999997c5.838985-6.277984 14.166651-10.209526 23.416316-10.209526 17.662265 0 31.980365 14.3181 31.980365 31.980365C831.508941 105.33223299999997 827.871087 113.37951299999997 822.00345 119.17756599999996zM776.783549 694.551942l-0.022513 0.022513L201.278189 119.05272200000002c-5.791913-5.78782-9.374508-13.785981-9.374508-22.621207 0-17.662265 14.3181-31.980365 31.980365-31.980365 8.834202 0 16.832364 3.582595 22.620184 9.373485l574.797231 574.836117c6.277984 5.838985 10.209526 14.166651 10.209526 23.416316 0 17.662265-14.3181 31.980365-31.980365 31.980365C790.628882 704.057433 782.580578 700.41958 776.783549 694.551942z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="group" unicode="&#58951;" d="M34.45656213 145.22855360000005l397.95204694 0L432.408608 622.7725376000001 34.45656213 622.7725376000001 34.45656213 145.22855360000005zM87.5167616 569.71233813l291.83055467 0 0-371.4224928-291.83055467 0L87.5167616 569.71233813zM591.58920853 622.7725376000001l0-477.543984 397.95313814 0L989.54234667 622.7725376000001 591.58920853 622.7725376000001zM936.4832384 198.28875413000003l-291.83055467 0L644.65268373 569.71233813l291.83055467 0L936.4832384 198.28875413000003zM565.0585632 808.48378347c0 29.302032-23.73088 53.06020053-53.05910827 53.06020053-29.27583573 0-53.06020053-23.75816853-53.06020053-53.06020053 0-19.63110613 10.68167893-36.75934187 26.53064533-45.93689707L485.46989973 5.454204799999957c-15.8489664-9.17755627-26.53064533-26.3068832-26.53064533-45.93689707 0-29.3031232 23.7843648-53.06020053 53.06020053-53.06020053 29.32822827 0 53.05910827 23.75816853 53.05910827 53.06020053 0 19.63983787-10.66748907 36.77571413-26.53064533 45.95108694L538.5279168 762.5326965300001C554.39107307 771.70697813 565.0585632 788.8428544 565.0585632 808.48378347z"  horiz-adv-x="1024" />
 
     
@@ -77,6 +80,9 @@ Created by iconfont
     <glyph glyph-name="checked" unicode="&#58896;" d="M883.37066667 806.34346667H177.03786667c-43.69066667 0-80.0992-36.4096-80.0992-80.10026667V12.629333330000009c0-43.69066667 36.40853333-80.0992 80.0992-80.0992h713.61493333c43.69066667 0 80.0992 36.40853333 80.0992 80.0992V726.2432c-7.28213333 43.69066667-43.69066667 80.10026667-87.38133333 80.10026667z m29.12746666-786.432c0-14.56426667-14.56426667-29.12746667-29.12746666-29.12746667H177.03786667c-14.5632 0-29.1264 14.5632-29.1264 29.12746667V726.2432c0 14.56426667 14.5632 29.12746667 29.1264 29.12746667h713.61493333c14.5632 0 29.1264-14.5632 29.1264-29.12746667v-706.33173333h-7.28106667zM468.30933333 143.70133333c-14.5632 0-29.12746667 7.28213333-36.40853333 14.5632l-174.76266667 174.76266667c-21.84533333 21.84533333-21.84533333 58.25493333 0 80.10026667 21.84533333 21.84533333 58.25386667 21.84533333 80.0992 0l167.48053334-167.4816c21.84533333-21.84533333 21.84533333-58.25386667 0-80.0992-7.28106667-14.5632-21.84533333-21.84533333-36.40853334-21.84533334zM468.30933333 143.70133333c-14.5632 0-29.12746667 7.28213333-36.40853333 14.5632-29.12746667 29.12746667-29.12746667 58.25493333 0 80.10026667L766.86186667 580.608c21.84533333 21.84533333 58.25493333 21.84533333 80.10026666 0 21.84533333-21.84533333 21.84533333-58.25386667 0-80.0992L504.71786667 158.26453332999995c-7.28106667-7.28106667-21.84533333-14.5632-36.40853334-14.5632z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="clear" unicode="&#58921;" d="M118.25 110.49999998999999h787.5v-56.25H118.25zM884.70019531 524.30664062L645.11035156 764.40624999a70.76953125 70.76953125 0 0 1-49.86914062 21.09375c-15.99609375 0-31.57910156-5.79199219-43.26855469-17.51660156L135.67871094 350.34472655c-24.609375-24.67089844-22.96582031-66.64746094 3.61230469-93.28710937L229.4140625 166.74999999h395.5078125l263.39941406 264.26953125c24.59179688 24.67089844 22.95703125 66.64746094-3.62109375 93.28710938zM601.55175781 222.99999999H252.72265625l-73.63476563 73.828125c-5.2734375 5.32617188-5.35253906 12.08496094-3.59472656 13.84277344L404.68554687 540.54003905l257.10644532-257.09765625z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="ul" unicode="&#58916;" d="M149.3 746.7c47.1 0 85.3-38.2 85.3-85.3 0-47.1-38.2-85.3-85.3-85.3S64 614.2 64 661.3c0 47.2 38.2 85.4 85.3 85.4zM149.3 469.3c47.1 0 85.3-38.2 85.3-85.3s-38.2-85.3-85.3-85.3S64 336.9 64 384s38.2 85.3 85.3 85.3zM149.3 192c47.1 0 85.3-38.2 85.3-85.3 0-47.1-38.2-85.3-85.3-85.3S64 59.5 64 106.70000000000005c0 47.1 38.2 85.3 85.3 85.3zM362.7 704h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7zM362.7 426.7h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7zM362.7 149.29999999999995h554.7c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7H362.7c-23.6 0-42.7 19.1-42.7 42.7s19.1 42.7 42.7 42.7z"  horiz-adv-x="1024" />
 
     
@@ -92,6 +98,9 @@ Created by iconfont
     <glyph glyph-name="ol" unicode="&#59121;" d="M349.29890773 763.63588267h542.33697494a54.23369707 54.23369707 0 0 0 0-108.4673952h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.4673952z m0-325.4021856h542.33697494a54.23369707 54.23369707 0 0 0 0-108.46739414h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.46739414z m0-325.40218454h542.33697494a54.23369707 54.23369707 0 0 0 0-108.4673952h-542.33697494a54.23369707 54.23369707 0 0 0 0 108.4673952zM97.1122144 760.3818602700001v25.48983786a167.03978773 167.03978773 0 0 1 24.9475008 0 35.25190293 35.25190293 0 0 1 18.43945707 10.30440214 33.08255573 33.08255573 0 0 1 7.59271786 13.55842453 31.45554453 31.45554453 0 0 1 0 7.59271787H182.801456v-189.27560427h-40.67527253V760.3818602700001z m0-420.3111552a108.4673952 108.4673952 0 0 0 37.96358827 40.6752736 279.8458784 279.8458784 0 0 1 33.6248928 26.57451093 39.59059947 39.59059947 0 0 1 11.93141333 27.65918613 30.3708704 30.3708704 0 0 1-6.50804373 20.06646827 23.86282667 23.86282667 0 0 1-19.5241312 8.13505387 23.3204896 23.3204896 0 0 1-26.03217494-12.4737504 63.45342613 63.45342613 0 0 1-4.33869546-23.3204896h-35.251904a92.7396224 92.7396224 0 0 0 8.677392 39.59059946 54.23369707 54.23369707 0 0 0 54.23369706 28.7438592 67.7921216 67.7921216 0 0 0 48.26799147-16.81244586 58.5723936 58.5723936 0 0 0 17.89712-44.471632 60.7417408 60.7417408 0 0 0-12.4737504-37.96358827 126.90685227 126.90685227 0 0 0-27.65918613-24.40516373l-15.18543467-10.8467392-19.5241312-14.64309867a42.8446208 42.8446208 0 0 1-8.677392-10.30440213h83.5198944v-33.08255574H86.80781227a90.02793813 90.02793813 0 0 0 8.67739093 37.4212512z m27.11684907-304.2510432a43.38695787 43.38695787 0 0 1 3.7963584-18.98179414 25.48983787 25.48983787 0 0 1 24.9475008-14.10076053 27.65918613 27.65918613 0 0 1 17.35478293 5.4233696 28.2015232 28.2015232 0 0 1 8.13505493 21.6934784 24.9475008 24.9475008 0 0 1-15.18543466 25.48983787 78.0965248 78.0965248 0 0 1-27.11684907 7.0503808v27.11684906a71.58848107 71.58848107 0 0 1 25.48983787 3.7963584 22.23581547 22.23581547 0 0 1 12.4737504 23.32049067 24.9475008 24.9475008 0 0 1-6.50804374 17.89712 23.3204896 23.3204896 0 0 1-17.89712 7.0503808 22.77815253 22.77815253 0 0 1-19.5241312-8.677392 35.79424 35.79424 0 0 1-5.96570666-22.77815253h-35.251904a94.90897067 94.90897067 0 0 0 4.8810336 27.116848 61.28407787 61.28407787 0 0 0 14.6430976 20.60880533 50.97967573 50.97967573 0 0 0 17.354784 10.30440213 76.4695136 76.4695136 0 0 0 24.9475008 2.71168534 66.70744747 66.70744747 0 0 0 44.47163093-14.1007616 47.18331627 47.18331627 0 0 0 16.81244693-37.96358827 42.30228373 42.30228373 0 0 0-10.3044032-28.7438592 34.16722987 34.16722987 0 0 0-13.01608746-9.76206613 27.11684907 27.11684907 0 0 0 14.64309866-8.67739094 47.18331627 47.18331627 0 0 0 14.64309867-36.33657706 61.28407787 61.28407787 0 0 0-16.81244587-42.84462187 64.53810027 64.53810027 0 0 0-49.89500266-18.43945707 60.7417408 60.7417408 0 0 0-54.23369707 26.574512 79.18119787 79.18119787 0 0 0-9.219728 36.87891414z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="save" unicode="&#58952;" d="M788.69067383 752.15185547h-26.03759766v0.65917969H261.42932128v-0.65917969h-26.03759764c-50.92163086 0-92.20275879-41.19873047-92.2027588-92.12036133v-552.72216797c0-50.92163086 41.28112793-92.12036133 92.2027588-92.12036133h553.29895019c50.92163086 0 92.20275879 41.28112793 92.20275879 92.12036133V660.03149414c0 50.8392334-41.36352539 92.12036133-92.20275879 92.12036133z m-467.93518067-58.58459473H703.16210938v-118.48754882c0-21.83532715-19.03381348-39.55078125-42.51708985-39.55078125H363.272583c-23.48327637 0-42.51708984 17.71545411-42.51708983 39.55078125V693.5672607500001z m501.47094727-575.46386719c0-24.38964844-19.85778809-44.24743653-44.32983399-44.24743652H246.02099609c-24.4720459 0-44.32983398 19.77539063-44.32983398 44.24743652V649.31982422c0 24.38964844 19.85778809 44.24743653 44.32983398 44.24743653h15.32592774V568.5703125c0-50.92163086 40.78674317-92.12036133 91.1315918-92.12036133h318.96057129c50.34484864 0 91.1315918 41.28112793 91.13159179 92.12036133V693.5672607500001h15.24353027c24.4720459 0 44.32983398-19.77539063 44.32983399-44.24743653v-531.21643067zM607.58105469 568.2407226600001c16.31469727 0 29.66308594 13.34838867 29.66308593 29.66308593v32.95898438c0 16.31469727-13.34838867 29.66308594-29.66308593 29.66308594s-29.66308594-13.34838867-29.66308594-29.66308594v-32.95898438c0-16.31469727 13.34838867-29.66308594 29.66308594-29.66308593z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>

src/markdown/index.vue

@@ -1,12 +1,12 @@
 <template lang="html">
-  <div
+    <div :class="`markdown ${fullscreen?'fullscreen':'' } ${bordered?'border':''}`"
-    :class="isFullscreen?'markdown fullscreen':'markdown' "
          ref="markdown"
-    :style="{width:editorWidth+'px',height:editorHeight+'px'}"
+         :style="{width:editorWidth+'px',height:editorHeight+'px'}">
-  >
         <!-- 头部工具栏 -->
-    <ul class="markdown-toolbars">
+        <ul class="markdown-toolbars" v-show="!preview">
-      <li><slot name="title"/></li>
+            <li>
+                <slot name="title"/>
+            </li>
             <li v-if="tools.strong" name="粗体">
                 <span @click="insertStrong" class="iconfont icon-strong"></span>
             </li>
@@ -85,14 +85,20 @@
             <li name="保存到本地" v-show="tools.exportmd">
                 <span class="iconfont icon-download" @click="exportMd"></span>
             </li>
-      <li v-if="tools.shift&&preview==2" name="全屏编辑">
+            <li v-if="tools.split&&split" name="全屏编辑">
-        <span @click="preview=3" class="iconfont icon-md"></span>
+                <span @click="split=false" class="iconfont icon-md"></span>
             </li>
-      <li v-if="tools.shift&&preview==3" name="分屏显示">
+            <li v-if="tools.split&&!split" name="分屏显示">
-        <span @click="preview=1" class="iconfont icon-group"></span>
+                <span @click="split=true" class="iconfont icon-group"></span>
             </li>
-      <li v-if="tools.shift&&preview==1" name="预览">
+            <li v-if="tools.preview" name="预览">
-        <span @click="preview=2" class="iconfont icon-preview"></span>
+                <span @click="preview=true" class="iconfont icon-preview"></span>
+            </li>
+            <li v-if="tools.clear" name="清空" @click="value=''">
+                <span class="iconfont icon-clear"></span>
+            </li>
+            <li  v-if="tools.save" name="保存" @click="value=''">
+                <span class="iconfont icon-save"></span>
             </li>
             <li :name="scrolling?'同步滚动:开':'同步滚动:关'">
                 <span @click="scrolling=!scrolling" v-show="scrolling" class="iconfont icon-on"></span>
@@ -100,44 +106,48 @@
             </li>
             <li class="empty"></li>
 
-      <li v-if="tools.fullscreen&&!isFullscreen" name="全屏">
+            <li v-if="tools.fullscreen&&!fullscreen" name="全屏">
-        <span @click="isFullscreen=!isFullscreen" class="iconfont icon-full-screen"></span>
+                <span @click="fullscreen=!fullscreen" class="iconfont icon-full-screen"></span>
             </li>
-      <li v-if="tools.fullscreen&&isFullscreen" name="退出全屏">
+            <li v-if="tools.fullscreen&&fullscreen" name="退出全屏">
-        <span @click="isFullscreen=!isFullscreen" class="iconfont icon-exit-full-screen"></span>
+                <span @click="fullscreen=!fullscreen" class="iconfont icon-exit-full-screen"></span>
             </li>
         </ul>
+        <!-- 关闭预览按钮 -->
+        <div class="close-preview" v-show="preview&&!isPreview" @click="preview=false">
+            <span class="iconfont icon-close"></span>
+        </div>
         <!-- 编辑器 -->
-    <div class="markdown-content" :style="{background:preview==2?'#fff':''}">
+        <div class="markdown-content" :style="{background:preview?'#fff':''}">
-      <div v-show="preview===1||preview===3" class="markdown-editor" ref="markdownContent"
+            <div
+                v-show="!preview"
+                class="markdown-editor"
+                ref="markdownContent"
                 @scroll="markdownScroll"
                 @mouseenter="mousescrollSide('markdown')">
                 <ul class="index" ref="index" :style="{height:scrollHeight?`${scrollHeight}px`:'100%'}">
                     <li v-for="(item,index) in indexLenth">{{index+1}}</li>
                 </ul>
                 <textarea
-          v-model="value"
+                    v-model="currentValue"
                     @keydown.tab="tab"
                     @keyup.enter="enter"
                     @keyup.delete="onDelete"
                     ref="textarea"
-          :style="{height:scrollHeight?`${scrollHeight}px`:'100%'}"
+                    :style="{height:scrollHeight?`${scrollHeight}px`:'100%'}"></textarea>
-        ></textarea>
             </div>
-      <div v-show="preview==1" class="empty" style="width:12px;"></div>
+            <div v-show="!preview&&split" class="empty"></div>
-      <div
+            <div v-show="preview?preview:split"
-        v-show="preview===1||preview===2"
                  :class="`markdown-preview ${themeName}`"
                  ref="preview"
                  @scroll="previewScroll"
                  @mouseenter="mousescrollSide('preview')">
-        <div  v-html="html"
+                <div v-html="html" ref="previewInner"></div>
-              ref="previewInner" ></div>
             </div>
         </div>
         <!--    预览图片-->
         <div :class="['preview-img',previewImgModal?'active':'']">
-      <span class="close" @click="previewImgModal=false">关闭</span>
+            <span class="close icon-close iconfont" @click="previewImgModal=false"></span>
             <img :src="previewImgSrc" :class="[previewImgMode]" alt="">
         </div>
     </div>
@@ -147,6 +157,7 @@
     import markdown from './markdown';
 
     export default markdown;
+
 </script>
 
 <style lang="less">
@@ -157,4 +168,5 @@
     @import "css/one-dark";
     @import "css/gitHub";
     @import "css/index";
+
 </style>

src/markdown/js/tools.js

@@ -21,10 +21,13 @@ export default {
     table: true,
     checked: true,
     notChecked: true,
-  shift : true,
+    split: true,
+    preview: true,
     fullscreen: true,
     print: false,
     theme: true,
     exportmd: true,
-  importmd : true
+    importmd: true,
+    save: false,
+    clear: false
 }

src/markdown/markdown.js

@@ -24,10 +24,14 @@ marked.setOptions({
 export default {
     name: 'markdown',
     props: {
-    initialValue: {
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        initialValue: {// 初始化内容
             type: String,
             default: ''
-    }, // 初始化内容
+        },
         theme: { // 默认主题
             type: String,
             default: 'Light'
@@ -46,10 +50,14 @@ export default {
                 return {};
             }
         },
-    autoSave: { // 是否自动保存
+        bordered: {//是否有边框
             type: Boolean,
             default: true
         },
+        autoSave: { // 是否自动保存
+            type: Boolean,
+            default: false
+        },
         interval: { // 自动保存间隔 mm
             type: Number,
             default: 100000
@@ -58,25 +66,30 @@ export default {
             type: String,
             default: '未命名文件'
         },
-    markedOptions: {
+        markedOptions: {//marked.js配置项
             type: Object,
             default() {
                 return {};
             }
+        },
+        isPreview: {//是否是预览模式
+            type: Boolean,
+            default: false
         }
     },
     data() {
         return {
-      value: '', // 输入框内容
+            currentValue: '', // 输入框内容
             timeoutId: null,
             indexLenth: 100,
             html: '',
-      preview: 1, // 是否是预览状态
+            preview: false, // 是否是预览状态
-      isFullscreen: false, // 是否是全屏
+            split: true,//分屏显示
+            fullscreen: false, // 是否是全屏
             scrollHeight: null,
             scroll: 'markdown', // 哪个半栏在滑动
             themeName: '', // 主题名称
-      lastInsert: '',
+            lastInsert: '',//最后一次插入的内容
             timerId: null, // 定时器id
             themeSlideDown: false,
             imgs: [],
@@ -101,6 +114,17 @@ export default {
     },
     mounted() {
         this.init();
+    },
+    methods: {
+        init() {
+            this.currentValue = this.value;
+            this.themeName = this.theme;
+            this.editorHeight = this.height;
+            this.editorWidth = this.width;
+            this.preview = this.isPreview;
+            if (this.isPreview) {
+                return;
+            }
             setTimeout(() => {
                 const textarea = this.$refs.textarea;
                 textarea.focus();
@@ -120,13 +144,6 @@ export default {
                 }
             }, 20)
         },
-  methods: {
-    init() {
-      this.value = this.initialValue;
-      this.themeName = this.theme;
-      this.editorHeight = this.height;
-      this.editorWidth = this.width;
-    },
         handlePaste(e) { // 粘贴图片
             const {
                 clipboardData = {}
@@ -150,9 +167,7 @@ export default {
             }
         },
         markdownScroll() {
-      const {
+            const {scrolling} = this;
-        scrolling
-      } = this;
             if (!scrolling) {
                 return;
             }
@@ -166,9 +181,7 @@ export default {
             }
         },
         previewScroll() {
-      const {
+            const {scrolling} = this;
-        scrolling
-      } = this;
             if (!scrolling) {
                 return;
             }
@@ -185,17 +198,11 @@ export default {
             this.scroll = side;
         },
         insertContent(initStr) { // 插入文本
-      const {
-        preview
-      } = this;
-      if (preview === 2) {
-        return;
-      }
             this.lastInsert = initStr;
             const point = this.getCursortPosition();
-      const lastChart = this.value.substring(point - 1, point);
+            const lastChart = this.currentValue.substring(point - 1, point);
-      const lastFourCharts = this.value.substring(point - 4, point);
+            const lastFourCharts = this.currentValue.substring(point - 4, point);
-      if (lastChart !== '\n' && this.value !== '' && lastFourCharts !== '    ') {
+            if (lastChart !== '\n' && this.currentValue !== '' && lastFourCharts !== '    ') {
                 const str = '\n' + initStr;
                 this.insertAfterText(str);
             } else {
@@ -208,7 +215,7 @@ export default {
             if (document.selection) {
                 textDom.focus();
                 let selectRange = document.selection.createRange();
-        selectRange.moveStart('character', -this.value.length);
+                selectRange.moveStart('character', -this.currentValue.length);
                 cursorPos = selectRange.text.length;
             } else if (textDom.selectionStart || parseInt(textDom.selectionStart, 0) === 0) {
                 cursorPos = textDom.selectionStart;
@@ -236,7 +243,7 @@ export default {
                 textDom.value += value;
                 textDom.focus();
             }
-      this.$set(this, 'value', textDom.value);
+            this.$set(this, 'currentValue', textDom.value);
         },
         setCaretPosition(position) { // 设置光标位置
             const textDom = this.$refs.textarea;
@@ -277,9 +284,9 @@ export default {
         },
         insertCode() { // 插入code
             const point = this.getCursortPosition();
-      const lastChart = this.value.substring(point - 1, point);
+            const lastChart = this.currentValue.substring(point - 1, point);
             this.insertContent('\n```\n\n```');
-      if (lastChart !== '\n' && this.value !== '') {
+            if (lastChart !== '\n' && this.currentValue !== '') {
                 this.setCaretPosition(point + 5);
             } else {
                 this.setCaretPosition(point + 5);
@@ -287,9 +294,9 @@ export default {
         },
         insertStrong() { // 粗体
             const point = this.getCursortPosition();
-      const lastChart = this.value.substring(point - 1, point);
+            const lastChart = this.currentValue.substring(point - 1, point);
             this.insertContent('****');
-      if (lastChart !== '\n' && this.value !== '') {
+            if (lastChart !== '\n' && this.currentValue !== '') {
                 this.setCaretPosition(point + 2);
             } else {
                 this.setCaretPosition(point + 2);
@@ -297,9 +304,9 @@ export default {
         },
         insertItalic() { // 斜体
             const point = this.getCursortPosition();
-      const lastChart = this.value.substring(point - 1, point);
+            const lastChart = this.currentValue.substring(point - 1, point);
             this.insertContent('**');
-      if (lastChart !== '\n' && this.value !== '') {
+            if (lastChart !== '\n' && this.currentValue !== '') {
                 this.setCaretPosition(point + 1);
             } else {
                 this.setCaretPosition(point + 1);
@@ -307,9 +314,9 @@ export default {
         },
         insertBg() { // 背景色
             const point = this.getCursortPosition();
-      const lastChart = this.value.substring(point - 1, point);
+            const lastChart = this.currentValue.substring(point - 1, point);
             this.insertContent('====');
-      if (lastChart !== '\n' && this.value !== '') {
+            if (lastChart !== '\n' && this.currentValue !== '') {
                 this.setCaretPosition(point + 5);
             } else {
                 this.setCaretPosition(point + 5);
@@ -317,9 +324,9 @@ export default {
         },
         insertUnderline() { // 下划线
             const point = this.getCursortPosition();
-      const lastChart = this.value.substring(point - 1, point);
+            const lastChart = this.currentValue.substring(point - 1, point);
             this.insertContent('<u></u>');
-      if (lastChart !== '\n' && this.value !== '') {
+            if (lastChart !== '\n' && this.currentValue !== '') {
                 this.setCaretPosition(point + 3);
             } else {
                 this.setCaretPosition(point + 5);
@@ -327,9 +334,9 @@ export default {
         },
         insertOverline() { // overline
             const point = this.getCursortPosition();
-      const lastChart = this.value.substring(point - 1, point);
+            const lastChart = this.currentValue.substring(point - 1, point);
             this.insertContent('~~~~');
-      if (lastChart !== '\n' && this.value !== '') {
+            if (lastChart !== '\n' && this.currentValue !== '') {
                 this.setCaretPosition(point + 2);
             } else {
                 this.setCaretPosition(point + 2);
@@ -355,15 +362,10 @@ export default {
             }
         },
         handleSave() { // 保存操作
-      const {
+            const {currentValue, themeName} = this;
-        value,
-        html,
-        themeName
-      } = this;
             this.$emit('on-save', {
                 theme: themeName,
-        value,
+                value: currentValue,
-        html
             });
         },
         insertLine() { // 插入分割线
@@ -375,33 +377,30 @@ export default {
         setThemes(name) { // 设置主题
             this.themeName = name;
             this.themeSlideDown = false;
+            this.$emit('on-theme-change', name);
         },
         enter() { // 回车事件
-      const {
+            const {lastInsert} = this;
-        lastInsert
-      } = this;
             const list = ['-  ', '1. ', '- [ ]  ', '- [x]  ']
             if (list.includes(lastInsert)) {
                 this.insertContent(lastInsert);
             }
         },
         onDelete() { // 删除时,以回车为界分割，如果数组最后一个元素为''时，将行一次插入的共嗯那个置为空，避免回车时再次插入
-      const lines = this.value.split('\n');
+            const lines = this.currentValue.split('\n');
             if (lines[lines.length - 1] === '') {
                 this.lastInsert = '';
             }
         },
         exportMd() { // 导出为.md格式
-      saveFile(this.value, this.exportFileName + '.md');
+            saveFile(this.currentValue, this.exportFileName + '.md');
         },
         importFile(e) { // 导入本地文件
             const file = e.target.files[0];
             if (!file) {
                 return;
             }
-      const {
+            const {type} = file;
-        type
-      } = file;
             if (type !== 'text/markdown') {
                 this.$Notice.error('文件格式有误!');
                 return;
@@ -411,14 +410,12 @@ export default {
                 encoding: 'utf-8'
             });
             reader.onload = () => {
-        this.value = reader.result;
+                this.currentValue = reader.result;
                 e.target.value = '';
             }
         },
         addImageClickListener() { // 监听查看大图
-      const {
+            const {imgs} = this;
-        imgs
-      } = this;
             if (imgs.length > 0) {
                 for (let i = 0, len = imgs.length; i < len; i++) {
                     imgs[i].onclick = null;
@@ -448,27 +445,50 @@ export default {
                 this.previewImgSrc = src;
                 this.previewImgModal = true;
             }
+        },
+        addCopyListener() { // 监听复制操作
+            setTimeout(() => {
+                const btns = document.querySelectorAll('.code-block .copy-code');
+                this.btns = btns;
+                for (let i = 0, len = btns.length; i < len; i++) {
+                    btns[i].onclick = () => {
+                        const code = btns[i].parentNode.querySelectorAll('pre')[0].innerText;
+                        const aux = document.createElement('input');
+                        aux.setAttribute('value', code);
+                        document.body.appendChild(aux);
+                        aux.select();
+                        document.execCommand('copy');
+                        document.body.removeChild(aux);
+                        this.$emit('on-copy',code);
+                    };
+                }
+            }, 600);
         }
     },
     watch: {
-    initialValue() {
+        currentValue() {
-      this.value = this.initialValue;
-    },
-    value() {
             clearTimeout(this.timeoutId);
             this.timeoutId = setTimeout(() => {
-        this.html = marked(this.value, {
+                const {currentValue} = this;
+                this.html = marked(currentValue, {
                     sanitize: false,
                     ...this.markedOptions
-        });
+                }).replace(/href="/ig, 'target="_blank" href="')
-      }, 30)
+                    .replace(/<pre>/g, '<div class="code-block"><span class="copy-code">复制代码</span><pre>')
-      this.indexLenth = this.value.split('\n').length;
+                    .replace(/<\/pre>/g, '</pre></div>');
+                this.indexLenth = this.currentValue.split('\n').length;
                 const height1 = this.indexLenth * 22;
                 const height2 = this.$refs.textarea.scrollHeight;
                 const height3 = this.$refs.preview.scrollHeight;
                 this.scrollHeight = Math.max(height1, height2, height3);
                 this.indexLenth = parseInt(this.scrollHeight / 22, 0) - 1;
                 this.addImageClickListener();
+                this.addCopyListener();
+                this.$emit('input', currentValue);
+            }, 300)
+        },
+        value() {
+            this.currentValue = this.value;
         },
         theme() {
             this.themeName = this.theme;

webpack.config.js

@@ -2,7 +2,13 @@ var path = require('path')
 var webpack = require('webpack')
 const NODE_ENV = process.env.NODE_ENV;
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
+const isDev = process.env.NODE_ENV === 'development';
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
+let analyzerPlugin = [];
+if(process.env.analyzer==='true'){
+    analyzerPlugin.push(new BundleAnalyzerPlugin())
+}
 module.exports = {
     entry: NODE_ENV === 'npm' ? './src/index.js' : './src/main.js',
     output: {
@@ -13,7 +19,12 @@ module.exports = {
         library: 'markdown-vue',
         umdNamedDefine: true
     },
-  devtool: NODE_ENV==='develop'?'cheap-module-eval-source-map':'cheap-module-source-map',
+    devtool: isDev ? 'cheap-module-eval-source-map' : 'cheap-module-source-map',
+    devServer: {
+        historyApiFallback: true,
+        noInfo: true,
+        overlay: true
+    },
     module: {
         rules: [
             {
@@ -26,9 +37,7 @@ module.exports = {
                 test: /\.vue$/,
                 loader: 'vue-loader',
                 options: {
-          loaders: {
+                    loaders: {}
-          }
-          // other vue-loader options go here
                 }
             },
             {
@@ -51,37 +60,16 @@ module.exports = {
         },
         extensions: ['*', '.js', '.vue', '.json']
     },
-  devServer: {
+    plugins: [
-    historyApiFallback: true,
+        ...analyzerPlugin,
-    noInfo: true,
-    overlay: true
-  },
-  performance: {
-    hints: false
-  },
-  devtool: '#eval-source-map'
-}
-
-if (NODE_ENV === 'production'||NODE_ENV==='npm') {
-  module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
-  module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
         new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
             compress: {
                 warnings: false
             }
         }),
         new webpack.LoaderOptionsPlugin({
             minimize: true
-    }),
-    new CompressionWebpackPlugin({
-      algorithm: 'gzip'
         })
-  ])
+    ]
 }
+