amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-11-24 19:10:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of github.com:doocs/md

Browse Source
This commit is contained in:
yanglbme 2020-10-21 17:48:44 +08:00
commit 5ae6fd4b28
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>
<script>
import Loading from './components/Loading'
import CodemirrorEditor from './view/CodemirrorEditor'
import Loading from "./components/Loading";
import CodemirrorEditor from "./view/CodemirrorEditor";
export default {
name: 'App',
name: "App",
components: {
Loading,
CodemirrorEditor
CodemirrorEditor,
},
data() {
return {
loading: true
}
loading: true,
};
},
mounted() {
setTimeout(() => {
this.loading = false
this.loading = false;
}, 100);
}
}
},
};
</script>
<style lang="scss" scoped>
.fade-enter, .fade-leave-to {
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-to, .fade-leave {
.fade-enter-to,
.fade-leave {
opacity: 1;
}
.fade-enter-active, .fade-leave-active {
.fade-enter-active,
.fade-leave-active {
transition: all 1s;
}
</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;
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
input,
button,
textarea {
font-family: inherit;
font-family: inherit;
}
h1,
@ -17,109 +17,110 @@ h3,
h4,
h5,
h6 {
font-weight: normal;
font-weight: normal;
}
em {
font-style: normal !important;
font-style: normal !important;
}
html,
body {
height: 100%;
font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
height: 100%;
font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue",
sans-serif;
}
.el-message__icon {
display: none
display: none;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
height: 60px;
padding: 10px 20px;
display: flex;
align-items: center;
margin-right: 20px;
height: 60px;
padding: 10px 20px;
display: flex;
align-items: center;
margin-right: 20px;
}
.web-title {
margin: 0 15px 0 5px;
margin: 0 15px 0 5px;
}
.web-icon {
width: auto;
height: 1.5rem;
vertical-align: middle;
width: auto;
height: 1.5rem;
vertical-align: middle;
}
#editor {
height: 100%;
display: block;
border: none;
width: 100%;
padding: 10px;
height: 100%;
display: block;
border: none;
width: 100%;
padding: 10px;
}
section {
height: 100%;
height: 100%;
}
.main-body {
display: flex;
flex-direction: column;
padding-top: 0;
padding-bottom: 10px;
display: flex;
flex-direction: column;
padding-top: 0;
padding-bottom: 10px;
}
.ctrl {
flex-basis: 60px;
flex-grow: 1;
flex-shrink: 1;
display: flex;
align-items: center;
flex-basis: 60px;
flex-grow: 1;
flex-shrink: 1;
display: flex;
align-items: center;
}
.preview-wrapper {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
padding: 0;
align-items: center;
justify-content: center;
display: flex;
overflow: scroll;
word-break: break-all;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
padding: 0;
align-items: center;
justify-content: center;
display: flex;
overflow: scroll;
word-break: break-all;
}
.main-section {
display: flex;
height: 100%;
display: flex;
height: 100%;
}
.hint {
opacity: 0.6;
margin: 20px 0;
opacity: 0.6;
margin: 20px 0;
}
.preview {
margin: 0 -20px;
width: 375px;
padding: 20px;
font-size: 14px;
box-sizing: border-box;
outline: none;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
margin: 0 -20px;
width: 375px;
padding: 20px;
font-size: 14px;
box-sizing: border-box;
outline: none;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
}
.preview table {
margin-bottom: 10px;
border-collapse: collapse;
display: table;
width: 100% !important;
margin-bottom: 10px;
border-collapse: collapse;
display: table;
width: 100% !important;
}
/*
@ -128,60 +129,61 @@ section {
}
*/
.select-item-left {
float: left;
float: left;
}
.select-item-right {
float: right;
color: #8492a6;
font-size: 13px;
float: right;
color: #8492a6;
font-size: 13px;
}
.CodeMirror {
height: 100% !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
font-size: 14px;
padding: 20px;
width: 100% !important;
font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !important;
height: 100% !important;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
font-size: 14px;
padding: 20px;
width: 100% !important;
font-family: "PingFang SC", BlinkMacSystemFont, Roboto, "Helvetica Neue",
sans-serif !important;
}
/* ele ui */
.el-form-item {
margin-bottom: 0 !important;
margin-bottom: 0 !important;
}
.el-tooltip {
cursor: pointer;
cursor: pointer;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #FFF;
width: 6px;
height: 6px;
background-color: #fff;
}
::-webkit-scrollbar-track {
border-radius: 6px;
background-color: rgba(200, 200, 200, 0.3);
border-radius: 6px;
background-color: rgba(200, 200, 200, 0.3);
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(144, 146, 152, 0.5);
transition: background-color .3s;
border-radius: 6px;
background-color: rgba(144, 146, 152, 0.5);
transition: background-color 0.3s;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(144, 146, 152, 0.5);
background-color: rgba(144, 146, 152, 0.5);
}
.CodeMirror-vscrollbar:focus {
outline: none;
outline: none;
}
.CodeMirror-scroll,
.preview-wrapper {
overflow: unset;
overflow-y: scroll;
}
overflow: unset;
overflow-y: scroll;
}

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

@ -1,2 +1,2 @@
@import './codeTheme/wechat-code-block.less';
@import './codeTheme/github-code-block.less';
@import "./codeTheme/wechat-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*/
.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;
margin: 10px 8px;
position: relative;
height: auto;
background-color: rgba(27,31,35,.05);
}
.code-snippet__line-index {
display: none;
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;
}
}
.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;
}
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;
}
}
ul li {
list-style: none;
}
}

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

@ -1,62 +1,62 @@
/*wechat code block*/
.rich_media_content .code-snippet *,
.rich_media_content .code-snippet__wechat * {
max-width: 1000% !important;
max-width: 1000% !important;
}
.code-snippet__wechat {
word-wrap: break-word !important;
font-size: 14px;
margin: 10px 8px;
color: #333;
position: relative;
background-color: rgba(27, 31, 35, .05);
border: 1px solid #f0f0f0;
border-radius: 2px;
display: flex;
line-height: 24px;
word-wrap: break-word !important;
font-size: 14px;
margin: 10px 8px;
color: #333;
position: relative;
background-color: rgba(27, 31, 35, 0.05);
border: 1px solid #f0f0f0;
border-radius: 2px;
display: flex;
line-height: 24px;
}
.code-snippet__wechat .code-snippet__line-index {
counter-reset: line;
flex-shrink: 0;
height: 100%;
padding: 1em;
list-style-type: none;
counter-reset: line;
flex-shrink: 0;
height: 100%;
padding: 1em;
list-style-type: none;
}
.code-snippet__wechat .code-snippet__line-index li {
list-style-type: none;
text-align: right;
list-style-type: none;
text-align: right;
}
.code-snippet__wechat .code-snippet__line-index li::before {
min-width: 1.5em;
text-align: right;
left: -2.5em;
counter-increment: line;
content: counter(line);
display: inline;
color: rgba(0, 0, 0, 0.15);
min-width: 1.5em;
text-align: right;
left: -2.5em;
counter-increment: line;
content: counter(line);
display: inline;
color: rgba(0, 0, 0, 0.15);
}
.code-snippet__wechat pre {
overflow-x: auto;
padding: 1em 1em 1em 1em;
white-space: normal;
flex: 1;
-webkit-overflow-scrolling: touch;
overflow-x: auto;
padding: 1em 1em 1em 1em;
white-space: normal;
flex: 1;
-webkit-overflow-scrolling: touch;
}
.code-snippet__wechat code {
text-align: left;
font-size: 14px;
white-space: pre;
display: flex;
position: relative;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
text-align: left;
font-size: 14px;
white-space: pre;
display: flex;
position: relative;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.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 */
.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 {
background: #f5f5f5;
color: #444;
font-size: 16px;
padding: 20px;
line-height: 25px;
background: #f5f5f5;
color: #444;
font-size: 16px;
padding: 20px;
line-height: 25px;
}
.cm-s-style-mirror div.CodeMirror-selected {
background: #e0e0e0;
background: #e0e0e0;
}
.cm-s-style-mirror .CodeMirror-line::selection,
.cm-s-style-mirror .CodeMirror-line>span::selection,
.cm-s-style-mirror .CodeMirror-line>span>span::selection {
background: #e0e0e0;
.cm-s-style-mirror .CodeMirror-line > span::selection,
.cm-s-style-mirror .CodeMirror-line > span > span::selection {
background: #e0e0e0;
}
.cm-s-style-mirror .CodeMirror-line::-moz-selection,
.cm-s-style-mirror .CodeMirror-line>span::-moz-selection,
.cm-s-style-mirror .CodeMirror-line>span>span::-moz-selection {
background: #e0e0e0;
.cm-s-style-mirror .CodeMirror-line > span::-moz-selection,
.cm-s-style-mirror .CodeMirror-line > span > span::-moz-selection {
background: #e0e0e0;
}
.cm-s-style-mirror .CodeMirror-gutters {
background: #f5f5f5;
border-right: 0px;
background: #f5f5f5;
border-right: 0px;
}
.cm-s-style-mirror .CodeMirror-guttermarker {
color: #ac4142;
color: #ac4142;
}
.cm-s-style-mirror .CodeMirror-guttermarker-subtle {
color: #b0b0b0;
color: #b0b0b0;
}
.cm-s-style-mirror .CodeMirror-linenumber {
color: #b0b0b0;
color: #b0b0b0;
}
.cm-s-style-mirror .CodeMirror-cursor {
border-left: 1px solid #505050;
border-left: 1px solid #505050;
}
.cm-s-style-mirror span.cm-comment {
color: green;
color: green;
}
.cm-s-style-mirror span.cm-atom {
color: #aa759f;
color: #aa759f;
}
.cm-s-style-mirror span.cm-number {
color: #aa759f;
color: #aa759f;
}
.cm-s-style-mirror span.cm-property,
.cm-s-style-mirror span.cm-attribute {
color: #90a959;
color: #90a959;
}
.cm-s-style-mirror span.cm-keyword {
color: #023a52;
color: #023a52;
}
.cm-s-style-mirror span.cm-string {
color: #e46918;
color: #e46918;
}
.cm-s-style-mirror span.cm-variable {
color: #90a959;
color: #90a959;
}
.cm-s-style-mirror span.cm-variable-2 {
color: #00695f;
color: #00695f;
}
.cm-s-style-mirror span.cm-variable-3 {
color: #2e6e8a;
color: #2e6e8a;
}
.cm-s-style-mirror span.cm-def {
color: #d28445;
color: #d28445;
}
.cm-s-style-mirror span.cm-bracket {
color: #202020;
color: #202020;
}
.cm-s-style-mirror span.cm-tag {
color: #000;
color: #000;
}
.cm-s-style-mirror span.cm-link {
color: #b26a00;
color: #b26a00;
}
.cm-s-style-mirror span.cm-error {
/* background: #ac4142;
/* background: #ac4142;
color: #f5f5f5; */
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #df8d8e;
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #df8d8e;
}
.cm-s-style-mirror .CodeMirror-activeline-background {
background: #dddcdc;
background: #dddcdc;
}
.cm-s-style-mirror .CodeMirror-matchingbracket {
color: rgb(32, 32, 32) !important;
background-color: rgba(0, 0, 0, 0.1) !important;
}
color: rgb(32, 32, 32) !important;
background-color: rgba(0, 0, 0, 0.1) !important;
}

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

@ -10,85 +10,94 @@
@nightButtonBg: #1e1e1e;
@nightButtonHoverColor: #84868b;
.container_night {
background-color: @nightBgColor;
.el-main {
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 {
caret-color: @nightFontColor;
color: @nightFontColor;
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
.preview-wrapper {
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
}
.output_night {
.preview {
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);
}
.code-snippet__fix {
background-color: rgb(238, 238, 238);
}
.cm-s-style-mirror .CodeMirror-matchingbracket {
color: @nightWhiteColor!important;
background: rgb(30, 30, 30)!important;
}
.cm-s-style-mirror .CodeMirror-matchingbracket {
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 {
background-color: transparent;
.el-dialog__body {
color: @nightWhiteColor;
}
.cm-s-xq-light span.cm-string {
color: @nightLinkColor;
.el-dialog__title,
.el-form-item__label {
color: @nightWhiteColor;
}
.cm-s-xq-light span.cm-link {
color: @nightLinkTextColor;
.el-tabs__item {
color: @nightActiveCodeMirrorColor;
}
.editor__header {
background-color: @nightHeaderColor;
.is-active {
color: @nightWhiteColor;
}
.el-button {
color: @nightWhiteColor;
background-color: @nightCodeMirrorColor;
border: 1px solid transparent;
.el-upload-dragger {
background-color: @nightButtonBg;
}
.el-button.is-plain:focus, .el-button.is-plain:hover {
background: @nightButtonBg;
color: @nightWhiteColor;
border: 1px solid @nightWhiteColor;
i {
color: @nightWhiteColor;
}
}
.insert__dialog, .about__dialog, .reset__dialog, .upload__dialog {
.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;
}
}
}
::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>
<el-dialog title="关于" class="about__dialog" :visible="value" @close="$emit('input', false)" width="30%" center>
<div style="text-align: center;">
<el-dialog
title="关于"
class="about__dialog"
:visible="value"
@close="$emit('input', false)"
width="30%"
center
>
<div style="text-align: center">
<h3>一款高度简洁的微信 Markdown 编辑器</h3>
</div>
<div style="text-align: center;margin-top:10px;">
<div style="text-align: center; margin-top: 10px">
<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>
<span slot="footer" class="dialog-footer">
<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>
<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>
</el-dialog>
</template>
@ -19,16 +39,15 @@ export default {
props: {
value: {
type: Boolean,
default: false
}
default: false,
},
},
methods: {
onRedirect(url) {
window.open(url);
}
}
}
},
},
};
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>

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

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

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

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

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

@ -1,49 +1,54 @@
<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>
<div slot="footer" class="dialog-footer">
<el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
<el-button :type="btnType" @click="$emit('confirm')" plain>确 定</el-button>
<el-button :type="btnType" plain @click="$emit('close')"
>取 消</el-button
>
<el-button :type="btnType" @click="$emit('confirm')" plain
>确 定</el-button
>
</div>
</el-dialog>
</template>
<script>
import {
mapState
} from 'vuex';
export default {
props: {
showResetConfirm: {
type: Boolean,
default: false
}
import { mapState } from "vuex";
export default {
props: {
showResetConfirm: {
type: Boolean,
default: false,
},
computed: {
btnType() {
return this.nightMode ? 'default' : 'primary';
},
...mapState({
nightMode: state => state.nightMode
})
}
}
},
computed: {
btnType() {
return this.nightMode ? "default" : "primary";
},
...mapState({
nightMode: (state) => state.nightMode,
}),
},
};
</script>
<style lang="less" scoped>
.reset__dialog {
text-align: center;
}
.reset__dialog {
text-align: center;
}
.text {
text-align: center;
}
.dialog-footer {
text-align: center;
}
.text {
text-align: center;
}
.dialog-footer {
text-align: center;
}
</style>

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

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

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

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

311
src/view/CodemirrorEditor.vue
View File

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