发布1.4.0版本
This commit is contained in:
zhaoxh
parent
952d702fff
commit
b8b636f34d
13
.editorconfig
Normal file → Executable file
13
.editorconfig
Normal file → Executable file
@ -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
|
||||
|
||||
4
.eslintignore
Normal file
4
.eslintignore
Normal file
@ -0,0 +1,4 @@
|
||||
# Created by .ignore support plugin (hsz.mobi)
|
||||
src/markdown/font/*.js
|
||||
src/doc.js
|
||||
src/markdown/js/hljs.js
|
||||
22
.eslintrc.json
Executable file
22
.eslintrc.json
Executable file
@ -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"
|
||||
]
|
||||
}
|
||||
5
dist/build.js
vendored
5
dist/build.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/build.js.gz
vendored
BIN
dist/build.js.gz
vendored
Binary file not shown.
1
dist/build.js.map
vendored
1
dist/build.js.map
vendored
File diff suppressed because one or more lines are too long
BIN
dist/build.js.map.gz
vendored
BIN
dist/build.js.map.gz
vendored
Binary file not shown.
BIN
dist/iconfont.eot
vendored
BIN
dist/iconfont.eot
vendored
Binary file not shown.
BIN
dist/iconfont.eot.gz
vendored
BIN
dist/iconfont.eot.gz
vendored
Binary file not shown.
9
dist/iconfont.svg
vendored
9
dist/iconfont.svg
vendored
@ -41,6 +41,9 @@ Created by iconfont
|
||||
<glyph glyph-name="download" unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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>
|
||||
|
||||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 33 KiB |
BIN
dist/iconfont.svg.gz
vendored
BIN
dist/iconfont.svg.gz
vendored
Binary file not shown.
BIN
dist/iconfont.ttf
vendored
BIN
dist/iconfont.ttf
vendored
Binary file not shown.
BIN
dist/iconfont.ttf.gz
vendored
BIN
dist/iconfont.ttf.gz
vendored
Binary file not shown.
BIN
dist/iconfont.woff
vendored
BIN
dist/iconfont.woff
vendored
Binary file not shown.
17
package.json
17
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"
|
||||
]
|
||||
}
|
||||
|
||||
25
src/App.vue
25
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;*/
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
32
src/doc.js
32
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 // 右侧现实的问转义后的内容
|
||||
theme // 保存时的主题名字
|
||||
{
|
||||
value, // 编辑器输入的原始内容
|
||||
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 = {
|
||||
- 修复主题无法更新的问题
|
||||
- 修复文档初始化值无法动态切换的问题
|
||||
|
||||
|
||||
`
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
// gitHub 风格
|
||||
.GitHub {
|
||||
pre {
|
||||
padding: 20px 20px 30px !important;
|
||||
padding:15px 20px!important;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
color: #333;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -41,6 +41,9 @@ Created by iconfont
|
||||
<glyph glyph-name="download" unicode="" 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="" 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="" 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="" 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="" 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="" 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="" 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="" 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>
|
||||
|
||||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,12 +1,12 @@
|
||||
<template lang="html">
|
||||
<div
|
||||
:class="isFullscreen?'markdown fullscreen':'markdown' "
|
||||
<div :class="`markdown ${fullscreen?'fullscreen':'' } ${bordered?'border':''}`"
|
||||
ref="markdown"
|
||||
:style="{width:editorWidth+'px',height:editorHeight+'px'}"
|
||||
>
|
||||
:style="{width:editorWidth+'px',height:editorHeight+'px'}">
|
||||
<!-- 头部工具栏 -->
|
||||
<ul class="markdown-toolbars">
|
||||
<li><slot name="title"/></li>
|
||||
<ul class="markdown-toolbars" v-show="!preview">
|
||||
<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="全屏编辑">
|
||||
<span @click="preview=3" class="iconfont icon-md"></span>
|
||||
<li v-if="tools.split&&split" name="全屏编辑">
|
||||
<span @click="split=false" class="iconfont icon-md"></span>
|
||||
</li>
|
||||
<li v-if="tools.shift&&preview==3" name="分屏显示">
|
||||
<span @click="preview=1" class="iconfont icon-group"></span>
|
||||
<li v-if="tools.split&&!split" name="分屏显示">
|
||||
<span @click="split=true" class="iconfont icon-group"></span>
|
||||
</li>
|
||||
<li v-if="tools.shift&&preview==1" name="预览">
|
||||
<span @click="preview=2" class="iconfont icon-preview"></span>
|
||||
<li v-if="tools.preview" name="预览">
|
||||
<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="全屏">
|
||||
<span @click="isFullscreen=!isFullscreen" class="iconfont icon-full-screen"></span>
|
||||
<li v-if="tools.fullscreen&&!fullscreen" name="全屏">
|
||||
<span @click="fullscreen=!fullscreen" class="iconfont icon-full-screen"></span>
|
||||
</li>
|
||||
<li v-if="tools.fullscreen&&isFullscreen" name="退出全屏">
|
||||
<span @click="isFullscreen=!isFullscreen" class="iconfont icon-exit-full-screen"></span>
|
||||
<li v-if="tools.fullscreen&&fullscreen" name="退出全屏">
|
||||
<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 v-show="preview===1||preview===3" class="markdown-editor" ref="markdownContent"
|
||||
<div class="markdown-content" :style="{background:preview?'#fff':''}">
|
||||
<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%'}"
|
||||
></textarea>
|
||||
:style="{height:scrollHeight?`${scrollHeight}px`:'100%'}"></textarea>
|
||||
</div>
|
||||
<div v-show="preview==1" class="empty" style="width:12px;"></div>
|
||||
<div
|
||||
v-show="preview===1||preview===2"
|
||||
<div v-show="!preview&&split" class="empty"></div>
|
||||
<div v-show="preview?preview:split"
|
||||
:class="`markdown-preview ${themeName}`"
|
||||
ref="preview"
|
||||
@scroll="previewScroll"
|
||||
@mouseenter="mousescrollSide('preview')">
|
||||
<div v-html="html"
|
||||
ref="previewInner" ></div>
|
||||
<div v-html="html" 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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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, // 是否是预览状态
|
||||
isFullscreen: false, // 是否是全屏
|
||||
preview: 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 {
|
||||
scrolling
|
||||
} = this;
|
||||
const {scrolling} = this;
|
||||
if (!scrolling) {
|
||||
return;
|
||||
}
|
||||
@ -166,9 +181,7 @@ export default {
|
||||
}
|
||||
},
|
||||
previewScroll() {
|
||||
const {
|
||||
scrolling
|
||||
} = this;
|
||||
const {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 lastFourCharts = this.value.substring(point - 4, point);
|
||||
if (lastChart !== '\n' && this.value !== '' && lastFourCharts !== ' ') {
|
||||
const lastChart = this.currentValue.substring(point - 1, point);
|
||||
const lastFourCharts = this.currentValue.substring(point - 4, point);
|
||||
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 {
|
||||
value,
|
||||
html,
|
||||
themeName
|
||||
} = this;
|
||||
const {currentValue, themeName} = this;
|
||||
this.$emit('on-save', {
|
||||
theme: themeName,
|
||||
value,
|
||||
html
|
||||
value: currentValue,
|
||||
});
|
||||
},
|
||||
insertLine() { // 插入分割线
|
||||
@ -375,33 +377,30 @@ export default {
|
||||
setThemes(name) { // 设置主题
|
||||
this.themeName = name;
|
||||
this.themeSlideDown = false;
|
||||
this.$emit('on-theme-change', name);
|
||||
},
|
||||
enter() { // 回车事件
|
||||
const {
|
||||
lastInsert
|
||||
} = this;
|
||||
const {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 {
|
||||
type
|
||||
} = file;
|
||||
const {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 {
|
||||
imgs
|
||||
} = this;
|
||||
const {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() {
|
||||
this.value = this.initialValue;
|
||||
},
|
||||
value() {
|
||||
currentValue() {
|
||||
clearTimeout(this.timeoutId);
|
||||
this.timeoutId = setTimeout(() => {
|
||||
this.html = marked(this.value, {
|
||||
const {currentValue} = this;
|
||||
this.html = marked(currentValue, {
|
||||
sanitize: false,
|
||||
...this.markedOptions
|
||||
});
|
||||
}, 30)
|
||||
this.indexLenth = this.value.split('\n').length;
|
||||
}).replace(/href="/ig, 'target="_blank" href="')
|
||||
.replace(/<pre>/g, '<div class="code-block"><span class="copy-code">复制代码</span><pre>')
|
||||
.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;
|
||||
|
||||
@ -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: {
|
||||
}
|
||||
// other vue-loader options go here
|
||||
loaders: {}
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -51,37 +60,16 @@ module.exports = {
|
||||
},
|
||||
extensions: ['*', '.js', '.vue', '.json']
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
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"'
|
||||
}
|
||||
}),
|
||||
plugins: [
|
||||
...analyzerPlugin,
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
}),
|
||||
new CompressionWebpackPlugin({
|
||||
algorithm: 'gzip'
|
||||
})
|
||||
])
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user