发布1.4.0版本
This commit is contained in:
zhaoxh
parent
952d702fff
commit
b8b636f34d
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
# Created by .ignore support plugin (hsz.mobi)
|
||||
src/markdown/font/*.js
|
||||
src/doc.js
|
||||
src/markdown/js/hljs.js
|
||||
|
|
@ -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"
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
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.
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"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
151
src/App.vue
151
src/App.vue
|
|
@ -1,86 +1,101 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="container">
|
||||
<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>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div class="container">
|
||||
<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"
|
||||
v-model="value"
|
||||
@on-theme-change="onThemeChange"
|
||||
:markedOptions="{baseUrl:'http://smalleyes.oss-cn-shanghai.aliyuncs.com/'}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarkDown from './markdown/index' // 开发文件
|
||||
// import MarkDown from "../build"; // 引入打包好的文件
|
||||
// import MarkDown from 'vue-meditor';
|
||||
import MarkDown from './markdown/index' // 开发文件
|
||||
// import MarkDown from "../build"; // 引入打包好的文件
|
||||
// import MarkDown from 'vue-meditor';
|
||||
|
||||
import doc from './doc';
|
||||
export default {
|
||||
name: "app",
|
||||
components: {
|
||||
MarkDown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
initialValue: "",
|
||||
theme: 'OneDark'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save(res) {
|
||||
console.log(res);
|
||||
},
|
||||
handlePasteImage(res) {
|
||||
console.log(res);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.initialValue = doc;
|
||||
}, 1000);
|
||||
import doc from './doc';
|
||||
|
||||
}
|
||||
};
|
||||
export default {
|
||||
name: "app",
|
||||
components: {
|
||||
MarkDown
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
theme: 'OneDark'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save(res) {
|
||||
console.log(res);
|
||||
},
|
||||
handlePasteImage(res) {
|
||||
console.log(res);
|
||||
},
|
||||
onThemeChange(theme) {
|
||||
console.log(theme)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.value = doc;
|
||||
}, 1000);
|
||||
|
||||
},
|
||||
watch: {
|
||||
value() {
|
||||
console.log(this.value)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
margin: 12px 0;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
background-color: #f8f8f9;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #edeff0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
text-decoration: none;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
.container {
|
||||
width: 80vw;
|
||||
margin: 0 auto;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
border: 1px solid #ccc;
|
||||
a {
|
||||
display: inline-block;
|
||||
background-color: #f8f8f9;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #edeff0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
text-decoration: none;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
/*border: 1px solid #ccc;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
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 = {
|
|||
- 修复主题无法更新的问题
|
||||
- 修复文档初始化值无法动态切换的问题
|
||||
|
||||
|
||||
`
|
||||
|
|
|
|||
|
|
@ -5,129 +5,134 @@
|
|||
|
||||
// Dark
|
||||
.Dark {
|
||||
pre {
|
||||
display: block;
|
||||
padding: 20px !important;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0 !important;
|
||||
background: #1e1e1e;
|
||||
color: #DCDCDC;
|
||||
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;
|
||||
pre {
|
||||
display: block;
|
||||
padding: 15px 20px !important;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0 !important;
|
||||
background: #1e1e1e;
|
||||
color: #DCDCDC;
|
||||
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;
|
||||
}
|
||||
}
|
||||
code {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-name,
|
||||
.hljs-symbol {
|
||||
color: #659bd1;
|
||||
}
|
||||
.hljs-keyword{
|
||||
color: #bc89bd;
|
||||
}
|
||||
.hljs-link {
|
||||
color: #569CD6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.hljs-literal,
|
||||
.hljs-name,
|
||||
.hljs-symbol {
|
||||
color: #659bd1;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-type {
|
||||
color: #4EC9B0;
|
||||
}
|
||||
.hljs-keyword {
|
||||
color: #bc89bd;
|
||||
}
|
||||
|
||||
.hljs-class,
|
||||
.hljs-number {
|
||||
color: #B8D7A3;
|
||||
}
|
||||
.hljs-link {
|
||||
color: #569CD6;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hljs-meta-string,
|
||||
.hljs-string {
|
||||
color: #D69D85;
|
||||
}
|
||||
.hljs-built_in,
|
||||
.hljs-type {
|
||||
color: #4EC9B0;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-template-tag {
|
||||
color: #9A5334;
|
||||
}
|
||||
.hljs-class,
|
||||
.hljs-number {
|
||||
color: #B8D7A3;
|
||||
}
|
||||
|
||||
.hljs-formula,
|
||||
.hljs-function,
|
||||
.hljs-params,
|
||||
.hljs-subst,
|
||||
.hljs-title {
|
||||
color: #DCDCDC;
|
||||
}
|
||||
.hljs-meta-string,
|
||||
.hljs-string {
|
||||
color: #D69D85;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #57A64A;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-regexp,
|
||||
.hljs-template-tag {
|
||||
color: #9A5334;
|
||||
}
|
||||
|
||||
.hljs-doctag {
|
||||
color: #608B4E;
|
||||
}
|
||||
.hljs-formula,
|
||||
.hljs-function,
|
||||
.hljs-params,
|
||||
.hljs-subst,
|
||||
.hljs-title {
|
||||
color: #DCDCDC;
|
||||
}
|
||||
|
||||
.hljs-meta,
|
||||
.hljs-meta-keyword,
|
||||
.hljs-tag {
|
||||
color: #9B9B9B;
|
||||
}
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #57A64A;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-template-variable,
|
||||
.hljs-variable {
|
||||
color: #BD63C5;
|
||||
}
|
||||
.hljs-doctag {
|
||||
color: #608B4E;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-builtin-name {
|
||||
color: #9CDCFE;
|
||||
}
|
||||
.hljs-meta,
|
||||
.hljs-meta-keyword,
|
||||
.hljs-tag {
|
||||
color: #9B9B9B;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
color: gold;
|
||||
}
|
||||
.hljs-template-variable,
|
||||
.hljs-variable {
|
||||
color: #BD63C5;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-builtin-name {
|
||||
color: #9CDCFE;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.hljs-section {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-selector-tag {
|
||||
color: #D7BA7D;
|
||||
}
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background-color: #144212;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background-color: #600;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.hljs-comment{
|
||||
font-style: normal;
|
||||
}
|
||||
.hljs-bullet,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-selector-tag {
|
||||
color: #D7BA7D;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background-color: #144212;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background-color: #600;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
// gitHub 风格
|
||||
.GitHub {
|
||||
pre {
|
||||
padding: 20px 20px 30px !important;
|
||||
display: block;
|
||||
padding:15px 20px!important;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
color: #333;
|
||||
background: #f7f8fa !important;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,107 +4,129 @@
|
|||
*/
|
||||
// 默认风格
|
||||
.Light {
|
||||
pre {
|
||||
font-size: 14px !important;
|
||||
line-height: 1.6 !important;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
background: #f7f8fb !important;
|
||||
padding: 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;
|
||||
font-size: 13px;
|
||||
line-height: @line-height !important;
|
||||
color: #444;
|
||||
pre {
|
||||
font-size: 14px !important;
|
||||
line-height: 1.6 !important;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
border: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
background: #f7f8fb !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;
|
||||
font-size: 13px;
|
||||
line-height: @line-height !important;
|
||||
color: #444;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
color: #525252;
|
||||
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;
|
||||
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||
margin: 0 3px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
color: #666;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
pre.bg code {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
color: #525252;
|
||||
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;
|
||||
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||
margin: 0 3px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
color: #666;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
pre code {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
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,160 +1,172 @@
|
|||
<template lang="html">
|
||||
<div
|
||||
:class="isFullscreen?'markdown fullscreen':'markdown' "
|
||||
ref="markdown"
|
||||
:style="{width:editorWidth+'px',height:editorHeight+'px'}"
|
||||
>
|
||||
<!-- 头部工具栏 -->
|
||||
<ul class="markdown-toolbars">
|
||||
<li><slot name="title"/></li>
|
||||
<li v-if="tools.strong" name="粗体">
|
||||
<span @click="insertStrong" class="iconfont icon-strong"></span>
|
||||
</li>
|
||||
<li v-if="tools.italic" name="斜体">
|
||||
<span @click="insertItalic" class="iconfont icon-italic"></span>
|
||||
</li>
|
||||
<li v-if="tools.overline" name="删除线">
|
||||
<span @click="insertOverline" class="iconfont icon-overline"></span>
|
||||
</li>
|
||||
<li v-if="tools.h1" name="标题1">
|
||||
<span style="font-size: 16px;" @click="insertTitle(1)">h1</span>
|
||||
</li>
|
||||
<li v-if="tools.h2" name="标题2">
|
||||
<span style="font-size: 16px;" @click="insertTitle(2)">h2</span>
|
||||
</li>
|
||||
<li v-if="tools.h3" name="标题3">
|
||||
<span style="font-size: 16px;" @click="insertTitle(3)">h3</span>
|
||||
</li>
|
||||
<li v-if="tools.h4" name="标题4">
|
||||
<span style="font-size: 16px;" @click="insertTitle(4)">h4</span>
|
||||
</li>
|
||||
<li v-if="tools.h5" name="标题5">
|
||||
<span style="font-size: 16px;" @click="insertTitle(5)">h5</span>
|
||||
</li>
|
||||
<li v-if="tools.h6" name="标题6">
|
||||
<span style="font-size: 16px;" @click="insertTitle(6)">h6</span>
|
||||
</li>
|
||||
<li v-if="tools.hr" name="分割线">
|
||||
<span @click="insertLine" class="iconfont icon-horizontal"></span>
|
||||
</li>
|
||||
<li v-if="tools.quote" name="引用">
|
||||
<span style="font-size: 16px;" @click="insertQuote" class="iconfont icon-quote"></span>
|
||||
</li>
|
||||
<li v-if="tools.ul" name="无序列表">
|
||||
<span @click="insertUl" class="iconfont icon-ul"></span>
|
||||
</li>
|
||||
<li v-if="tools.ol" name="有序列表">
|
||||
<span @click="insertOl" class="iconfont icon-ol"></span>
|
||||
</li>
|
||||
<li v-if="tools.code" name="代码块">
|
||||
<span @click="insertCode" class="iconfont icon-code"></span>
|
||||
</li>
|
||||
<li v-if="tools.notChecked" name="未完成列表">
|
||||
<span @click="insertNotFinished" class="iconfont icon-checked-false"></span>
|
||||
</li>
|
||||
<li v-if="tools.checked" name="已完成列表">
|
||||
<span @click="insertFinished" class="iconfont icon-checked"></span>
|
||||
</li>
|
||||
<li v-if="tools.link" name="链接">
|
||||
<span @click="insertLink" class="iconfont icon-link"></span>
|
||||
</li>
|
||||
<li v-if="tools.image" name="图片">
|
||||
<span @click="insertImage" class="iconfont icon-img"></span>
|
||||
</li>
|
||||
<li v-if="tools.table" name="表格">
|
||||
<span @click="insertTable" class="iconfont icon-table"></span>
|
||||
</li>
|
||||
<li v-if="tools.print" name="打印">
|
||||
<span class="iconfont icon-dayin" @click="print"></span>
|
||||
</li>
|
||||
<li v-if="tools.theme" class="shift-theme" name="代码块主题">
|
||||
<div>
|
||||
<span class="iconfont icon-yanse" @click="themeSlideDown=!themeSlideDown"></span>
|
||||
<ul :class="{active:themeSlideDown}" @mouseleave="themeSlideDown=false">
|
||||
<li @click="setThemes('Light')">Light</li>
|
||||
<li @click="setThemes('Dark')">VS Code</li>
|
||||
<li @click="setThemes('OneDark')">Atom OneDark</li>
|
||||
<li @click="setThemes('GitHub')">GitHub</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li name="导入本地文件" class="import-file" v-show="tools.importmd">
|
||||
<span class="iconfont icon-daoru" @click="importFile"></span>
|
||||
<input type="file" @change="importFile($event)" accept="text/markdown">
|
||||
</li>
|
||||
<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>
|
||||
<li v-if="tools.shift&&preview==3" name="分屏显示">
|
||||
<span @click="preview=1" class="iconfont icon-group"></span>
|
||||
</li>
|
||||
<li v-if="tools.shift&&preview==1" name="预览">
|
||||
<span @click="preview=2" class="iconfont icon-preview"></span>
|
||||
</li>
|
||||
<li :name="scrolling?'同步滚动:开':'同步滚动:关'">
|
||||
<span @click="scrolling=!scrolling" v-show="scrolling" class="iconfont icon-on"></span>
|
||||
<span @click="scrolling=!scrolling" v-show="!scrolling" class="iconfont icon-off"></span>
|
||||
</li>
|
||||
<li class="empty"></li>
|
||||
<div :class="`markdown ${fullscreen?'fullscreen':'' } ${bordered?'border':''}`"
|
||||
ref="markdown"
|
||||
:style="{width:editorWidth+'px',height:editorHeight+'px'}">
|
||||
<!-- 头部工具栏 -->
|
||||
<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>
|
||||
<li v-if="tools.italic" name="斜体">
|
||||
<span @click="insertItalic" class="iconfont icon-italic"></span>
|
||||
</li>
|
||||
<li v-if="tools.overline" name="删除线">
|
||||
<span @click="insertOverline" class="iconfont icon-overline"></span>
|
||||
</li>
|
||||
<li v-if="tools.h1" name="标题1">
|
||||
<span style="font-size: 16px;" @click="insertTitle(1)">h1</span>
|
||||
</li>
|
||||
<li v-if="tools.h2" name="标题2">
|
||||
<span style="font-size: 16px;" @click="insertTitle(2)">h2</span>
|
||||
</li>
|
||||
<li v-if="tools.h3" name="标题3">
|
||||
<span style="font-size: 16px;" @click="insertTitle(3)">h3</span>
|
||||
</li>
|
||||
<li v-if="tools.h4" name="标题4">
|
||||
<span style="font-size: 16px;" @click="insertTitle(4)">h4</span>
|
||||
</li>
|
||||
<li v-if="tools.h5" name="标题5">
|
||||
<span style="font-size: 16px;" @click="insertTitle(5)">h5</span>
|
||||
</li>
|
||||
<li v-if="tools.h6" name="标题6">
|
||||
<span style="font-size: 16px;" @click="insertTitle(6)">h6</span>
|
||||
</li>
|
||||
<li v-if="tools.hr" name="分割线">
|
||||
<span @click="insertLine" class="iconfont icon-horizontal"></span>
|
||||
</li>
|
||||
<li v-if="tools.quote" name="引用">
|
||||
<span style="font-size: 16px;" @click="insertQuote" class="iconfont icon-quote"></span>
|
||||
</li>
|
||||
<li v-if="tools.ul" name="无序列表">
|
||||
<span @click="insertUl" class="iconfont icon-ul"></span>
|
||||
</li>
|
||||
<li v-if="tools.ol" name="有序列表">
|
||||
<span @click="insertOl" class="iconfont icon-ol"></span>
|
||||
</li>
|
||||
<li v-if="tools.code" name="代码块">
|
||||
<span @click="insertCode" class="iconfont icon-code"></span>
|
||||
</li>
|
||||
<li v-if="tools.notChecked" name="未完成列表">
|
||||
<span @click="insertNotFinished" class="iconfont icon-checked-false"></span>
|
||||
</li>
|
||||
<li v-if="tools.checked" name="已完成列表">
|
||||
<span @click="insertFinished" class="iconfont icon-checked"></span>
|
||||
</li>
|
||||
<li v-if="tools.link" name="链接">
|
||||
<span @click="insertLink" class="iconfont icon-link"></span>
|
||||
</li>
|
||||
<li v-if="tools.image" name="图片">
|
||||
<span @click="insertImage" class="iconfont icon-img"></span>
|
||||
</li>
|
||||
<li v-if="tools.table" name="表格">
|
||||
<span @click="insertTable" class="iconfont icon-table"></span>
|
||||
</li>
|
||||
<li v-if="tools.print" name="打印">
|
||||
<span class="iconfont icon-dayin" @click="print"></span>
|
||||
</li>
|
||||
<li v-if="tools.theme" class="shift-theme" name="代码块主题">
|
||||
<div>
|
||||
<span class="iconfont icon-yanse" @click="themeSlideDown=!themeSlideDown"></span>
|
||||
<ul :class="{active:themeSlideDown}" @mouseleave="themeSlideDown=false">
|
||||
<li @click="setThemes('Light')">Light</li>
|
||||
<li @click="setThemes('Dark')">VS Code</li>
|
||||
<li @click="setThemes('OneDark')">Atom OneDark</li>
|
||||
<li @click="setThemes('GitHub')">GitHub</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li name="导入本地文件" class="import-file" v-show="tools.importmd">
|
||||
<span class="iconfont icon-daoru" @click="importFile"></span>
|
||||
<input type="file" @change="importFile($event)" accept="text/markdown">
|
||||
</li>
|
||||
<li name="保存到本地" v-show="tools.exportmd">
|
||||
<span class="iconfont icon-download" @click="exportMd"></span>
|
||||
</li>
|
||||
<li v-if="tools.split&&split" name="全屏编辑">
|
||||
<span @click="split=false" class="iconfont icon-md"></span>
|
||||
</li>
|
||||
<li v-if="tools.split&&!split" name="分屏显示">
|
||||
<span @click="split=true" class="iconfont icon-group"></span>
|
||||
</li>
|
||||
<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>
|
||||
<span @click="scrolling=!scrolling" v-show="!scrolling" class="iconfont icon-off"></span>
|
||||
</li>
|
||||
<li class="empty"></li>
|
||||
|
||||
<li v-if="tools.fullscreen&&!isFullscreen" name="全屏">
|
||||
<span @click="isFullscreen=!isFullscreen" 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>
|
||||
</ul>
|
||||
<!-- 编辑器 -->
|
||||
<div class="markdown-content" :style="{background:preview==2?'#fff':''}">
|
||||
<div v-show="preview===1||preview===3" 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>
|
||||
<li v-if="tools.fullscreen&&!fullscreen" name="全屏">
|
||||
<span @click="fullscreen=!fullscreen" class="iconfont icon-full-screen"></span>
|
||||
</li>
|
||||
<li v-if="tools.fullscreen&&fullscreen" name="退出全屏">
|
||||
<span @click="fullscreen=!fullscreen" class="iconfont icon-exit-full-screen"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<textarea
|
||||
v-model="value"
|
||||
@keydown.tab="tab"
|
||||
@keyup.enter="enter"
|
||||
@keyup.delete="onDelete"
|
||||
ref="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"
|
||||
:class="`markdown-preview ${themeName}`"
|
||||
ref="preview"
|
||||
@scroll="previewScroll"
|
||||
@mouseenter="mousescrollSide('preview')">
|
||||
<div v-html="html"
|
||||
ref="previewInner" ></div>
|
||||
</div>
|
||||
<!-- 关闭预览按钮 -->
|
||||
<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?'#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="currentValue"
|
||||
@keydown.tab="tab"
|
||||
@keyup.enter="enter"
|
||||
@keyup.delete="onDelete"
|
||||
ref="textarea"
|
||||
:style="{height:scrollHeight?`${scrollHeight}px`:'100%'}"></textarea>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<!-- 预览图片-->
|
||||
<div :class="['preview-img',previewImgModal?'active':'']">
|
||||
<span class="close icon-close iconfont" @click="previewImgModal=false"></span>
|
||||
<img :src="previewImgSrc" :class="[previewImgMode]" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 预览图片-->
|
||||
<div :class="['preview-img',previewImgModal?'active':'']">
|
||||
<span class="close" @click="previewImgModal=false">关闭</span>
|
||||
<img :src="previewImgSrc" :class="[previewImgMode]" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import markdown from './markdown';
|
||||
import markdown from './markdown';
|
||||
|
||||
export default markdown;
|
||||
|
||||
export default markdown;
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "font/iconfont.css";
|
||||
@import "./css/theme";
|
||||
@import "css/light";
|
||||
@import "css/dark";
|
||||
@import "css/one-dark";
|
||||
@import "css/gitHub";
|
||||
@import "css/index";
|
||||
@import "font/iconfont.css";
|
||||
@import "./css/theme";
|
||||
@import "css/light";
|
||||
@import "css/dark";
|
||||
@import "css/one-dark";
|
||||
@import "css/gitHub";
|
||||
@import "css/index";
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,29 +2,32 @@
|
|||
* 默认头部菜单配置
|
||||
* */
|
||||
export default {
|
||||
strong : true,
|
||||
italic : true,
|
||||
overline : true,
|
||||
h1 : true,
|
||||
h2 : true,
|
||||
h3 : true,
|
||||
h4 : false,
|
||||
h5 : false,
|
||||
h6 : false,
|
||||
hr : true,
|
||||
quote : true,
|
||||
ul : true,
|
||||
ol : true,
|
||||
code : true,
|
||||
link : true,
|
||||
image : true,
|
||||
table : true,
|
||||
checked : true,
|
||||
notChecked : true,
|
||||
shift : true,
|
||||
fullscreen : true,
|
||||
print : false,
|
||||
theme : true,
|
||||
exportmd : true,
|
||||
importmd : true
|
||||
strong: true,
|
||||
italic: true,
|
||||
overline: true,
|
||||
h1: true,
|
||||
h2: true,
|
||||
h3: true,
|
||||
h4: false,
|
||||
h5: false,
|
||||
h6: false,
|
||||
hr: true,
|
||||
quote: true,
|
||||
ul: true,
|
||||
ol: true,
|
||||
code: true,
|
||||
link: true,
|
||||
image: true,
|
||||
table: true,
|
||||
checked: true,
|
||||
notChecked: true,
|
||||
split: true,
|
||||
preview: true,
|
||||
fullscreen: true,
|
||||
print: false,
|
||||
theme: true,
|
||||
exportmd: true,
|
||||
importmd: true,
|
||||
save: false,
|
||||
clear: false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import hljs from './js/hljs';
|
||||
import marked from 'marked';
|
||||
import {
|
||||
saveFile
|
||||
saveFile
|
||||
} from "./js/utils";
|
||||
import defaultTools from './js/tools';
|
||||
|
||||
|
|
@ -9,478 +9,498 @@ hljs.initHighlightingOnLoad();
|
|||
const renderer = new marked.Renderer();
|
||||
|
||||
marked.setOptions({
|
||||
renderer,
|
||||
gfm: true,
|
||||
tables: true,
|
||||
breaks: false,
|
||||
pedantic: false,
|
||||
sanitize: false,
|
||||
smartLists: true,
|
||||
highlight: function (code) {
|
||||
return hljs.highlightAuto(code).value;
|
||||
}
|
||||
renderer,
|
||||
gfm: true,
|
||||
tables: true,
|
||||
breaks: false,
|
||||
pedantic: false,
|
||||
sanitize: false,
|
||||
smartLists: true,
|
||||
highlight: function (code) {
|
||||
return hljs.highlightAuto(code).value;
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
name: 'markdown',
|
||||
props: {
|
||||
initialValue: {
|
||||
type:String,
|
||||
default:''
|
||||
}, // 初始化内容
|
||||
theme: { // 默认主题
|
||||
type: String,
|
||||
default: 'Light'
|
||||
name: 'markdown',
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
initialValue: {// 初始化内容
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
theme: { // 默认主题
|
||||
type: String,
|
||||
default: 'Light'
|
||||
},
|
||||
width: { // 初始化宽度
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
},
|
||||
height: { // 初始化高度
|
||||
type: Number,
|
||||
default: 600
|
||||
}, // 宽度
|
||||
toolbars: { // 工具栏
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
bordered: {//是否有边框
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
autoSave: { // 是否自动保存
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
interval: { // 自动保存间隔 mm
|
||||
type: Number,
|
||||
default: 100000
|
||||
},
|
||||
exportFileName: { // 默认导出文件名称
|
||||
type: String,
|
||||
default: '未命名文件'
|
||||
},
|
||||
markedOptions: {//marked.js配置项
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
isPreview: {//是否是预览模式
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
width: { // 初始化宽度
|
||||
type: [Number, String],
|
||||
default: 'auto'
|
||||
data() {
|
||||
return {
|
||||
currentValue: '', // 输入框内容
|
||||
timeoutId: null,
|
||||
indexLenth: 100,
|
||||
html: '',
|
||||
preview: false, // 是否是预览状态
|
||||
split: true,//分屏显示
|
||||
fullscreen: false, // 是否是全屏
|
||||
scrollHeight: null,
|
||||
scroll: 'markdown', // 哪个半栏在滑动
|
||||
themeName: '', // 主题名称
|
||||
lastInsert: '',//最后一次插入的内容
|
||||
timerId: null, // 定时器id
|
||||
themeSlideDown: false,
|
||||
imgs: [],
|
||||
scrolling: true, // 同步滚动
|
||||
editorHeight: '',
|
||||
editorWidth: '',
|
||||
previewImgModal: false,
|
||||
previewImgSrc: '',
|
||||
previewImgMode: ''
|
||||
};
|
||||
},
|
||||
height: { // 初始化高度
|
||||
type: Number,
|
||||
default: 600
|
||||
}, // 宽度
|
||||
toolbars: { // 工具栏
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
}
|
||||
computed: {
|
||||
tools() {
|
||||
const {
|
||||
toolbars = {}
|
||||
} = this;
|
||||
return {
|
||||
...defaultTools,
|
||||
...toolbars
|
||||
}
|
||||
}
|
||||
},
|
||||
autoSave: { // 是否自动保存
|
||||
type: Boolean,
|
||||
default: true
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
interval: { // 自动保存间隔 mm
|
||||
type: Number,
|
||||
default: 100000
|
||||
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();
|
||||
textarea.addEventListener('keydown', e => {
|
||||
if (e.keyCode === 83) {
|
||||
if (e.metaKey || e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
this.handleSave();
|
||||
}
|
||||
}
|
||||
})
|
||||
textarea.addEventListener('paste', this.handlePaste);
|
||||
if (this.autoSave) {
|
||||
this.timerId = setInterval(() => {
|
||||
this.handleSave();
|
||||
}, this.interval);
|
||||
}
|
||||
}, 20)
|
||||
},
|
||||
handlePaste(e) { // 粘贴图片
|
||||
const {
|
||||
clipboardData = {}
|
||||
} = e;
|
||||
const {
|
||||
types = [], items
|
||||
} = clipboardData;
|
||||
let item = null;
|
||||
for (let i = 0; i < types.length; i++) {
|
||||
if (types[i] === 'Files') {
|
||||
item = items[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (item) {
|
||||
const file = item.getAsFile();
|
||||
if (/image/ig.test(file.type)) {
|
||||
this.$emit('on-paste-image', file);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
markdownScroll() {
|
||||
const {scrolling} = this;
|
||||
if (!scrolling) {
|
||||
return;
|
||||
}
|
||||
if (this.scroll === 'markdown') {
|
||||
const markdownContent = this.$refs.markdownContent;
|
||||
const preview = this.$refs.preview;
|
||||
const markdownScrollHeight = markdownContent.scrollHeight;
|
||||
const markdownScrollTop = markdownContent.scrollTop;
|
||||
const previewScrollHeight = preview.scrollHeight;
|
||||
preview.scrollTop = parseInt(markdownScrollTop / markdownScrollHeight * previewScrollHeight, 0);
|
||||
}
|
||||
},
|
||||
previewScroll() {
|
||||
const {scrolling} = this;
|
||||
if (!scrolling) {
|
||||
return;
|
||||
}
|
||||
if (this.scroll === 'preview') {
|
||||
const markdownContent = this.$refs.markdownContent;
|
||||
const preview = this.$refs.preview;
|
||||
const markdownScrollHeight = markdownContent.scrollHeight;
|
||||
const previewScrollHeight = preview.scrollHeight;
|
||||
const previewScrollTop = preview.scrollTop;
|
||||
markdownContent.scrollTop = parseInt(previewScrollTop / previewScrollHeight * markdownScrollHeight, 0);
|
||||
}
|
||||
},
|
||||
mousescrollSide(side) { // 设置究竟是哪个半边在主动滑动
|
||||
this.scroll = side;
|
||||
},
|
||||
insertContent(initStr) { // 插入文本
|
||||
this.lastInsert = initStr;
|
||||
const point = this.getCursortPosition();
|
||||
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 {
|
||||
this.insertAfterText(initStr);
|
||||
}
|
||||
},
|
||||
getCursortPosition() { // 获取光标位置
|
||||
const textDom = this.$refs.textarea;
|
||||
let cursorPos = 0;
|
||||
if (document.selection) {
|
||||
textDom.focus();
|
||||
let selectRange = document.selection.createRange();
|
||||
selectRange.moveStart('character', -this.currentValue.length);
|
||||
cursorPos = selectRange.text.length;
|
||||
} else if (textDom.selectionStart || parseInt(textDom.selectionStart, 0) === 0) {
|
||||
cursorPos = textDom.selectionStart;
|
||||
}
|
||||
return cursorPos;
|
||||
},
|
||||
insertAfterText(value) { // 插入文本
|
||||
const textDom = this.$refs.textarea;
|
||||
let selectRange;
|
||||
if (document.selection) {
|
||||
textDom.focus();
|
||||
selectRange = document.selection.createRange();
|
||||
selectRange.text = value;
|
||||
textDom.focus();
|
||||
} else if (textDom.selectionStart || parseInt(textDom.selectionStart, 0) === 0) {
|
||||
const startPos = textDom.selectionStart;
|
||||
const endPos = textDom.selectionEnd;
|
||||
const scrollTop = textDom.scrollTop;
|
||||
textDom.value = textDom.value.substring(0, startPos) + value + textDom.value.substring(endPos, textDom.value.length);
|
||||
textDom.focus();
|
||||
textDom.selectionStart = startPos + value.length;
|
||||
textDom.selectionEnd = startPos + value.length;
|
||||
textDom.scrollTop = scrollTop;
|
||||
} else {
|
||||
textDom.value += value;
|
||||
textDom.focus();
|
||||
}
|
||||
this.$set(this, 'currentValue', textDom.value);
|
||||
},
|
||||
setCaretPosition(position) { // 设置光标位置
|
||||
const textDom = this.$refs.textarea;
|
||||
if (textDom.setSelectionRange) {
|
||||
textDom.focus();
|
||||
textDom.setSelectionRange(position, position);
|
||||
} else if (textDom.createTextRange) {
|
||||
let range = textDom.createTextRange();
|
||||
range.collapse(true);
|
||||
range.moveEnd('character', position);
|
||||
range.moveStart('character', position);
|
||||
range.select();
|
||||
}
|
||||
},
|
||||
insertQuote() { // 引用
|
||||
this.insertContent('\n> ');
|
||||
},
|
||||
insertUl() { // 无需列表
|
||||
this.insertContent('- ');
|
||||
},
|
||||
insertOl() { // 有序列表
|
||||
this.insertContent('1. ');
|
||||
},
|
||||
insertFinished() { // 已完成列表
|
||||
this.insertContent('- [x] ');
|
||||
},
|
||||
insertNotFinished() { // 未完成列表
|
||||
this.insertContent('- [ ] ');
|
||||
},
|
||||
insertLink() { // 插入链接
|
||||
this.insertContent('\n[插入链接](href)');
|
||||
},
|
||||
insertImage() { // 插入图片
|
||||
this.insertContent('\n');
|
||||
},
|
||||
insertTable() { // 插入表格
|
||||
this.insertContent('\nheader 1 | header 2\n---|---\nrow 1 col 1 | row 1 col 2\nrow 2 col 1 | row 2 col 2\n\n');
|
||||
},
|
||||
insertCode() { // 插入code
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.currentValue.substring(point - 1, point);
|
||||
this.insertContent('\n```\n\n```');
|
||||
if (lastChart !== '\n' && this.currentValue !== '') {
|
||||
this.setCaretPosition(point + 5);
|
||||
} else {
|
||||
this.setCaretPosition(point + 5);
|
||||
}
|
||||
},
|
||||
insertStrong() { // 粗体
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.currentValue.substring(point - 1, point);
|
||||
this.insertContent('****');
|
||||
if (lastChart !== '\n' && this.currentValue !== '') {
|
||||
this.setCaretPosition(point + 2);
|
||||
} else {
|
||||
this.setCaretPosition(point + 2);
|
||||
}
|
||||
},
|
||||
insertItalic() { // 斜体
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.currentValue.substring(point - 1, point);
|
||||
this.insertContent('**');
|
||||
if (lastChart !== '\n' && this.currentValue !== '') {
|
||||
this.setCaretPosition(point + 1);
|
||||
} else {
|
||||
this.setCaretPosition(point + 1);
|
||||
}
|
||||
},
|
||||
insertBg() { // 背景色
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.currentValue.substring(point - 1, point);
|
||||
this.insertContent('====');
|
||||
if (lastChart !== '\n' && this.currentValue !== '') {
|
||||
this.setCaretPosition(point + 5);
|
||||
} else {
|
||||
this.setCaretPosition(point + 5);
|
||||
}
|
||||
},
|
||||
insertUnderline() { // 下划线
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.currentValue.substring(point - 1, point);
|
||||
this.insertContent('<u></u>');
|
||||
if (lastChart !== '\n' && this.currentValue !== '') {
|
||||
this.setCaretPosition(point + 3);
|
||||
} else {
|
||||
this.setCaretPosition(point + 5);
|
||||
}
|
||||
},
|
||||
insertOverline() { // overline
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.currentValue.substring(point - 1, point);
|
||||
this.insertContent('~~~~');
|
||||
if (lastChart !== '\n' && this.currentValue !== '') {
|
||||
this.setCaretPosition(point + 2);
|
||||
} else {
|
||||
this.setCaretPosition(point + 2);
|
||||
}
|
||||
},
|
||||
insertTitle(level) { // 插入标题
|
||||
const titleLevel = {
|
||||
1: '# ',
|
||||
2: '## ',
|
||||
3: '### ',
|
||||
4: '#### ',
|
||||
5: '##### ',
|
||||
6: '###### '
|
||||
};
|
||||
this.insertContent(titleLevel[level]);
|
||||
},
|
||||
tab(e) { // 屏蔽teatarea tab默认事件
|
||||
this.insertContent(' ', this);
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
e.returnValue = false;
|
||||
}
|
||||
},
|
||||
handleSave() { // 保存操作
|
||||
const {currentValue, themeName} = this;
|
||||
this.$emit('on-save', {
|
||||
theme: themeName,
|
||||
value: currentValue,
|
||||
});
|
||||
},
|
||||
insertLine() { // 插入分割线
|
||||
this.insertContent('\n----\n');
|
||||
},
|
||||
toggleSlideDown() { // 显示主题选项
|
||||
this.slideDown = !this.slideDown;
|
||||
},
|
||||
setThemes(name) { // 设置主题
|
||||
this.themeName = name;
|
||||
this.themeSlideDown = false;
|
||||
this.$emit('on-theme-change', name);
|
||||
},
|
||||
enter() { // 回车事件
|
||||
const {lastInsert} = this;
|
||||
const list = ['- ', '1. ', '- [ ] ', '- [x] ']
|
||||
if (list.includes(lastInsert)) {
|
||||
this.insertContent(lastInsert);
|
||||
}
|
||||
},
|
||||
onDelete() { // 删除时,以回车为界分割，如果数组最后一个元素为''时，将行一次插入的共嗯那个置为空，避免回车时再次插入
|
||||
const lines = this.currentValue.split('\n');
|
||||
if (lines[lines.length - 1] === '') {
|
||||
this.lastInsert = '';
|
||||
}
|
||||
},
|
||||
exportMd() { // 导出为.md格式
|
||||
saveFile(this.currentValue, this.exportFileName + '.md');
|
||||
},
|
||||
importFile(e) { // 导入本地文件
|
||||
const file = e.target.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
const {type} = file;
|
||||
if (type !== 'text/markdown') {
|
||||
this.$Notice.error('文件格式有误!');
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file, {
|
||||
encoding: 'utf-8'
|
||||
});
|
||||
reader.onload = () => {
|
||||
this.currentValue = reader.result;
|
||||
e.target.value = '';
|
||||
}
|
||||
},
|
||||
addImageClickListener() { // 监听查看大图
|
||||
const {imgs} = this;
|
||||
if (imgs.length > 0) {
|
||||
for (let i = 0, len = imgs.length; i < len; i++) {
|
||||
imgs[i].onclick = null;
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.imgs = this.$refs.preview.querySelectorAll('img');
|
||||
for (let i = 0, len = this.imgs.length; i < len; i++) {
|
||||
this.imgs[i].onclick = () => {
|
||||
const src = this.imgs[i].getAttribute('src');
|
||||
this.previewImage(src);
|
||||
}
|
||||
}
|
||||
}, 600);
|
||||
},
|
||||
previewImage(src) { // 预览图片
|
||||
const img = new Image();
|
||||
img.src = src;
|
||||
img.onload = () => {
|
||||
const width = img.naturalWidth;
|
||||
const height = img.naturalHeight;
|
||||
if ((height / width) > 1.4) {
|
||||
this.previewImgMode = 'horizontal';
|
||||
} else {
|
||||
this.previewImgMode = 'vertical';
|
||||
}
|
||||
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);
|
||||
}
|
||||
},
|
||||
exportFileName: { // 默认导出文件名称
|
||||
type: String,
|
||||
default: '未命名文件'
|
||||
watch: {
|
||||
currentValue() {
|
||||
clearTimeout(this.timeoutId);
|
||||
this.timeoutId = setTimeout(() => {
|
||||
const {currentValue} = this;
|
||||
this.html = marked(currentValue, {
|
||||
sanitize: false,
|
||||
...this.markedOptions
|
||||
}).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;
|
||||
},
|
||||
height() {
|
||||
this.editorHeight = this.height;
|
||||
},
|
||||
width() {
|
||||
this.editorWidth = this.width;
|
||||
}
|
||||
},
|
||||
markedOptions: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {};
|
||||
}
|
||||
destroyed() { // 销毁时清除定时器
|
||||
clearInterval(this.timerId);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '', // 输入框内容
|
||||
timeoutId: null,
|
||||
indexLenth: 100,
|
||||
html: '',
|
||||
preview: 1, // 是否是预览状态
|
||||
isFullscreen: false, // 是否是全屏
|
||||
scrollHeight: null,
|
||||
scroll: 'markdown', // 哪个半栏在滑动
|
||||
themeName: '', // 主题名称
|
||||
lastInsert: '',
|
||||
timerId: null, // 定时器id
|
||||
themeSlideDown: false,
|
||||
imgs: [],
|
||||
scrolling: true, // 同步滚动
|
||||
editorHeight: '',
|
||||
editorWidth: '',
|
||||
previewImgModal: false,
|
||||
previewImgSrc: '',
|
||||
previewImgMode: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tools() {
|
||||
const {
|
||||
toolbars = {}
|
||||
} = this;
|
||||
return {
|
||||
...defaultTools,
|
||||
...toolbars
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
setTimeout(() => {
|
||||
const textarea = this.$refs.textarea;
|
||||
textarea.focus();
|
||||
textarea.addEventListener('keydown', e => {
|
||||
if (e.keyCode === 83) {
|
||||
if (e.metaKey || e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
this.handleSave();
|
||||
}
|
||||
}
|
||||
})
|
||||
textarea.addEventListener('paste', this.handlePaste);
|
||||
if (this.autoSave) {
|
||||
this.timerId = setInterval(() => {
|
||||
this.handleSave();
|
||||
}, this.interval);
|
||||
}
|
||||
}, 20)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.value = this.initialValue;
|
||||
this.themeName = this.theme;
|
||||
this.editorHeight = this.height;
|
||||
this.editorWidth = this.width;
|
||||
},
|
||||
handlePaste(e) { // 粘贴图片
|
||||
const {
|
||||
clipboardData = {}
|
||||
} = e;
|
||||
const {
|
||||
types = [], items
|
||||
} = clipboardData;
|
||||
let item = null;
|
||||
for (let i = 0; i < types.length; i++) {
|
||||
if (types[i] === 'Files') {
|
||||
item = items[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (item) {
|
||||
const file = item.getAsFile();
|
||||
if (/image/ig.test(file.type)) {
|
||||
this.$emit('on-paste-image', file);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
markdownScroll() {
|
||||
const {
|
||||
scrolling
|
||||
} = this;
|
||||
if (!scrolling) {
|
||||
return;
|
||||
}
|
||||
if (this.scroll === 'markdown') {
|
||||
const markdownContent = this.$refs.markdownContent;
|
||||
const preview = this.$refs.preview;
|
||||
const markdownScrollHeight = markdownContent.scrollHeight;
|
||||
const markdownScrollTop = markdownContent.scrollTop;
|
||||
const previewScrollHeight = preview.scrollHeight;
|
||||
preview.scrollTop = parseInt(markdownScrollTop / markdownScrollHeight * previewScrollHeight, 0);
|
||||
}
|
||||
},
|
||||
previewScroll() {
|
||||
const {
|
||||
scrolling
|
||||
} = this;
|
||||
if (!scrolling) {
|
||||
return;
|
||||
}
|
||||
if (this.scroll === 'preview') {
|
||||
const markdownContent = this.$refs.markdownContent;
|
||||
const preview = this.$refs.preview;
|
||||
const markdownScrollHeight = markdownContent.scrollHeight;
|
||||
const previewScrollHeight = preview.scrollHeight;
|
||||
const previewScrollTop = preview.scrollTop;
|
||||
markdownContent.scrollTop = parseInt(previewScrollTop / previewScrollHeight * markdownScrollHeight, 0);
|
||||
}
|
||||
},
|
||||
mousescrollSide(side) { // 设置究竟是哪个半边在主动滑动
|
||||
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 str = '\n' + initStr;
|
||||
this.insertAfterText(str);
|
||||
} else {
|
||||
this.insertAfterText(initStr);
|
||||
}
|
||||
},
|
||||
getCursortPosition() { // 获取光标位置
|
||||
const textDom = this.$refs.textarea;
|
||||
let cursorPos = 0;
|
||||
if (document.selection) {
|
||||
textDom.focus();
|
||||
let selectRange = document.selection.createRange();
|
||||
selectRange.moveStart('character', -this.value.length);
|
||||
cursorPos = selectRange.text.length;
|
||||
} else if (textDom.selectionStart || parseInt(textDom.selectionStart, 0) === 0) {
|
||||
cursorPos = textDom.selectionStart;
|
||||
}
|
||||
return cursorPos;
|
||||
},
|
||||
insertAfterText(value) { // 插入文本
|
||||
const textDom = this.$refs.textarea;
|
||||
let selectRange;
|
||||
if (document.selection) {
|
||||
textDom.focus();
|
||||
selectRange = document.selection.createRange();
|
||||
selectRange.text = value;
|
||||
textDom.focus();
|
||||
} else if (textDom.selectionStart || parseInt(textDom.selectionStart, 0) === 0) {
|
||||
const startPos = textDom.selectionStart;
|
||||
const endPos = textDom.selectionEnd;
|
||||
const scrollTop = textDom.scrollTop;
|
||||
textDom.value = textDom.value.substring(0, startPos) + value + textDom.value.substring(endPos, textDom.value.length);
|
||||
textDom.focus();
|
||||
textDom.selectionStart = startPos + value.length;
|
||||
textDom.selectionEnd = startPos + value.length;
|
||||
textDom.scrollTop = scrollTop;
|
||||
} else {
|
||||
textDom.value += value;
|
||||
textDom.focus();
|
||||
}
|
||||
this.$set(this, 'value', textDom.value);
|
||||
},
|
||||
setCaretPosition(position) { // 设置光标位置
|
||||
const textDom = this.$refs.textarea;
|
||||
if (textDom.setSelectionRange) {
|
||||
textDom.focus();
|
||||
textDom.setSelectionRange(position, position);
|
||||
} else if (textDom.createTextRange) {
|
||||
let range = textDom.createTextRange();
|
||||
range.collapse(true);
|
||||
range.moveEnd('character', position);
|
||||
range.moveStart('character', position);
|
||||
range.select();
|
||||
}
|
||||
},
|
||||
insertQuote() { // 引用
|
||||
this.insertContent('\n> ');
|
||||
},
|
||||
insertUl() { // 无需列表
|
||||
this.insertContent('- ');
|
||||
},
|
||||
insertOl() { // 有序列表
|
||||
this.insertContent('1. ');
|
||||
},
|
||||
insertFinished() { // 已完成列表
|
||||
this.insertContent('- [x] ');
|
||||
},
|
||||
insertNotFinished() { // 未完成列表
|
||||
this.insertContent('- [ ] ');
|
||||
},
|
||||
insertLink() { // 插入链接
|
||||
this.insertContent('\n[插入链接](href)');
|
||||
},
|
||||
insertImage() { // 插入图片
|
||||
this.insertContent('\n');
|
||||
},
|
||||
insertTable() { // 插入表格
|
||||
this.insertContent('\nheader 1 | header 2\n---|---\nrow 1 col 1 | row 1 col 2\nrow 2 col 1 | row 2 col 2\n\n');
|
||||
},
|
||||
insertCode() { // 插入code
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.value.substring(point - 1, point);
|
||||
this.insertContent('\n```\n\n```');
|
||||
if (lastChart !== '\n' && this.value !== '') {
|
||||
this.setCaretPosition(point + 5);
|
||||
} else {
|
||||
this.setCaretPosition(point + 5);
|
||||
}
|
||||
},
|
||||
insertStrong() { // 粗体
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.value.substring(point - 1, point);
|
||||
this.insertContent('****');
|
||||
if (lastChart !== '\n' && this.value !== '') {
|
||||
this.setCaretPosition(point + 2);
|
||||
} else {
|
||||
this.setCaretPosition(point + 2);
|
||||
}
|
||||
},
|
||||
insertItalic() { // 斜体
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.value.substring(point - 1, point);
|
||||
this.insertContent('**');
|
||||
if (lastChart !== '\n' && this.value !== '') {
|
||||
this.setCaretPosition(point + 1);
|
||||
} else {
|
||||
this.setCaretPosition(point + 1);
|
||||
}
|
||||
},
|
||||
insertBg() { // 背景色
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.value.substring(point - 1, point);
|
||||
this.insertContent('====');
|
||||
if (lastChart !== '\n' && this.value !== '') {
|
||||
this.setCaretPosition(point + 5);
|
||||
} else {
|
||||
this.setCaretPosition(point + 5);
|
||||
}
|
||||
},
|
||||
insertUnderline() { // 下划线
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.value.substring(point - 1, point);
|
||||
this.insertContent('<u></u>');
|
||||
if (lastChart !== '\n' && this.value !== '') {
|
||||
this.setCaretPosition(point + 3);
|
||||
} else {
|
||||
this.setCaretPosition(point + 5);
|
||||
}
|
||||
},
|
||||
insertOverline() { // overline
|
||||
const point = this.getCursortPosition();
|
||||
const lastChart = this.value.substring(point - 1, point);
|
||||
this.insertContent('~~~~');
|
||||
if (lastChart !== '\n' && this.value !== '') {
|
||||
this.setCaretPosition(point + 2);
|
||||
} else {
|
||||
this.setCaretPosition(point + 2);
|
||||
}
|
||||
},
|
||||
insertTitle(level) { // 插入标题
|
||||
const titleLevel = {
|
||||
1: '# ',
|
||||
2: '## ',
|
||||
3: '### ',
|
||||
4: '#### ',
|
||||
5: '##### ',
|
||||
6: '###### '
|
||||
};
|
||||
this.insertContent(titleLevel[level]);
|
||||
},
|
||||
tab(e) { // 屏蔽teatarea tab默认事件
|
||||
this.insertContent(' ', this);
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
e.returnValue = false;
|
||||
}
|
||||
},
|
||||
handleSave() { // 保存操作
|
||||
const {
|
||||
value,
|
||||
html,
|
||||
themeName
|
||||
} = this;
|
||||
this.$emit('on-save', {
|
||||
theme: themeName,
|
||||
value,
|
||||
html
|
||||
});
|
||||
},
|
||||
insertLine() { // 插入分割线
|
||||
this.insertContent('\n----\n');
|
||||
},
|
||||
toggleSlideDown() { // 显示主题选项
|
||||
this.slideDown = !this.slideDown;
|
||||
},
|
||||
setThemes(name) { // 设置主题
|
||||
this.themeName = name;
|
||||
this.themeSlideDown = false;
|
||||
},
|
||||
enter() { // 回车事件
|
||||
const {
|
||||
lastInsert
|
||||
} = this;
|
||||
const list = ['- ', '1. ', '- [ ] ', '- [x] ']
|
||||
if (list.includes(lastInsert)) {
|
||||
this.insertContent(lastInsert);
|
||||
}
|
||||
},
|
||||
onDelete() { // 删除时,以回车为界分割，如果数组最后一个元素为''时，将行一次插入的共嗯那个置为空，避免回车时再次插入
|
||||
const lines = this.value.split('\n');
|
||||
if (lines[lines.length - 1] === '') {
|
||||
this.lastInsert = '';
|
||||
}
|
||||
},
|
||||
exportMd() { // 导出为.md格式
|
||||
saveFile(this.value, this.exportFileName + '.md');
|
||||
},
|
||||
importFile(e) { // 导入本地文件
|
||||
const file = e.target.files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
type
|
||||
} = file;
|
||||
if (type !== 'text/markdown') {
|
||||
this.$Notice.error('文件格式有误!');
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file, {
|
||||
encoding: 'utf-8'
|
||||
});
|
||||
reader.onload = () => {
|
||||
this.value = reader.result;
|
||||
e.target.value = '';
|
||||
}
|
||||
},
|
||||
addImageClickListener() { // 监听查看大图
|
||||
const {
|
||||
imgs
|
||||
} = this;
|
||||
if (imgs.length > 0) {
|
||||
for (let i = 0, len = imgs.length; i < len; i++) {
|
||||
imgs[i].onclick = null;
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.imgs = this.$refs.preview.querySelectorAll('img');
|
||||
for (let i = 0, len = this.imgs.length; i < len; i++) {
|
||||
this.imgs[i].onclick = () => {
|
||||
const src = this.imgs[i].getAttribute('src');
|
||||
this.previewImage(src);
|
||||
}
|
||||
}
|
||||
}, 600);
|
||||
},
|
||||
previewImage(src) { // 预览图片
|
||||
const img = new Image();
|
||||
img.src = src;
|
||||
img.onload = () => {
|
||||
const width = img.naturalWidth;
|
||||
const height = img.naturalHeight;
|
||||
if ((height / width) > 1.4) {
|
||||
this.previewImgMode = 'horizontal';
|
||||
} else {
|
||||
this.previewImgMode = 'vertical';
|
||||
}
|
||||
this.previewImgSrc = src;
|
||||
this.previewImgModal = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
initialValue() {
|
||||
this.value = this.initialValue;
|
||||
},
|
||||
value() {
|
||||
clearTimeout(this.timeoutId);
|
||||
this.timeoutId = setTimeout(() => {
|
||||
this.html = marked(this.value, {
|
||||
sanitize: false,
|
||||
...this.markedOptions
|
||||
});
|
||||
}, 30)
|
||||
this.indexLenth = this.value.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();
|
||||
},
|
||||
theme() {
|
||||
this.themeName = this.theme;
|
||||
},
|
||||
height() {
|
||||
this.editorHeight = this.height;
|
||||
},
|
||||
width() {
|
||||
this.editorWidth = this.width;
|
||||
}
|
||||
},
|
||||
destroyed() { // 销毁时清除定时器
|
||||
clearInterval(this.timerId);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,86 +2,74 @@ 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: {
|
||||
path: path.resolve(__dirname, NODE_ENV==='npm'?'./build':'./dist'),
|
||||
publicPath:NODE_ENV==='npm'? '/build/':'/dist/',
|
||||
filename: NODE_ENV==='npm'?'index.js':'build.js',
|
||||
libraryTarget: 'umd',
|
||||
library: 'markdown-vue',
|
||||
umdNamedDefine: true
|
||||
},
|
||||
devtool: NODE_ENV==='develop'?'cheap-module-eval-source-map':'cheap-module-source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader'
|
||||
],
|
||||
}, {
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
}
|
||||
// other vue-loader options go here
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
entry: NODE_ENV === 'npm' ? './src/index.js' : './src/main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, NODE_ENV === 'npm' ? './build' : './dist'),
|
||||
publicPath: NODE_ENV === 'npm' ? '/build/' : '/dist/',
|
||||
filename: NODE_ENV === 'npm' ? 'index.js' : 'build.js',
|
||||
libraryTarget: 'umd',
|
||||
library: 'markdown-vue',
|
||||
umdNamedDefine: true
|
||||
},
|
||||
extensions: ['*', '.js', '.vue', '.json']
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
overlay: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devtool: '#eval-source-map'
|
||||
devtool: isDev ? 'cheap-module-eval-source-map' : 'cheap-module-source-map',
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true,
|
||||
overlay: true
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader'
|
||||
],
|
||||
}, {
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
},
|
||||
extensions: ['*', '.js', '.vue', '.json']
|
||||
},
|
||||
plugins: [
|
||||
...analyzerPlugin,
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
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'
|
||||
})
|
||||
])
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue