amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-28 13:36:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs: prettify code

Browse Source
This commit is contained in:
yanglbme 2020-10-20 12:03:36 +00:00 committed by GitHub Action
parent 934163caec
commit 17f91e29ce
16 changed files with 1401 additions and 970 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/App.vue
View File

@ -6,36 +6,38 @@
</template> </template>
<script> <script>
import Loading from './components/Loading' import Loading from "./components/Loading";
import CodemirrorEditor from './view/CodemirrorEditor' import CodemirrorEditor from "./view/CodemirrorEditor";
export default { export default {
name: 'App', name: "App",
components: { components: {
Loading, Loading,
CodemirrorEditor CodemirrorEditor,
}, },
data() { data() {
return { return {
loading: true loading: true,
} };
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.loading = false this.loading = false;
}, 100); }, 100);
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fade-enter, .fade-leave-to { .fade-enter,
.fade-leave-to {
opacity: 0; opacity: 0;
} }
.fade-enter-to, .fade-leave { .fade-enter-to,
.fade-leave {
opacity: 1; opacity: 1;
} }
.fade-enter-active, .fade-leave-active { .fade-enter-active,
.fade-leave-active {
transition: all 1s; transition: all 1s;
} }
</style> </style>

170
src/assets/less/app.less
View File

@ -1,14 +1,14 @@
@import './code-theme.less'; @import "./code-theme.less";
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
input, input,
button, button,
textarea { textarea {
font-family: inherit; font-family: inherit;
} }
h1, h1,
@ -17,109 +17,110 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: normal; font-weight: normal;
} }
em { em {
font-style: normal !important; font-style: normal !important;
} }
html, html,
body { body {
height: 100%; height: 100%;
font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue",
sans-serif;
} }
.el-message__icon { .el-message__icon {
display: none display: none;
} }
.container { .container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.top { .top {
height: 60px; height: 60px;
padding: 10px 20px; padding: 10px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 20px; margin-right: 20px;
} }
.web-title { .web-title {
margin: 0 15px 0 5px; margin: 0 15px 0 5px;
} }
.web-icon { .web-icon {
width: auto; width: auto;
height: 1.5rem; height: 1.5rem;
vertical-align: middle; vertical-align: middle;
} }
#editor { #editor {
height: 100%; height: 100%;
display: block; display: block;
border: none; border: none;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
} }
section { section {
height: 100%; height: 100%;
} }
.main-body { .main-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 0; padding-top: 0;
padding-bottom: 10px; padding-bottom: 10px;
} }
.ctrl { .ctrl {
flex-basis: 60px; flex-basis: 60px;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.preview-wrapper { .preview-wrapper {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
padding: 0; padding: 0;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: flex; display: flex;
overflow: scroll; overflow: scroll;
word-break: break-all; word-break: break-all;
} }
.main-section { .main-section {
display: flex; display: flex;
height: 100%; height: 100%;
} }
.hint { .hint {
opacity: 0.6; opacity: 0.6;
margin: 20px 0; margin: 20px 0;
} }
.preview { .preview {
margin: 0 -20px; margin: 0 -20px;
width: 375px; width: 375px;
padding: 20px; padding: 20px;
font-size: 14px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1); box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
} }
.preview table { .preview table {
margin-bottom: 10px; margin-bottom: 10px;
border-collapse: collapse; border-collapse: collapse;
display: table; display: table;
width: 100% !important; width: 100% !important;
} }
/* /*
@ -128,60 +129,61 @@ section {
} }
*/ */
.select-item-left { .select-item-left {
float: left; float: left;
} }
.select-item-right { .select-item-right {
float: right; float: right;
color: #8492a6; color: #8492a6;
font-size: 13px; font-size: 13px;
} }
.CodeMirror { .CodeMirror {
height: 100% !important; height: 100% !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
font-size: 14px; font-size: 14px;
padding: 20px; padding: 20px;
width: 100% !important; width: 100% !important;
font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !important; font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue",
sans-serif !important;
} }
/* ele ui */ /* ele ui */
.el-form-item { .el-form-item {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.el-tooltip { .el-tooltip {
cursor: pointer; cursor: pointer;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
background-color: #FFF; background-color: #fff;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-radius: 6px; border-radius: 6px;
background-color: rgba(200, 200, 200, 0.3); background-color: rgba(200, 200, 200, 0.3);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 6px; border-radius: 6px;
background-color: rgba(144, 146, 152, 0.5); background-color: rgba(144, 146, 152, 0.5);
transition: background-color .3s; transition: background-color 0.3s;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 146, 152, 0.5); background-color: rgba(144, 146, 152, 0.5);
} }
.CodeMirror-vscrollbar:focus { .CodeMirror-vscrollbar:focus {
outline: none; outline: none;
} }
.CodeMirror-scroll, .CodeMirror-scroll,
.preview-wrapper { .preview-wrapper {
overflow: unset; overflow: unset;
overflow-y: scroll; overflow-y: scroll;
} }

4
src/assets/less/code-theme.less
View File

@ -1,2 +1,2 @@
@import './codeTheme/wechat-code-block.less'; @import "./codeTheme/wechat-code-block.less";
@import './codeTheme/github-code-block.less'; @import "./codeTheme/github-code-block.less";

82
src/assets/less/codeTheme/github-code-block.less
View File

@ -1,47 +1,47 @@
/*github code block*/ /*github code block*/
.code-snippet__github { .code-snippet__github {
display: flex; display: flex;
font-size: 12px;
margin: 10px 8px;
position: relative;
height: auto;
background-color: rgba(27, 31, 35, 0.05);
.code-snippet__line-index {
display: none;
}
.code__pre {
display: grid;
position: relative;
counter-reset: line;
overflow-x: auto;
padding: 1em;
white-space: normal;
flex: 1;
line-height: 20px;
font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
-webkit-overflow-scrolling: touch;
}
pre {
display: inline-block;
font-size: 12px; font-size: 12px;
margin: 10px 8px; }
position: relative;
height: auto;
background-color: rgba(27,31,35,.05);
.code-snippet__line-index { code {
display: none; display: flex;
position: relative;
padding-right: 8px;
text-align: left;
white-space: pre;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
&::before {
display: none;
} }
}
.code__pre { ul li {
display: grid; list-style: none;
position: relative; }
counter-reset: line; }
overflow-x: auto;
padding: 1em;
white-space: normal;
flex: 1;
line-height: 20px;
font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
-webkit-overflow-scrolling: touch;
}
pre {
display: inline-block;
font-size: 12px;
}
code {
display: flex;
position: relative;
padding-right: 8px;
text-align: left;
white-space: pre;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
&::before {
display: none;
}
}
ul li {
list-style: none;
}
}

76
src/assets/less/codeTheme/wechat-code-block.less
View File

@ -1,62 +1,62 @@
/*wechat code block*/ /*wechat code block*/
.rich_media_content .code-snippet *, .rich_media_content .code-snippet *,
.rich_media_content .code-snippet__wechat * { .rich_media_content .code-snippet__wechat * {
max-width: 1000% !important; max-width: 1000% !important;
} }
.code-snippet__wechat { .code-snippet__wechat {
word-wrap: break-word !important; word-wrap: break-word !important;
font-size: 14px; font-size: 14px;
margin: 10px 8px; margin: 10px 8px;
color: #333; color: #333;
position: relative; position: relative;
background-color: rgba(27, 31, 35, .05); background-color: rgba(27, 31, 35, 0.05);
border: 1px solid #f0f0f0; border: 1px solid #f0f0f0;
border-radius: 2px; border-radius: 2px;
display: flex; display: flex;
line-height: 24px; line-height: 24px;
} }
.code-snippet__wechat .code-snippet__line-index { .code-snippet__wechat .code-snippet__line-index {
counter-reset: line; counter-reset: line;
flex-shrink: 0; flex-shrink: 0;
height: 100%; height: 100%;
padding: 1em; padding: 1em;
list-style-type: none; list-style-type: none;
} }
.code-snippet__wechat .code-snippet__line-index li { .code-snippet__wechat .code-snippet__line-index li {
list-style-type: none; list-style-type: none;
text-align: right; text-align: right;
} }
.code-snippet__wechat .code-snippet__line-index li::before { .code-snippet__wechat .code-snippet__line-index li::before {
min-width: 1.5em; min-width: 1.5em;
text-align: right; text-align: right;
left: -2.5em; left: -2.5em;
counter-increment: line; counter-increment: line;
content: counter(line); content: counter(line);
display: inline; display: inline;
color: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.15);
} }
.code-snippet__wechat pre { .code-snippet__wechat pre {
overflow-x: auto; overflow-x: auto;
padding: 1em 1em 1em 1em; padding: 1em 1em 1em 1em;
white-space: normal; white-space: normal;
flex: 1; flex: 1;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.code-snippet__wechat code { .code-snippet__wechat code {
text-align: left; text-align: left;
font-size: 14px; font-size: 14px;
white-space: pre; white-space: pre;
display: flex; display: flex;
position: relative; position: relative;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
} }
.code-snippet__wechat ul li { .code-snippet__wechat ul li {
list-style: none; list-style: none;
} }

72
src/assets/less/github-v2.min.css vendored
View File

@ -1,2 +1,72 @@
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */ /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint{font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;border:0!important}.pln{color:#333}ol.linenums{margin-top:0;margin-bottom:0;color:#ccc}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal}@media screen{.str{color:#183691}.kwd{color:#a71d5d}.com{color:#969896}.typ{color:#0086b3}.lit{color:#0086b3}.pun{color:#333}.opn{color:#333}.clo{color:#333}.tag{color:navy}.atn{color:#795da3}.atv{color:#183691}.dec{color:#333}.var{color:teal}.fun{color:#900}} .prettyprint {
font-family: Menlo, Bitstream Vera Sans Mono, DejaVu Sans Mono, Monaco,
Consolas, monospace;
border: 0 !important;
}
.pln {
color: #333;
}
ol.linenums {
margin-top: 0;
margin-bottom: 0;
color: #ccc;
}
li.L0,
li.L1,
li.L2,
li.L3,
li.L4,
li.L5,
li.L6,
li.L7,
li.L8,
li.L9 {
padding-left: 1em;
background-color: #fff;
list-style-type: decimal;
}
@media screen {
.str {
color: #183691;
}
.kwd {
color: #a71d5d;
}
.com {
color: #969896;
}
.typ {
color: #0086b3;
}
.lit {
color: #0086b3;
}
.pun {
color: #333;
}
.opn {
color: #333;
}
.clo {
color: #333;
}
.tag {
color: navy;
}
.atn {
color: #795da3;
}
.atv {
color: #183691;
}
.dec {
color: #333;
}
.var {
color: teal;
}
.fun {
color: #900;
}
}

78
src/assets/less/style-mirror.css
View File

@ -9,116 +9,116 @@
*/ */
.cm-s-style-mirror.CodeMirror { .cm-s-style-mirror.CodeMirror {
background: #f5f5f5; background: #f5f5f5;
color: #444; color: #444;
font-size: 16px; font-size: 16px;
padding: 20px; padding: 20px;
line-height: 25px; line-height: 25px;
} }
.cm-s-style-mirror div.CodeMirror-selected { .cm-s-style-mirror div.CodeMirror-selected {
background: #e0e0e0; background: #e0e0e0;
} }
.cm-s-style-mirror .CodeMirror-line::selection, .cm-s-style-mirror .CodeMirror-line::selection,
.cm-s-style-mirror .CodeMirror-line>span::selection, .cm-s-style-mirror .CodeMirror-line > span::selection,
.cm-s-style-mirror .CodeMirror-line>span>span::selection { .cm-s-style-mirror .CodeMirror-line > span > span::selection {
background: #e0e0e0; background: #e0e0e0;
} }
.cm-s-style-mirror .CodeMirror-line::-moz-selection, .cm-s-style-mirror .CodeMirror-line::-moz-selection,
.cm-s-style-mirror .CodeMirror-line>span::-moz-selection, .cm-s-style-mirror .CodeMirror-line > span::-moz-selection,
.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection { .cm-s-style-mirror .CodeMirror-line > span > span::-moz-selection {
background: #e0e0e0; background: #e0e0e0;
} }
.cm-s-style-mirror .CodeMirror-gutters { .cm-s-style-mirror .CodeMirror-gutters {
background: #f5f5f5; background: #f5f5f5;
border-right: 0px; border-right: 0px;
} }
.cm-s-style-mirror .CodeMirror-guttermarker { .cm-s-style-mirror .CodeMirror-guttermarker {
color: #ac4142; color: #ac4142;
} }
.cm-s-style-mirror .CodeMirror-guttermarker-subtle { .cm-s-style-mirror .CodeMirror-guttermarker-subtle {
color: #b0b0b0; color: #b0b0b0;
} }
.cm-s-style-mirror .CodeMirror-linenumber { .cm-s-style-mirror .CodeMirror-linenumber {
color: #b0b0b0; color: #b0b0b0;
} }
.cm-s-style-mirror .CodeMirror-cursor { .cm-s-style-mirror .CodeMirror-cursor {
border-left: 1px solid #505050; border-left: 1px solid #505050;
} }
.cm-s-style-mirror span.cm-comment { .cm-s-style-mirror span.cm-comment {
color: green; color: green;
} }
.cm-s-style-mirror span.cm-atom { .cm-s-style-mirror span.cm-atom {
color: #aa759f; color: #aa759f;
} }
.cm-s-style-mirror span.cm-number { .cm-s-style-mirror span.cm-number {
color: #aa759f; color: #aa759f;
} }
.cm-s-style-mirror span.cm-property, .cm-s-style-mirror span.cm-property,
.cm-s-style-mirror span.cm-attribute { .cm-s-style-mirror span.cm-attribute {
color: #90a959; color: #90a959;
} }
.cm-s-style-mirror span.cm-keyword { .cm-s-style-mirror span.cm-keyword {
color: #023a52; color: #023a52;
} }
.cm-s-style-mirror span.cm-string { .cm-s-style-mirror span.cm-string {
color: #e46918; color: #e46918;
} }
.cm-s-style-mirror span.cm-variable { .cm-s-style-mirror span.cm-variable {
color: #90a959; color: #90a959;
} }
.cm-s-style-mirror span.cm-variable-2 { .cm-s-style-mirror span.cm-variable-2 {
color: #00695f; color: #00695f;
} }
.cm-s-style-mirror span.cm-variable-3 { .cm-s-style-mirror span.cm-variable-3 {
color: #2e6e8a; color: #2e6e8a;
} }
.cm-s-style-mirror span.cm-def { .cm-s-style-mirror span.cm-def {
color: #d28445; color: #d28445;
} }
.cm-s-style-mirror span.cm-bracket { .cm-s-style-mirror span.cm-bracket {
color: #202020; color: #202020;
} }
.cm-s-style-mirror span.cm-tag { .cm-s-style-mirror span.cm-tag {
color: #000; color: #000;
} }
.cm-s-style-mirror span.cm-link { .cm-s-style-mirror span.cm-link {
color: #b26a00; color: #b26a00;
} }
.cm-s-style-mirror span.cm-error { .cm-s-style-mirror span.cm-error {
/* background: #ac4142; /* background: #ac4142;
color: #f5f5f5; */ color: #f5f5f5; */
text-decoration: underline; text-decoration: underline;
text-decoration-style: wavy; text-decoration-style: wavy;
text-decoration-color: #df8d8e; text-decoration-color: #df8d8e;
} }
.cm-s-style-mirror .CodeMirror-activeline-background { .cm-s-style-mirror .CodeMirror-activeline-background {
background: #dddcdc; background: #dddcdc;
} }
.cm-s-style-mirror .CodeMirror-matchingbracket { .cm-s-style-mirror .CodeMirror-matchingbracket {
color: rgb(32, 32, 32) !important; color: rgb(32, 32, 32) !important;
background-color: rgba(0, 0, 0, 0.1) !important; background-color: rgba(0, 0, 0, 0.1) !important;
} }

151
src/assets/less/theme.less
View File

@ -10,85 +10,94 @@
@nightButtonBg: #1e1e1e; @nightButtonBg: #1e1e1e;
@nightButtonHoverColor: #84868b; @nightButtonHoverColor: #84868b;
.container_night { .container_night {
background-color: @nightBgColor;
.el-main {
background-color: @nightBgColor; background-color: @nightBgColor;
.el-main { }
background-color: @nightBgColor; .CodeMirror {
caret-color: @nightFontColor;
color: @nightFontColor;
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
}
.output_night {
.preview {
background-color: @nightPreviewColor;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
} }
.CodeMirror { .preview-wrapper {
caret-color: @nightFontColor; background-color: @nightCodeMirrorColor;
color: @nightFontColor; box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
} }
.output_night { .code-snippet__fix {
.preview { background-color: rgb(238, 238, 238);
background-color: @nightPreviewColor;
box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
}
.preview-wrapper {
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
}
.code-snippet__fix {
background-color: rgb(238,238,238);
}
} }
.cm-s-style-mirror .CodeMirror-matchingbracket { }
color: @nightWhiteColor!important; .cm-s-style-mirror .CodeMirror-matchingbracket {
background: rgb(30, 30, 30)!important; color: @nightWhiteColor!important;
background: rgb(30, 30, 30) !important;
}
.cm-s-xq-light span.cm-variable-2,
.cm-s-style-mirror span.cm-tag {
color: @nightFontColor;
}
.cm-s-xq-light .CodeMirror-activeline-background {
background-color: transparent;
}
.cm-s-xq-light span.cm-string {
color: @nightLinkColor;
}
.cm-s-xq-light span.cm-link {
color: @nightLinkTextColor;
}
.editor__header {
background-color: @nightHeaderColor;
}
.el-button {
color: @nightWhiteColor;
background-color: @nightCodeMirrorColor;
border: 1px solid transparent;
}
.el-button.is-plain:focus,
.el-button.is-plain:hover {
background: @nightButtonBg;
color: @nightWhiteColor;
border: 1px solid @nightWhiteColor;
i {
color: @nightWhiteColor;
} }
.cm-s-xq-light span.cm-variable-2, .cm-s-style-mirror span.cm-tag { }
color: @nightFontColor; .insert__dialog,
.about__dialog,
.reset__dialog,
.upload__dialog {
.el-dialog {
background-color: @nightBgColor;
} }
.cm-s-xq-light .CodeMirror-activeline-background { .el-dialog__body {
background-color: transparent; color: @nightWhiteColor;
} }
.cm-s-xq-light span.cm-string { .el-dialog__title,
color: @nightLinkColor; .el-form-item__label {
color: @nightWhiteColor;
} }
.cm-s-xq-light span.cm-link { .el-tabs__item {
color: @nightLinkTextColor; color: @nightActiveCodeMirrorColor;
} }
.editor__header { .is-active {
background-color: @nightHeaderColor; color: @nightWhiteColor;
} }
.el-button { .el-upload-dragger {
color: @nightWhiteColor; background-color: @nightButtonBg;
background-color: @nightCodeMirrorColor;
border: 1px solid transparent;
} }
.el-button.is-plain:focus, .el-button.is-plain:hover { }
background: @nightButtonBg; ::v-deep .el-icon-upload,
color: @nightWhiteColor; .el-icon-download,
border: 1px solid @nightWhiteColor; .el-icon-refresh,
i { .el-icon-s-grid {
color: @nightWhiteColor; color: @nightWhiteColor;
} }
} ::-webkit-scrollbar {
.insert__dialog, .about__dialog, .reset__dialog, .upload__dialog { background-color: @nightCodeMirrorColor;
.el-dialog { }
background-color: @nightBgColor; }
}
.el-dialog__body {
color: @nightWhiteColor;
}
.el-dialog__title, .el-form-item__label {
color: @nightWhiteColor;
}
.el-tabs__item {
color: @nightActiveCodeMirrorColor;
}
.is-active {
color: @nightWhiteColor;
}
.el-upload-dragger {
background-color: @nightButtonBg;
}
}
::v-deep .el-icon-upload, .el-icon-download, .el-icon-refresh, .el-icon-s-grid {
color: @nightWhiteColor;
}
::-webkit-scrollbar {
background-color: @nightCodeMirrorColor;
}
}

45
src/components/CodemirrorEditor/aboutDialog.vue
View File

@ -1,15 +1,35 @@
<template> <template>
<el-dialog title="关于" class="about__dialog" :visible="value" @close="$emit('input', false)" width="30%" center> <el-dialog
<div style="text-align: center;"> title="关于"
class="about__dialog"
:visible="value"
@close="$emit('input', false)"
width="30%"
center
>
<div style="text-align: center">
<h3>一款高度简洁的微信 Markdown 编辑器</h3> <h3>一款高度简洁的微信 Markdown 编辑器</h3>
</div> </div>
<div style="text-align: center;margin-top:10px;"> <div style="text-align: center; margin-top: 10px">
<p>扫码关注我的公众号，原创技术文章第一时间推送！</p> <p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
<img src="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png" style="width: 40%; display: block; margin: 20px auto 10px;"> <img
src="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png"
style="width: 40%; display: block; margin: 20px auto 10px"
/>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" @click="onRedirect('https://github.com/doocs/md')" plain>GitHub 仓库</el-button> <el-button
<el-button type="primary" @click="onRedirect('https://gitee.com/doocs/md')" plain>Gitee 仓库</el-button> type="primary"
@click="onRedirect('https://github.com/doocs/md')"
plain
>GitHub 仓库</el-button
>
<el-button
type="primary"
@click="onRedirect('https://gitee.com/doocs/md')"
plain
>Gitee 仓库</el-button
>
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
@ -19,16 +39,15 @@ export default {
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
methods: { methods: {
onRedirect(url) { onRedirect(url) {
window.open(url); window.open(url);
} },
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped></style>
</style>

327
src/components/CodemirrorEditor/header.vue
View File

@ -1,162 +1,278 @@
<template> <template>
<el-container class="top is-dark"> <el-container class="top is-dark">
<!-- 图片上传 --> <!-- 图片上传 -->
<el-tooltip :effect="effect" content="上传图片" placement="bottom-start"> <el-tooltip
<i class="el-icon-upload" size="medium" @click="$emit('showDialogUploadImg')"></i> :effect="effect"
content="上传图片"
placement="bottom-start"
>
<i
class="el-icon-upload"
size="medium"
@click="$emit('showDialogUploadImg')"
></i>
</el-tooltip> </el-tooltip>
<!-- 下载文本文档 --> <!-- 下载文本文档 -->
<el-tooltip class="header__item" :effect="effect" content="下载编辑框Markdown文档" placement="bottom-start"> <el-tooltip
<i class="el-icon-download" size="medium" @click="$emit('downLoad')"></i> class="header__item"
:effect="effect"
content="下载编辑框Markdown文档"
placement="bottom-start"
>
<i
class="el-icon-download"
size="medium"
@click="$emit('downLoad')"
></i>
</el-tooltip> </el-tooltip>
<!-- 页面重置 --> <!-- 页面重置 -->
<el-tooltip class="header__item" :effect="effect" content="重置页面" placement="bottom-start"> <el-tooltip
<i class="el-icon-refresh" size="medium" @click="showResetConfirm = true"></i> class="header__item"
:effect="effect"
content="重置页面"
placement="bottom-start"
>
<i
class="el-icon-refresh"
size="medium"
@click="showResetConfirm = true"
></i>
</el-tooltip> </el-tooltip>
<!-- 插入表格 --> <!-- 插入表格 -->
<el-tooltip class="header__item header__item_last" :effect="effect" content="插入表格" placement="bottom-start"> <el-tooltip
<i class="el-icon-s-grid" size="medium" @click="$emit('showDialogForm')"></i> class="header__item header__item_last"
:effect="effect"
content="插入表格"
placement="bottom-start"
>
<i
class="el-icon-s-grid"
size="medium"
@click="$emit('showDialogForm')"
></i>
</el-tooltip> </el-tooltip>
<el-form size="mini" class="ctrl" :inline=true> <el-form size="mini" class="ctrl" :inline="true">
<el-form-item> <el-form-item>
<el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged"> <el-select
<el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value" v-model="selectFont"
:label="font.label" :value="font.value"> size="mini"
placeholder="选择字体"
clearable
@change="fontChanged"
>
<el-option
v-for="font in config.builtinFonts"
:style="{ fontFamily: font.value }"
:key="font.value"
:label="font.label"
:value="font.value"
>
<span class="select-item-left">{{ font.label }}</span> <span class="select-item-left">{{ font.label }}</span>
<span class="select-item-right">Abc</span> <span class="select-item-right">Abc</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged"> <el-select
<el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value"> v-model="selectSize"
size="mini"
placeholder="选择段落字号"
clearable
@change="sizeChanged"
>
<el-option
v-for="size in config.sizeOption"
:key="size.value"
:label="size.label"
:value="size.value"
>
<span class="select-item-left">{{ size.label }}</span> <span class="select-item-left">{{ size.label }}</span>
<span class="select-item-right">{{ size.desc }}</span> <span class="select-item-right">{{ size.desc }}</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged"> <el-select
<el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value"> v-model="selectColor"
size="mini"
placeholder="选择颜色"
clearable
@change="colorChanged"
>
<el-option
v-for="color in config.colorOption"
:key="color.value"
:label="color.label"
:value="color.value"
>
<span class="select-item-left">{{ color.label }}</span> <span class="select-item-left">{{ color.label }}</span>
<span class="select-item-right">{{ color.desc }}</span> <span class="select-item-right">{{ color.desc }}</span>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-tooltip content="自定义颜色" :effect="effect" placement="top"> <el-tooltip content="自定义颜色" :effect="effect" placement="top">
<el-color-picker v-model="selectColor" size="mini" show-alpha @change="colorChanged"></el-color-picker> <el-color-picker
v-model="selectColor"
size="mini"
show-alpha
@change="colorChanged"
></el-color-picker>
</el-tooltip> </el-tooltip>
<el-tooltip content="微信外链自动转为文末引用" :effect="effect" placement="top"> <el-tooltip
<el-switch class="header__switch" v-model="citeStatus" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged"> content="微信外链自动转为文末引用"
:effect="effect"
placement="top"
>
<el-switch
class="header__switch"
v-model="citeStatus"
active-color="#67c23a"
inactive-color="#dcdfe6"
@change="statusChanged"
>
</el-switch> </el-switch>
</el-tooltip> </el-tooltip>
</el-form> </el-form>
<el-tooltip class="item" :effect="effect" content="自定义CSS样式" placement="left"> <el-tooltip
<el-button :type="btnType" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button> class="item"
:effect="effect"
content="自定义CSS样式"
placement="left"
>
<el-button
:type="btnType"
plain
size="medium"
icon="el-icon-setting"
@click="customStyle"
></el-button>
</el-tooltip> </el-tooltip>
<el-button :type="btnType" plain size="medium" @click="copy" placement="bottom-start">复制</el-button> <el-button
<el-button :type="btnType" plain size="medium" class="about" @click="$emit('showAboutDialog')">关于</el-button> :type="btnType"
<el-tooltip :content="btnContent" :effect="effect" placement="bottom-start"> plain
<div class="mode__switch mode__switch_black" v-if="nightMode" @click="themeChanged"></div> size="medium"
@click="copy"
placement="bottom-start"
>复制</el-button
>
<el-button
:type="btnType"
plain
size="medium"
class="about"
@click="$emit('showAboutDialog')"
>关于</el-button
>
<el-tooltip
:content="btnContent"
:effect="effect"
placement="bottom-start"
>
<div
class="mode__switch mode__switch_black"
v-if="nightMode"
@click="themeChanged"
></div>
<div class="mode__switch" v-else @click="themeChanged"></div> <div class="mode__switch" v-else @click="themeChanged"></div>
</el-tooltip> </el-tooltip>
<resetDialog :showResetConfirm="showResetConfirm" @confirm="confirmReset" @close="cancelReset"/> <resetDialog
</el-container> :showResetConfirm="showResetConfirm"
@confirm="confirmReset"
@close="cancelReset"
/>
</el-container>
</template> </template>
<script> <script>
import { import {
downLoadMD, downLoadMD,
setFontSize, setFontSize,
fixCodeWhiteSpace, fixCodeWhiteSpace,
setColorWithCustomTemplate setColorWithCustomTemplate,
} from '../../assets/scripts/util' } from "../../assets/scripts/util";
import { import { solveWeChatImage, solveHtml } from "../../assets/scripts/converter";
solveWeChatImage, import config from "../../assets/scripts/config";
solveHtml import DEFAULT_CSS_CONTENT from "../../assets/scripts/themes/default-theme-css";
} from '../../assets/scripts/converter' import resetDialog from "./resetDialog";
import config from '../../assets/scripts/config' import { mapState, mapMutations } from "vuex";
import DEFAULT_CSS_CONTENT from '../../assets/scripts/themes/default-theme-css'
import resetDialog from './resetDialog'
import {mapState, mapMutations} from 'vuex'
export default { export default {
name: 'editor-header', name: "editor-header",
data() { data() {
return { return {
config: config, config: config,
citeStatus: false, citeStatus: false,
showResetConfirm: false, showResetConfirm: false,
selectFont: '', selectFont: "",
selectSize: '', selectSize: "",
selectColor: '', selectColor: "",
selectCodeTheme: 'github' selectCodeTheme: "github",
}; };
}, },
components: { components: {
resetDialog resetDialog,
}, },
computed: { computed: {
effect() { effect() {
return this.nightMode ? 'dark' : 'light' return this.nightMode ? "dark" : "light";
}, },
btnContent() { btnContent() {
return this.nightMode ? '浅色模式' : '暗黑模式' return this.nightMode ? "浅色模式" : "暗黑模式";
}, },
btnType() { btnType() {
return this.nightMode ? 'default' : 'primary'; return this.nightMode ? "default" : "primary";
}, },
...mapState({ ...mapState({
output: state => state.output, output: (state) => state.output,
editor: state => state.editor, editor: (state) => state.editor,
cssEditor: state => state.cssEditor, cssEditor: (state) => state.cssEditor,
currentFont: state => state.currentFont, currentFont: (state) => state.currentFont,
currentSize: state => state.currentSize, currentSize: (state) => state.currentSize,
currentColor: state => state.currentColor, currentColor: (state) => state.currentColor,
codeTheme: state => state.codeTheme, codeTheme: (state) => state.codeTheme,
nightMode: state => state.nightMode nightMode: (state) => state.nightMode,
}) }),
}, },
methods: { methods: {
fontChanged(fonts) { fontChanged(fonts) {
this.setWxRendererOptions({ this.setWxRendererOptions({
fonts: fonts fonts: fonts,
}); });
this.setCurrentFont(fonts); this.setCurrentFont(fonts);
this.$emit('refresh'); this.$emit("refresh");
}, },
sizeChanged(size) { sizeChanged(size) {
let theme = setFontSize(size.replace('px', '')) let theme = setFontSize(size.replace("px", ""));
theme = setColorWithCustomTemplate(theme, this.currentColor) theme = setColorWithCustomTemplate(theme, this.currentColor);
this.setWxRendererOptions({ this.setWxRendererOptions({
size: size, size: size,
theme: theme theme: theme,
}); });
this.setCurrentSize(size); this.setCurrentSize(size);
this.$emit('refresh'); this.$emit("refresh");
}, },
colorChanged(color) { colorChanged(color) {
let theme = setFontSize(this.currentSize.replace('px', '')); let theme = setFontSize(this.currentSize.replace("px", ""));
theme = setColorWithCustomTemplate(theme, color); theme = setColorWithCustomTemplate(theme, color);
this.setWxRendererOptions({ this.setWxRendererOptions({
theme: theme theme: theme,
}); });
this.setCurrentColor(color); this.setCurrentColor(color);
this.$emit('refresh'); this.$emit("refresh");
}, },
codeThemeChanged(theme) { codeThemeChanged(theme) {
this.setCurrentCodeTheme(theme); this.setCurrentCodeTheme(theme);
this.$emit('refresh'); this.$emit("refresh");
}, },
statusChanged(val) { statusChanged(val) {
this.setCiteStatus(val); this.setCiteStatus(val);
this.$emit('refresh'); this.$emit("refresh");
}, },
// 复制到微信公众号 // 复制到微信公众号
copy(e) { copy(e) {
this.$emit('startCopy'); this.$emit("startCopy");
setTimeout(() => { setTimeout(() => {
let clipboardDiv = document.getElementById('output'); let clipboardDiv = document.getElementById("output");
solveWeChatImage(); solveWeChatImage();
fixCodeWhiteSpace(); fixCodeWhiteSpace();
solveHtml(); solveHtml();
@ -167,36 +283,37 @@ export default {
range.setStartBefore(clipboardDiv.firstChild); range.setStartBefore(clipboardDiv.firstChild);
range.setEndAfter(clipboardDiv.lastChild); range.setEndAfter(clipboardDiv.lastChild);
window.getSelection().addRange(range); window.getSelection().addRange(range);
document.execCommand('copy'); document.execCommand("copy");
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges();
fixCodeWhiteSpace('normal'); fixCodeWhiteSpace("normal");
clipboardDiv.innerHTML = this.output; clipboardDiv.innerHTML = this.output;
// 输出提示 // 输出提示
this.$notify({ this.$notify({
showClose: true, showClose: true,
message: '已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴', message:
"已复制渲染后的文章到剪贴板，可直接到公众号后台粘贴",
offset: 80, offset: 80,
duration: 1600, duration: 1600,
type: 'success' type: "success",
}); });
this.$emit('refresh'); this.$emit("refresh");
this.$emit('endCopy'); this.$emit("endCopy");
}, 350); }, 350);
e.target.blur(); e.target.blur();
}, },
// 自定义CSS样式 // 自定义CSS样式
async customStyle() { async customStyle() {
this.$emit('showCssEditor'); this.$emit("showCssEditor");
this.$nextTick(() => { this.$nextTick(() => {
if(!this.cssEditor) { if (!this.cssEditor) {
this.cssEditor.refresh(); this.cssEditor.refresh();
} }
}) });
setTimeout(() => { setTimeout(() => {
this.cssEditor.refresh(); this.cssEditor.refresh();
},50) }, 50);
let flag = await localStorage.getItem('__css_content'); let flag = await localStorage.getItem("__css_content");
if (!flag) { if (!flag) {
this.setCssEditorValue(DEFAULT_CSS_CONTENT); this.setCssEditorValue(DEFAULT_CSS_CONTENT);
@ -204,15 +321,15 @@ export default {
}, },
// 重置页面 // 重置页面
confirmReset() { confirmReset() {
localStorage.clear() localStorage.clear();
this.clearEditorToDefault(); this.clearEditorToDefault();
this.editor.focus() this.editor.focus();
this.citeStatus = false; this.citeStatus = false;
this.statusChanged(false); this.statusChanged(false);
this.fontChanged(this.config.builtinFonts[0].value) this.fontChanged(this.config.builtinFonts[0].value);
this.colorChanged(this.config.colorOption[1].value) this.colorChanged(this.config.colorOption[1].value);
this.sizeChanged(this.config.sizeOption[2].value) this.sizeChanged(this.config.sizeOption[2].value);
this.$emit('cssChanged') this.$emit("cssChanged");
this.selectFont = this.currentFont; this.selectFont = this.currentFont;
this.selectSize = this.currentSize; this.selectSize = this.currentSize;
this.selectColor = this.currentColor; this.selectColor = this.currentColor;
@ -220,27 +337,27 @@ export default {
}, },
cancelReset() { cancelReset() {
this.showResetConfirm = false; this.showResetConfirm = false;
this.editor.focus() this.editor.focus();
}, },
...mapMutations([ ...mapMutations([
'clearEditorToDefault', "clearEditorToDefault",
'setCurrentColor', "setCurrentColor",
'setCiteStatus', "setCiteStatus",
'themeChanged', "themeChanged",
'setCurrentFont', "setCurrentFont",
'setCurrentSize', "setCurrentSize",
'setCssEditorValue', "setCssEditorValue",
'setCurrentCodeTheme', "setCurrentCodeTheme",
'setWxRendererOptions' "setWxRendererOptions",
]) ]),
}, },
mounted() { mounted() {
this.selectFont = this.currentFont; this.selectFont = this.currentFont;
this.selectSize = this.currentSize; this.selectSize = this.currentSize;
this.selectColor = this.currentColor; this.selectColor = this.currentColor;
this.selectCodeTheme = this.codeTheme; this.selectCodeTheme = this.codeTheme;
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -260,15 +377,15 @@ export default {
margin-left: 24px; margin-left: 24px;
width: 24px; width: 24px;
height: 24px; height: 24px;
background: url('../../assets/images/night.png') no-repeat; background: url("../../assets/images/night.png") no-repeat;
background-size: cover; background-size: cover;
transition: all .3s; transition: all 0.3s;
} }
.mode__switch_black { .mode__switch_black {
background: url('../../assets/images/light.png') no-repeat; background: url("../../assets/images/light.png") no-repeat;
background-size: cover; background-size: cover;
} }
.top { .top {
margin-right: 0; margin-right: 0;
} }
</style> </style>

109
src/components/CodemirrorEditor/insertForm.vue
View File

@ -6,66 +6,71 @@
@close="$emit('input', false)" @close="$emit('input', false)"
border border
> >
<el-row class="tb-options" type="flex" align="middle" :gutter="10"> <el-row class="tb-options" type="flex" align="middle" :gutter="10">
<el-col> <el-col>
行数： 行数：
<el-input-number <el-input-number
v-model="rowNum" v-model="rowNum"
controls-position="right" controls-position="right"
:min="1" :min="1"
:max="100" :max="100"
size="small" size="small"
></el-input-number> ></el-input-number>
</el-col> </el-col>
<el-col> <el-col>
列数： 列数：
<el-input-number <el-input-number
v-model="colNum" v-model="colNum"
controls-position="right" controls-position="right"
:min="1" :min="1"
:max="100" :max="100"
size="small" size="small"
></el-input-number> ></el-input-number>
</el-col> </el-col>
</el-row> </el-row>
<table style="border-collapse: collapse" class="input-table"> <table style="border-collapse: collapse" class="input-table">
<tr :class="{ 'head-style': row === 1 }" v-for="row in rowNum+1" :key="row"> <tr
<td v-for="col in colNum" :key="col"> :class="{ 'head-style': row === 1 }"
<el-input v-for="row in rowNum + 1"
align="center" :key="row"
v-model="tableData[`k_${row-1}_${col-1}`]" >
:placeholder="row===1?'表头':''" <td v-for="col in colNum" :key="col">
/> <el-input
</td> align="center"
</tr> v-model="tableData[`k_${row - 1}_${col - 1}`]"
</table> :placeholder="row === 1 ? '表头' : ''"
<div slot="footer" class="dialog-footer"> />
<el-button :type="btnType" plain @click="$emit('input', false)">取 消</el-button> </td>
<el-button :type="btnType" @click="insertTable" plain>确 定</el-button> </tr>
</div> </table>
</el-dialog> <div slot="footer" class="dialog-footer">
<el-button :type="btnType" plain @click="$emit('input', false)"
>取 消</el-button
>
<el-button :type="btnType" @click="insertTable" plain
>确 定</el-button
>
</div>
</el-dialog>
</template> </template>
<script> <script>
import config from "../../assets/scripts/config"; import config from "../../assets/scripts/config";
import {createTable} from '../../assets/scripts/util'; import { createTable } from "../../assets/scripts/util";
import { import { mapState, mapMutations } from "vuex";
mapState,
mapMutations
} from "vuex";
export default { export default {
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}, },
data() { data() {
return { return {
config: config, config: config,
rowNum: 3, rowNum: 3,
colNum: 3, colNum: 3,
tableData: {} tableData: {},
}; };
}, },
computed: { computed: {
@ -73,9 +78,9 @@ export default {
return this.nightMode ? "default" : "primary"; return this.nightMode ? "default" : "primary";
}, },
...mapState({ ...mapState({
nightMode: state => state.nightMode, nightMode: (state) => state.nightMode,
editor: state => state.editor editor: (state) => state.editor,
}) }),
}, },
methods: { methods: {
// 插入表格 // 插入表格
@ -84,18 +89,18 @@ export default {
const table = createTable({ const table = createTable({
data: this.tableData, data: this.tableData,
rows: this.rowNum, rows: this.rowNum,
cols: this.colNum cols: this.colNum,
}); });
this.tableData = {}; this.tableData = {};
this.rowNum = 3; this.rowNum = 3;
this.colNum = 3; this.colNum = 3;
this.editor.replaceSelection(`\n${table}\n`, "end"); this.editor.replaceSelection(`\n${table}\n`, "end");
this.$emit('input', false); this.$emit("input", false);
this.editorRefresh(); this.editorRefresh();
}, },
...mapMutations(["editorRefresh"]) ...mapMutations(["editorRefresh"]),
} },
}; };
</script> </script>

69
src/components/CodemirrorEditor/resetDialog.vue
View File

@ -1,49 +1,54 @@
<template> <template>
<el-dialog title="提示" class="reset__dialog" :visible="showResetConfirm" @close="$emit('close')"> <el-dialog
title="提示"
class="reset__dialog"
:visible="showResetConfirm"
@close="$emit('close')"
>
<div class="text"> <div class="text">
此操作将丢失本地缓存的文本和自定义样式，是否继续? 此操作将丢失本地缓存的文本和自定义样式，是否继续?
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button :type="btnType" plain @click="$emit('close')">取 消</el-button> <el-button :type="btnType" plain @click="$emit('close')"
<el-button :type="btnType" @click="$emit('confirm')" plain>确 定</el-button> >取 消</el-button
>
<el-button :type="btnType" @click="$emit('confirm')" plain
>确 定</el-button
>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { import { mapState } from "vuex";
mapState export default {
} from 'vuex'; props: {
export default { showResetConfirm: {
props: { type: Boolean,
showResetConfirm: { default: false,
type: Boolean,
default: false
}
}, },
computed: { },
btnType() { computed: {
return this.nightMode ? 'default' : 'primary'; btnType() {
}, return this.nightMode ? "default" : "primary";
...mapState({ },
nightMode: state => state.nightMode ...mapState({
}) nightMode: (state) => state.nightMode,
} }),
} },
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.reset__dialog { .reset__dialog {
text-align: center; text-align: center;
} }
.text { .text {
text-align: center; text-align: center;
} }
.dialog-footer {
text-align: center;
}
.dialog-footer {
text-align: center;
}
</style> </style>

69
src/components/CodemirrorEditor/rightClickMenu.vue
View File

@ -1,62 +1,70 @@
<template> <template>
<ul v-show="value" id="menu" class="menu" :style="`left: ${left}px;top: ${top}px;`"> <ul
<li v-for="item of list" :key="item.key" class="menu_item" @mousedown="onMouseDown(item.key)"> v-show="value"
<span>{{item.text}}</span> id="menu"
class="menu"
:style="`left: ${left}px;top: ${top}px;`"
>
<li
v-for="item of list"
:key="item.key"
class="menu_item"
@mousedown="onMouseDown(item.key)"
>
<span>{{ item.text }}</span>
</li> </li>
</ul> </ul>
</template> </template>
<script> <script>
import { import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
uploadImgFile,
} from '../../assets/scripts/uploadImageFile';
export default { export default {
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
top: { top: {
type: Number, type: Number,
default: 0 default: 0,
}, },
left: { left: {
type: Number, type: Number,
default: 0 default: 0,
} },
}, },
data() { data() {
return { return {
list: [ list: [
{ {
text: '上传图片', text: "上传图片",
key: 'insertPic' key: "insertPic",
}, },
{ {
text: '插入表格', text: "插入表格",
key: 'insertTable' key: "insertTable",
}, },
{ {
text: '页面重置', text: "页面重置",
key: 'pageReset' key: "pageReset",
}, },
{ {
text: '下载MD文档', text: "下载MD文档",
key: 'downLoad' key: "downLoad",
} },
] ],
} };
}, },
methods: { methods: {
closeCB() { closeCB() {
this.$emit('input', false); this.$emit("input", false);
},
onMouseDown(key) {
this.$emit("menuTick", key);
this.$emit("closeMenu", false);
}, },
onMouseDown(key){
this.$emit('menuTick', key)
this.$emit('closeMenu', false)
}
}, },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -83,7 +91,8 @@ export default {
color: white; color: white;
background: rgb(139, 146, 148); background: rgb(139, 146, 148);
} }
span,.btn-upload { span,
.btn-upload {
text-align: center; text-align: center;
display: inline-block; display: inline-block;
padding: 4px 0; padding: 4px 0;
@ -91,7 +100,7 @@ export default {
} }
.btn-upload { .btn-upload {
margin: 0; margin: 0;
border:none; border: none;
outline: none; outline: none;
background: transparent; background: transparent;
} }
@ -104,7 +113,6 @@ export default {
} }
} }
li:hover { li:hover {
background-color: #1790ff; background-color: #1790ff;
color: white; color: white;
@ -114,5 +122,4 @@ li {
font-size: 15px; font-size: 15px;
list-style: none; list-style: none;
} }
</style> </style>

775
src/components/CodemirrorEditor/uploadImgDialog.vue
View File

@ -1,323 +1,452 @@
<template> <template>
<el-dialog title="本地上传" class="upload__dialog" :visible="value" @close="$emit('close')"> <el-dialog
<el-tabs type="card" :value="'upload'"> title="本地上传"
<el-tab-pane class="upload-panel" label="选择上传" name="upload"> class="upload__dialog"
<el-select v-model="imgHost" @change="changeImgHost" placeholder="请选择" size="small"> :visible="value"
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> @close="$emit('close')"
</el-option> >
</el-select> <el-tabs type="card" :value="'upload'">
<el-upload drag action :headers="{'Content-Type': 'multipart/form-data'}" :show-file-list="false" <el-tab-pane class="upload-panel" label="选择上传" name="upload">
:multiple="true" accept=".jpg, .jpeg, .png, .gif" name="file" :before-upload="beforeUpload" <el-select
v-loading="uploadingImg"> v-model="imgHost"
<i class="el-icon-upload"></i> @change="changeImgHost"
<div class="el-upload__text"> placeholder="请选择"
将图片拖到此处，或 size="small"
<em>点击上传</em> >
</div> <el-option
</el-upload> v-for="item in options"
</el-tab-pane> :key="item.value"
<el-tab-pane class="github-panel" label="GitHub 图床" name="github"> :label="item.label"
<el-form class="setting-form" ref="form" :model="formGitHub" label-position="right" label-width="140px"> :value="item.value"
<el-form-item label="GitHub 仓库" :required="true"> >
<el-input v-model.trim="formGitHub.repo" placeholder="如：github.com/yanglbme/resource"></el-input> </el-option>
</el-form-item> </el-select>
<el-form-item label="分支"> <el-upload
<el-input v-model.trim="formGitHub.branch" placeholder="如：release，可不填，默认 master"></el-input> drag
</el-form-item> action
<el-form-item label="Token" :required="true"> :headers="{ 'Content-Type': 'multipart/form-data' }"
<el-input v-model.trim="formGitHub.accessToken" show-password :show-file-list="false"
placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"></el-input> :multiple="true"
<el-link type="primary" accept=".jpg, .jpeg, .png, .gif"
href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token" name="file"
target="_blank">如何获取 GitHub Token？</el-link> :before-upload="beforeUpload"
</el-form-item> v-loading="uploadingImg"
<el-form-item> >
<el-button type="primary" @click="saveGitHubConfiguration">保存配置</el-button> <i class="el-icon-upload"></i>
</el-form-item> <div class="el-upload__text">
</el-form> 将图片拖到此处，或
</el-tab-pane> <em>点击上传</em>
<el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS"> </div>
<el-form class="setting-form" ref="form" :model="formAliOSS" label-position="right" label-width="140px"> </el-upload>
<el-form-item label="AccessKey ID" :required="true"> </el-tab-pane>
<el-input v-model.trim="formAliOSS.accessKeyId" placeholder="如：LTAI4GdoocsmdoxUf13ylbaNHk"></el-input> <el-tab-pane class="github-panel" label="GitHub 图床" name="github">
</el-form-item> <el-form
<el-form-item label="AccessKey Secret" :required="true"> class="setting-form"
<el-input v-model.trim="formAliOSS.accessKeySecret" show-password ref="form"
placeholder="如：cc1d0c142doocs0902bd2d7md4b14da6ylbabc46"></el-input> :model="formGitHub"
</el-form-item> label-position="right"
<el-form-item label="Bucket" :required="true"> label-width="140px"
<el-input v-model.trim="formAliOSS.bucket" >
placeholder="如：doocs"></el-input> <el-form-item label="GitHub 仓库" :required="true">
</el-form-item> <el-input
<el-form-item label="Bucket 所在区域" :required="true"> v-model.trim="formGitHub.repo"
<el-input v-model.trim="formAliOSS.region" placeholder="如：github.com/yanglbme/resource"
placeholder="如：oss-cn-shenzhen"></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="自定义 CDN 域名" :required="false"> <el-form-item label="分支">
<el-input v-model.trim="formAliOSS.cdnHost" <el-input
placeholder="如：https://imagecdn.alidaodao.com，可不填"></el-input> v-model.trim="formGitHub.branch"
</el-form-item> placeholder="如：release，可不填，默认 master"
<el-form-item label="存储路径"> ></el-input>
<el-input v-model.trim="formAliOSS.path" </el-form-item>
placeholder="如：img，可不填，默认为根目录"></el-input> <el-form-item label="Token" :required="true">
<el-link type="primary" <el-input
href="https://help.aliyun.com/document_detail/31883.html" v-model.trim="formGitHub.accessToken"
target="_blank">如何使用阿里云 OSS？</el-link> show-password
</el-form-item> placeholder="如：cc1d0c1426d0fd0902bd2d7184b14da61b8abc46"
<el-form-item> ></el-input>
<el-button type="primary" @click="saveAliOSSConfiguration">保存配置</el-button> <el-link
</el-form-item> type="primary"
</el-form> href="https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token"
</el-tab-pane> target="_blank"
<el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS"> >如何获取 GitHub Token？</el-link
<el-form class="setting-form" ref="form" :model="formTxCOS" label-position="right" label-width="140px"> >
<el-form-item label="SecretId" :required="true"> </el-form-item>
<el-input v-model.trim="formTxCOS.secretId" placeholder="如：AKIDnQp1w3DOOCSs8F5MDp9tdoocsmdUPonW3"></el-input> <el-form-item>
</el-form-item> <el-button
<el-form-item label="SecretKey" :required="true"> type="primary"
<el-input v-model.trim="formTxCOS.secretKey" show-password @click="saveGitHubConfiguration"
placeholder="如：ukLmdtEJ9271f3DOocsMDsCXdS3YlbW0"></el-input> >保存配置</el-button
</el-form-item> >
<el-form-item label="Bucket" :required="true"> </el-form-item>
<el-input v-model.trim="formTxCOS.bucket" </el-form>
placeholder="如：doocs-3212520134"></el-input> </el-tab-pane>
</el-form-item> <el-tab-pane class="github-panel" label="阿里云 OSS" name="aliOSS">
<el-form-item label="Bucket 所在区域" :required="true"> <el-form
<el-input v-model.trim="formTxCOS.region" class="setting-form"
placeholder="如：ap-guangzhou"></el-input> ref="form"
</el-form-item> :model="formAliOSS"
<el-form-item label="自定义 CDN 域名" :required="false"> label-position="right"
<el-input v-model.trim="formTxCOS.cdnHost" label-width="140px"
placeholder="如：https://imagecdn.alidaodao.com，可不填"></el-input> >
</el-form-item> <el-form-item label="AccessKey ID" :required="true">
<el-form-item label="存储路径"> <el-input
<el-input v-model.trim="formTxCOS.path" v-model.trim="formAliOSS.accessKeyId"
placeholder="如：img，可不填，默认根目录"></el-input> placeholder="如：LTAI4GdoocsmdoxUf13ylbaNHk"
<el-link type="primary" ></el-input>
href="https://cloud.tencent.com/document/product/436/38484" </el-form-item>
target="_blank">如何使用腾讯云 COS？</el-link> <el-form-item label="AccessKey Secret" :required="true">
</el-form-item> <el-input
<el-form-item> v-model.trim="formAliOSS.accessKeySecret"
<el-button type="primary" @click="saveTxCOSConfiguration">保存配置</el-button> show-password
</el-form-item> placeholder="如：cc1d0c142doocs0902bd2d7md4b14da6ylbabc46"
</el-form> ></el-input>
</el-tab-pane> </el-form-item>
</el-tabs> <el-form-item label="Bucket" :required="true">
</el-dialog> <el-input
</template> v-model.trim="formAliOSS.bucket"
placeholder="如：doocs"
<script> ></el-input>
import { </el-form-item>
uploadImgFile <el-form-item label="Bucket 所在区域" :required="true">
} from "../../assets/scripts/uploadImageFile"; <el-input
v-model.trim="formAliOSS.region"
export default { placeholder="如：oss-cn-shenzhen"
props: { ></el-input>
value: { </el-form-item>
type: Boolean, <el-form-item label="自定义 CDN 域名" :required="false">
default: false, <el-input
}, v-model.trim="formAliOSS.cdnHost"
}, placeholder="如：https://imagecdn.alidaodao.com，可不填"
data() { ></el-input>
return { </el-form-item>
formGitHub: { <el-form-item label="存储路径">
repo: "", <el-input
branch: "", v-model.trim="formAliOSS.path"
accessToken: "", placeholder="如：img，可不填，默认为根目录"
}, ></el-input>
formAliOSS: { <el-link
accessKeyId: "", type="primary"
accessKeySecret: "", href="https://help.aliyun.com/document_detail/31883.html"
bucket: "", target="_blank"
region: "", >如何使用阿里云 OSS？</el-link
path: "", >
cdnHost: "", </el-form-item>
}, <el-form-item>
formTxCOS: { <el-button
secretId: "", type="primary"
secretKey: "", @click="saveAliOSSConfiguration"
bucket: "", >保存配置</el-button
region: "", >
path: "", </el-form-item>
cdnHost: "", </el-form>
}, </el-tab-pane>
options: [{ <el-tab-pane class="github-panel" label="腾讯云 COS" name="txCOS">
value: "default", <el-form
label: "默认图床", class="setting-form"
}, ref="form"
{ :model="formTxCOS"
value: "github", label-position="right"
label: "GitHub", label-width="140px"
}, >
{ <el-form-item label="SecretId" :required="true">
value: "aliOSS", <el-input
label: "阿里云" v-model.trim="formTxCOS.secretId"
}, placeholder="如：AKIDnQp1w3DOOCSs8F5MDp9tdoocsmdUPonW3"
{ ></el-input>
value: "txCOS", </el-form-item>
label: "腾讯云" <el-form-item label="SecretKey" :required="true">
} <el-input
], v-model.trim="formTxCOS.secretKey"
imgHost: "default", show-password
uploadingImg: false, placeholder="如：ukLmdtEJ9271f3DOocsMDsCXdS3YlbW0"
}; ></el-input>
}, </el-form-item>
created() { <el-form-item label="Bucket" :required="true">
if (localStorage.getItem("githubConfig")) { <el-input
this.formGitHub = JSON.parse(localStorage.getItem("githubConfig")); v-model.trim="formTxCOS.bucket"
} placeholder="如：doocs-3212520134"
if (localStorage.getItem("aliOSSConfig")) { ></el-input>
this.formAliOSS = JSON.parse(localStorage.getItem("aliOSSConfig")); </el-form-item>
} <el-form-item label="Bucket 所在区域" :required="true">
if (localStorage.getItem("txCOSConfig")) { <el-input
this.formTxCOS = JSON.parse(localStorage.getItem("txCOSConfig")); v-model.trim="formTxCOS.region"
} placeholder="如：ap-guangzhou"
if (localStorage.getItem("imgHost")) { ></el-input>
this.imgHost = localStorage.getItem("imgHost"); </el-form-item>
} <el-form-item label="自定义 CDN 域名" :required="false">
}, <el-input
methods: { v-model.trim="formTxCOS.cdnHost"
changeImgHost() { placeholder="如：https://imagecdn.alidaodao.com，可不填"
localStorage.setItem("imgHost", this.imgHost); ></el-input>
this.$message({ </el-form-item>
showClose: true, <el-form-item label="存储路径">
message: '已成功切换图床', <el-input
type: "success", v-model.trim="formTxCOS.path"
}); placeholder="如：img，可不填，默认根目录"
}, ></el-input>
saveGitHubConfiguration() { <el-link
if (!(this.formGitHub.repo && this.formGitHub.accessToken)) { type="primary"
const blankElement = this.formGitHub.repo ? "token" : "GitHub 仓库" href="https://cloud.tencent.com/document/product/436/38484"
this.$message({ target="_blank"
showClose: true, >如何使用腾讯云 COS？</el-link
message: `参数「​${blankElement}」不能为空`, >
type: "error", </el-form-item>
}); <el-form-item>
return; <el-button
} type="primary"
localStorage.setItem("githubConfig", JSON.stringify(this.formGitHub)); @click="saveTxCOSConfiguration"
this.$message({ >保存配置</el-button
message: "保存成功", >
type: "success", </el-form-item>
}); </el-form>
}, </el-tab-pane>
saveAliOSSConfiguration() { </el-tabs>
if (!(this.formAliOSS.accessKeyId && this.formAliOSS.accessKeySecret && this.formAliOSS.bucket && this.formAliOSS.region)) { </el-dialog>
this.$message({ </template>
showClose: true,
message: `阿里云 OSS 参数配置不全`, <script>
type: "error", import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
});
return; export default {
} props: {
localStorage.setItem("aliOSSConfig", JSON.stringify(this.formAliOSS)); value: {
this.$message({ type: Boolean,
message: "保存成功", default: false,
type: "success", },
}); },
}, data() {
return {
saveTxCOSConfiguration() { formGitHub: {
if (!(this.formTxCOS.secretId && this.formTxCOS.secretKey && this.formTxCOS.bucket && this.formTxCOS.region)) { repo: "",
this.$message({ branch: "",
showClose: true, accessToken: "",
message: `腾讯云 COS 参数配置不全`, },
type: "error", formAliOSS: {
}); accessKeyId: "",
return; accessKeySecret: "",
} bucket: "",
localStorage.setItem("txCOSConfig", JSON.stringify(this.formTxCOS)); region: "",
this.$message({ path: "",
message: "保存成功", cdnHost: "",
type: "success", },
}); formTxCOS: {
}, secretId: "",
secretKey: "",
// 图片上传前的处理 bucket: "",
beforeUpload(file) { region: "",
if (!this.validateConfig()) { path: "",
return; cdnHost: "",
} },
options: [
this.uploadingImg = true; {
uploadImgFile(file) value: "default",
.then(res => { label: "默认图床",
this.$emit("uploaded", res); },
this.uploadingImg = false; {
}) value: "github",
.catch(err => { label: "GitHub",
this.uploadingImg = false; },
this.$message({ {
showClose: true, value: "aliOSS",
message: err, label: "阿里云",
type: "error", },
}); {
}); value: "txCOS",
return false; label: "腾讯云",
}, },
validateConfig() { ],
let checkRes = true, errMessage = ''; imgHost: "default",
uploadingImg: false,
switch (localStorage.getItem('imgHost')) { };
case 'github': },
checkRes = this.formGitHub.repo && this.formGitHub.accessToken; created() {
errMessage = checkRes ? '' : '请先配置 GitHub 图床参数'; if (localStorage.getItem("githubConfig")) {
break; this.formGitHub = JSON.parse(localStorage.getItem("githubConfig"));
case 'aliOSS': }
checkRes = this.formAliOSS.accessKeyId && this.formAliOSS.accessKeySecret && this.formAliOSS.bucket && this.formAliOSS.region; if (localStorage.getItem("aliOSSConfig")) {
errMessage = checkRes ? '' : '请先配置阿里云 OSS 参数'; this.formAliOSS = JSON.parse(localStorage.getItem("aliOSSConfig"));
break; }
case 'txCOS': if (localStorage.getItem("txCOSConfig")) {
checkRes = this.formTxCOS.secretId && this.formTxCOS.secretKey && this.formTxCOS.bucket && this.formTxCOS.region; this.formTxCOS = JSON.parse(localStorage.getItem("txCOSConfig"));
errMessage = checkRes ? '' : '请先配置腾讯云 COS 参数'; }
break; if (localStorage.getItem("imgHost")) {
} this.imgHost = localStorage.getItem("imgHost");
errMessage && this.$message.error(errMessage); }
return checkRes; },
}, methods: {
}, changeImgHost() {
}; localStorage.setItem("imgHost", this.imgHost);
</script> this.$message({
showClose: true,
<style lang="less" scoped> message: "已成功切换图床",
/deep/ .el-dialog { type: "success",
width: 40%; });
} },
/deep/ .el-upload-dragger { saveGitHubConfiguration() {
width: 335px; if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
} const blankElement = this.formGitHub.repo
/deep/ .el-dialog__body { ? "token"
padding-bottom: 50px; : "GitHub 仓库";
} this.$message({
.upload-panel { showClose: true,
display: flex; message: `参数「​${blankElement}」不能为空`,
flex-direction: column; type: "error",
justify-content: center; });
align-items: center; return;
text-align: center; }
localStorage.setItem(
.el-select { "githubConfig",
align-self: flex-end; JSON.stringify(this.formGitHub)
margin: 0 67.75px 20px; );
width: 100px; this.$message({
} message: "保存成功",
} type: "success",
});
.github-panel { },
display: flex; saveAliOSSConfiguration() {
justify-content: center; if (
} !(
this.formAliOSS.accessKeyId &&
.setting-form { this.formAliOSS.accessKeySecret &&
width: 100%; this.formAliOSS.bucket &&
this.formAliOSS.region
.el-form-item { )
margin: 15px; ) {
} this.$message({
showClose: true,
.el-form-item:last-child { message: `阿里云 OSS 参数配置不全`,
text-align: right; type: "error",
} });
} return;
}
</style> localStorage.setItem(
"aliOSSConfig",
JSON.stringify(this.formAliOSS)
);
this.$message({
message: "保存成功",
type: "success",
});
},
saveTxCOSConfiguration() {
if (
!(
this.formTxCOS.secretId &&
this.formTxCOS.secretKey &&
this.formTxCOS.bucket &&
this.formTxCOS.region
)
) {
this.$message({
showClose: true,
message: `腾讯云 COS 参数配置不全`,
type: "error",
});
return;
}
localStorage.setItem("txCOSConfig", JSON.stringify(this.formTxCOS));
this.$message({
message: "保存成功",
type: "success",
});
},
// 图片上传前的处理
beforeUpload(file) {
if (!this.validateConfig()) {
return;
}
this.uploadingImg = true;
uploadImgFile(file)
.then((res) => {
this.$emit("uploaded", res);
this.uploadingImg = false;
})
.catch((err) => {
this.uploadingImg = false;
this.$message({
showClose: true,
message: err,
type: "error",
});
});
return false;
},
validateConfig() {
let checkRes = true,
errMessage = "";
switch (localStorage.getItem("imgHost")) {
case "github":
checkRes =
this.formGitHub.repo && this.formGitHub.accessToken;
errMessage = checkRes ? "" : "请先配置 GitHub 图床参数";
break;
case "aliOSS":
checkRes =
this.formAliOSS.accessKeyId &&
this.formAliOSS.accessKeySecret &&
this.formAliOSS.bucket &&
this.formAliOSS.region;
errMessage = checkRes ? "" : "请先配置阿里云 OSS 参数";
break;
case "txCOS":
checkRes =
this.formTxCOS.secretId &&
this.formTxCOS.secretKey &&
this.formTxCOS.bucket &&
this.formTxCOS.region;
errMessage = checkRes ? "" : "请先配置腾讯云 COS 参数";
break;
}
errMessage && this.$message.error(errMessage);
return checkRes;
},
},
};
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
width: 40%;
}
/deep/ .el-upload-dragger {
width: 335px;
}
/deep/ .el-dialog__body {
padding-bottom: 50px;
}
.upload-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
.el-select {
align-self: flex-end;
margin: 0 67.75px 20px;
width: 100px;
}
}
.github-panel {
display: flex;
justify-content: center;
}
.setting-form {
width: 100%;
.el-form-item {
margin: 15px;
}
.el-form-item:last-child {
text-align: right;
}
}
</style>

5
src/components/Loading.vue
View File

@ -7,8 +7,7 @@
</div> </div>
</template> </template>
<script> <script></script>
</script>
<style lang="less" scoped> <style lang="less" scoped>
.loading-wrapper { .loading-wrapper {
@ -42,7 +41,7 @@
display: inline-block; display: inline-block;
width: 100px; width: 100px;
height: 100px; height: 100px;
background: url('../assets/images/favicon.png') no-repeat; background: url("../assets/images/favicon.png") no-repeat;
background-size: cover; background-size: cover;
} }
</style> </style>

311
src/view/CodemirrorEditor.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="container" :class="{'container_night': nightMode}"> <div class="container" :class="{ container_night: nightMode }">
<el-container> <el-container>
<el-header class="editor__header"> <el-header class="editor__header">
<editor-header <editor-header
@ -11,40 +11,72 @@
@showAboutDialog="aboutDialogVisible = true" @showAboutDialog="aboutDialogVisible = true"
@showDialogForm="dialogFormVisible = true" @showDialogForm="dialogFormVisible = true"
@showDialogUploadImg="dialogUploadImgVisible = true" @showDialogUploadImg="dialogUploadImgVisible = true"
@startCopy="isCoping = true, backLight = true" @startCopy="(isCoping = true), (backLight = true)"
@endCopy="endCopy" @endCopy="endCopy"
/> />
</el-header> </el-header>
<el-main class="main-body"> <el-main class="main-body">
<el-row class="main-section"> <el-row class="main-section">
<el-col :span="12" @contextmenu.prevent.native="openMenu($event)"> <el-col
<textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source"> :span="12"
@contextmenu.prevent.native="openMenu($event)"
>
<textarea
id="editor"
type="textarea"
placeholder="Your markdown text here."
v-model="source"
>
</textarea> </textarea>
</el-col> </el-col>
<el-col :span="12" class="preview-wrapper" id="preview" ref="preview" :class="{'preview-wrapper_night': nightMode && isCoping}"> <el-col
<section id="output-wrapper" :class="{'output_night': nightMode && !backLight}"> :span="12"
class="preview-wrapper"
id="preview"
ref="preview"
:class="{
'preview-wrapper_night': nightMode && isCoping,
}"
>
<section
id="output-wrapper"
:class="{ output_night: nightMode && !backLight }"
>
<div class="preview"> <div class="preview">
<section id="output" v-html="output"> <section id="output" v-html="output"></section>
</section> <div
<div class="loading-mask" v-if="nightMode && isCoping"> class="loading-mask"
v-if="nightMode && isCoping"
>
<div class="loading__img"></div> <div class="loading__img"></div>
<span>正在生成</span> <span>正在生成</span>
</div> </div>
</div> </div>
</section> </section>
</el-col> </el-col>
<transition name="custom-classes-transition" enter-active-class="bounceInRight"> <transition
name="custom-classes-transition"
enter-active-class="bounceInRight"
>
<el-col id="cssBox" :span="12" v-show="showCssEditor"> <el-col id="cssBox" :span="12" v-show="showCssEditor">
<textarea id="cssEditor" type="textarea" placeholder="Your custom css here."> <textarea
</textarea> id="cssEditor"
type="textarea"
placeholder="Your custom css here."
>
</textarea>
</el-col> </el-col>
</transition> </transition>
</el-row> </el-row>
</el-main> </el-main>
</el-container> </el-container>
<upload-img-dialog v-model="dialogUploadImgVisible" @close="dialogUploadImgVisible = false" @uploaded="uploaded" /> <upload-img-dialog
<about-dialog v-model="aboutDialogVisible"/> v-model="dialogUploadImgVisible"
<insert-form-dialog v-model="dialogFormVisible"/> @close="dialogUploadImgVisible = false"
@uploaded="uploaded"
/>
<about-dialog v-model="aboutDialogVisible" />
<insert-form-dialog v-model="dialogFormVisible" />
<right-click-menu <right-click-menu
v-model="rightClickMenuVisible" v-model="rightClickMenuVisible"
:left="mouseLeft" :left="mouseLeft"
@ -55,23 +87,23 @@
</div> </div>
</template> </template>
<script> <script>
import editorHeader from '../components/CodemirrorEditor/header'; import editorHeader from "../components/CodemirrorEditor/header";
import aboutDialog from '../components/CodemirrorEditor/aboutDialog'; import aboutDialog from "../components/CodemirrorEditor/aboutDialog";
import insertFormDialog from '../components/CodemirrorEditor/insertForm'; import insertFormDialog from "../components/CodemirrorEditor/insertForm";
import rightClickMenu from '../components/CodemirrorEditor/rightClickMenu'; import rightClickMenu from "../components/CodemirrorEditor/rightClickMenu";
import uploadImgDialog from '../components/CodemirrorEditor/uploadImgDialog'; import uploadImgDialog from "../components/CodemirrorEditor/uploadImgDialog";
import { import {
css2json, css2json,
downLoadMD, downLoadMD,
setFontSize, setFontSize,
saveEditorContent, saveEditorContent,
customCssWithTemplate customCssWithTemplate,
} from '../assets/scripts/util' } from "../assets/scripts/util";
import {uploadImgFile} from '../assets/scripts/uploadImageFile'; import { uploadImgFile } from "../assets/scripts/uploadImageFile";
require('codemirror/mode/javascript/javascript') require("codemirror/mode/javascript/javascript");
import {mapState, mapMutations} from 'vuex'; import { mapState, mapMutations } from "vuex";
export default { export default {
data() { data() {
return { return {
@ -84,29 +116,29 @@ export default {
backLight: false, backLight: false,
timeout: null, timeout: null,
changeTimer: null, changeTimer: null,
source: '', source: "",
mouseLeft: 0, mouseLeft: 0,
mouseTop: 0 mouseTop: 0,
} };
}, },
components: { components: {
editorHeader, editorHeader,
aboutDialog, aboutDialog,
insertFormDialog, insertFormDialog,
rightClickMenu, rightClickMenu,
uploadImgDialog uploadImgDialog,
}, },
computed: { computed: {
...mapState({ ...mapState({
wxRenderer: state => state.wxRenderer, wxRenderer: (state) => state.wxRenderer,
output: state => state.output, output: (state) => state.output,
editor: state => state.editor, editor: (state) => state.editor,
cssEditor: state => state.cssEditor, cssEditor: (state) => state.cssEditor,
currentSize: state => state.currentSize, currentSize: (state) => state.currentSize,
currentColor: state => state.currentColor, currentColor: (state) => state.currentColor,
nightMode: state => state.nightMode, nightMode: (state) => state.nightMode,
rightClickMenuVisible: state => state.rightClickMenuVisible rightClickMenuVisible: (state) => state.rightClickMenuVisible,
}) }),
}, },
created() { created() {
this.initEditorState(); this.initEditorState();
@ -119,82 +151,94 @@ export default {
methods: { methods: {
initEditor() { initEditor() {
this.initEditorEntity(); this.initEditorEntity();
this.editor.on('change', (cm, e) => { this.editor.on("change", (cm, e) => {
if (this.changeTimer) clearTimeout(this.changeTimer); if (this.changeTimer) clearTimeout(this.changeTimer);
this.changeTimer = setTimeout(() => { this.changeTimer = setTimeout(() => {
this.onEditorRefresh(); this.onEditorRefresh();
saveEditorContent(this.editor, '__editor_content'); saveEditorContent(this.editor, "__editor_content");
}, 300); }, 300);
}); });
// 粘贴上传图片并插入 // 粘贴上传图片并插入
this.editor.on('paste', (cm, e) => { this.editor.on("paste", (cm, e) => {
if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) { if (
!(e.clipboardData && e.clipboardData.items) ||
this.isImgLoading
) {
return; return;
} }
for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) { for (
let i = 0, len = e.clipboardData.items.length;
i < len;
++i
) {
let item = e.clipboardData.items[i]; let item = e.clipboardData.items[i];
if (item.kind === 'file') { if (item.kind === "file") {
// 校验图床参数 // 校验图床参数
const imgHost = localStorage.getItem('imgHost') || 'default'; const imgHost =
if (imgHost != 'default' && !localStorage.getItem(`${imgHost}Config`)) { localStorage.getItem("imgHost") || "default";
if (
imgHost != "default" &&
!localStorage.getItem(`${imgHost}Config`)
) {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '请先配置好图床参数', message: "请先配置好图床参数",
type: 'error' type: "error",
}); });
continue; continue;
} }
this.isImgLoading = true; this.isImgLoading = true;
const pasteFile = item.getAsFile() const pasteFile = item.getAsFile();
uploadImgFile(pasteFile).then(res => { uploadImgFile(pasteFile)
this.uploaded(res) .then((res) => {
}).catch(err => { this.uploaded(res);
this.$message({ })
showClose: true, .catch((err) => {
message: err, this.$message({
type: 'error' showClose: true,
message: err,
type: "error",
});
}); });
});
this.isImgLoading = false; this.isImgLoading = false;
} }
} }
}); });
this.editor.on('mousedown', () => { this.editor.on("mousedown", () => {
this.$store.commit('setRightClickMenuVisible', false); this.$store.commit("setRightClickMenuVisible", false);
}); });
this.editor.on('blur', () => { this.editor.on("blur", () => {
//!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发 //!影响到右键菜单的点击事件，右键菜单的点击事件在组件内通过mousedown触发
this.$store.commit('setRightClickMenuVisible', false); this.$store.commit("setRightClickMenuVisible", false);
}); });
this.editor.on('scroll', () => { this.editor.on("scroll", () => {
this.$store.commit('setRightClickMenuVisible', false); this.$store.commit("setRightClickMenuVisible", false);
}); });
}, },
initCssEditor() { initCssEditor() {
this.initCssEditorEntity(); this.initCssEditorEntity();
// 自动提示 // 自动提示
this.cssEditor.on('keyup', (cm, e) => { this.cssEditor.on("keyup", (cm, e) => {
if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) { if ((e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 189) {
cm.showHint(e); cm.showHint(e);
} }
}); });
this.cssEditor.on('update', (instance) => { this.cssEditor.on("update", (instance) => {
this.cssChanged(); this.cssChanged();
saveEditorContent(this.cssEditor, '__css_content'); saveEditorContent(this.cssEditor, "__css_content");
}) });
}, },
cssChanged() { cssChanged() {
let json = css2json(this.cssEditor.getValue(0)); let json = css2json(this.cssEditor.getValue(0));
let theme = setFontSize(this.currentSize.replace('px', '')); let theme = setFontSize(this.currentSize.replace("px", ""));
theme = customCssWithTemplate(json, this.currentColor, theme); theme = customCssWithTemplate(json, this.currentColor, theme);
this.setWxRendererOptions({ this.setWxRendererOptions({
theme: theme theme: theme,
}); });
this.onEditorRefresh(); this.onEditorRefresh();
}, },
@ -203,8 +247,8 @@ export default {
if (!response) { if (!response) {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '上传图片未知异常', message: "上传图片未知异常",
type: 'error' type: "error",
}); });
return; return;
} }
@ -217,47 +261,66 @@ export default {
this.editor.replaceSelection(`\n${markdownImage}\n`, cursor); this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
this.$message({ this.$message({
showClose: true, showClose: true,
message: '图片上传成功', message: "图片上传成功",
type: 'success' type: "success",
}); });
this.onEditorRefresh(); this.onEditorRefresh();
}, },
// 左右滚动 // 左右滚动
leftAndRightScroll() { leftAndRightScroll() {
const scrollCB = text => { const scrollCB = (text) => {
let source, target; let source, target;
clearTimeout(this.timeout); clearTimeout(this.timeout);
if (text === 'preview') { if (text === "preview") {
source = this.$refs.preview.$el; source = this.$refs.preview.$el;
target = document.getElementsByClassName('CodeMirror-scroll')[0]; target = document.getElementsByClassName(
this.editor.off('scroll', editorScrollCB); "CodeMirror-scroll"
)[0];
this.editor.off("scroll", editorScrollCB);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.editor.on('scroll', editorScrollCB); this.editor.on("scroll", editorScrollCB);
}, 300); }, 300);
} else if (text === 'editor') { } else if (text === "editor") {
source = document.getElementsByClassName('CodeMirror-scroll')[0]; source = document.getElementsByClassName(
"CodeMirror-scroll"
)[0];
target = this.$refs.preview.$el; target = this.$refs.preview.$el;
target.removeEventListener("scroll", previewScrollCB, false); target.removeEventListener(
"scroll",
previewScrollCB,
false
);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
target.addEventListener("scroll", previewScrollCB, false); target.addEventListener(
"scroll",
previewScrollCB,
false
);
}, 300); }, 300);
} }
let percentage = source.scrollTop / (source.scrollHeight - source.offsetHeight); let percentage =
let height = percentage * (target.scrollHeight - target.offsetHeight); source.scrollTop /
(source.scrollHeight - source.offsetHeight);
let height =
percentage * (target.scrollHeight - target.offsetHeight);
target.scrollTo(0, height); target.scrollTo(0, height);
}; };
const editorScrollCB = () => { const editorScrollCB = () => {
scrollCB('editor'); scrollCB("editor");
}; };
const previewScrollCB = () => { const previewScrollCB = () => {
scrollCB('preview'); scrollCB("preview");
}; };
this.$refs.preview.$el.addEventListener("scroll", previewScrollCB, false); this.$refs.preview.$el.addEventListener(
this.editor.on('scroll', editorScrollCB); "scroll",
previewScrollCB,
false
);
this.editor.on("scroll", editorScrollCB);
}, },
// 更新编辑器 // 更新编辑器
onEditorRefresh() { onEditorRefresh() {
@ -284,43 +347,43 @@ export default {
const left = e.clientX - offsetLeft; const left = e.clientX - offsetLeft;
this.mouseLeft = Math.min(maxLeft, left); this.mouseLeft = Math.min(maxLeft, left);
this.mouseTop = e.clientY + 10; this.mouseTop = e.clientY + 10;
this.$store.commit('setRightClickMenuVisible', true); this.$store.commit("setRightClickMenuVisible", true);
}, },
closeRightClickMenu(){ closeRightClickMenu() {
this.$store.commit('setRightClickMenuVisible', false); this.$store.commit("setRightClickMenuVisible", false);
}, },
onMenuEvent(type, info = {}) { onMenuEvent(type, info = {}) {
switch (type) { switch (type) {
case 'pageReset': case "pageReset":
this.$refs.header.showResetConfirm = true; this.$refs.header.showResetConfirm = true;
break; break;
case 'insertPic': case "insertPic":
this.dialogUploadImgVisible = true this.dialogUploadImgVisible = true;
break; break;
case 'downLoad': case "downLoad":
this.downloadEditorContent(); this.downloadEditorContent();
break; break;
case 'insertTable': case "insertTable":
this.dialogFormVisible = true; this.dialogFormVisible = true;
default: default:
break; break;
} }
}, },
...mapMutations([ ...mapMutations([
'initEditorState', "initEditorState",
'initEditorEntity', "initEditorEntity",
'setWxRendererOptions', "setWxRendererOptions",
'editorRefresh', "editorRefresh",
'initCssEditorEntity']) "initCssEditorEntity",
]),
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.leftAndRightScroll(); this.leftAndRightScroll();
PR.prettyPrint(); PR.prettyPrint();
}, 300); }, 300);
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.main-body { .main-body {
@ -328,17 +391,17 @@ export default {
overflow: hidden; overflow: hidden;
} }
.el-main { .el-main {
transition: all .3s; transition: all 0.3s;
padding: 0; padding: 0;
margin: 20px; margin: 20px;
margin-top: 0; margin-top: 0;
} }
.container { .container {
transition: all .3s; transition: all 0.3s;
} }
.preview { .preview {
transition: background 0s; transition: background 0s;
transition-delay: .2s; transition-delay: 0.2s;
} }
.preview-wrapper_night { .preview-wrapper_night {
overflow-y: inherit; overflow-y: inherit;
@ -369,7 +432,7 @@ export default {
width: 50px; width: 50px;
height: 50px; height: 50px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: url('../assets/images/favicon.png') no-repeat; background: url("../assets/images/favicon.png") no-repeat;
background-size: cover; background-size: cover;
} }
span { span {
@ -385,30 +448,34 @@ export default {
animation-fill-mode: both; animation-fill-mode: both;
} }
@keyframes bounceInRight { @keyframes bounceInRight {
0%,60%,75%,90%,100% { 0%,
transition-timing-function: cubic-bezier(0.215,.610,.355,1.000) 60%,
75%,
90%,
100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
0% { 0% {
opacity:0; opacity: 0;
transform:translate3d(3000px,0,0)} transform: translate3d(3000px, 0, 0);
}
60% { 60% {
opacity:1; opacity: 1;
transform:translate3d(-25px,0,0) transform: translate3d(-25px, 0, 0);
} }
75% { 75% {
transform:translate3d(10px,0,0) transform: translate3d(10px, 0, 0);
} }
90% { 90% {
transform:translate3d(-5px,0,0) transform: translate3d(-5px, 0, 0);
} }
100% { 100% {
transform:none transform: none;
} }
} }
</style> </style>
<style lang="less"> <style lang="less">
@import url('../assets/less/app.less'); @import url("../assets/less/app.less");
@import url('../assets/less/style-mirror.css'); @import url("../assets/less/style-mirror.css");
@import url('../assets/less/github-v2.min.css'); @import url("../assets/less/github-v2.min.css");
</style> </style>