mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
perf: rearrange the top layout (#163)
* perf: rearrange the top layout * chore: toggle selection style * chore: remove default option * chore: adjust the theme button position * feat: the MD import function is added * feat: add formatting function * perf: improved color picker experience * perf: added a format shortcut key * chore: reduce the margin difference
This commit is contained in:
YangQi
GitHub
parent
9c720a1662
commit
3d26b03430
@ -36,204 +36,259 @@
|
||||
</span>
|
||||
</el-dialog>
|
||||
<div class="left-side">
|
||||
<!-- 图片上传 -->
|
||||
<el-tooltip :effect="effect" content="上传图片" placement="bottom-start">
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
文件<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="refClick">
|
||||
<i class="el-icon-upload2" size="medium"></i>
|
||||
导入 .md
|
||||
<input hidden type="file" ref="fileInput" accept=".md" />
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="$emit('download')">
|
||||
<i class="el-icon-download" size="medium"></i>
|
||||
导出 .md
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="$emit('export')">
|
||||
<i class="el-icon-document" size="medium"></i>
|
||||
导出 .html
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click.native="themeChanged">
|
||||
<i
|
||||
class="el-icon-upload"
|
||||
size="medium"
|
||||
@click="$emit('show-dialog-upload-img')"
|
||||
class="el-icon-check"
|
||||
:style="{ opacity: nightMode ? 1 : 0 }"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
<!-- 导出 Markdown 文档 -->
|
||||
<el-tooltip
|
||||
class="header__item"
|
||||
:effect="effect"
|
||||
content="导出 Markdown 文档"
|
||||
placement="bottom-start"
|
||||
暗黑模式
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
格式<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
class="format-item"
|
||||
@click.native="$emit('addFormat', '**')"
|
||||
>
|
||||
加粗
|
||||
<kbd> Ctrl + B </kbd>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
class="format-item"
|
||||
@click.native="$emit('addFormat', '*')"
|
||||
>
|
||||
斜体
|
||||
<kbd> Ctrl + I </kbd>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
class="format-item"
|
||||
@click.native="$emit('addFormat', '~~')"
|
||||
>
|
||||
删除线
|
||||
<kbd> Alt + Shift + U </kbd>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
class="format-item"
|
||||
@click.native="$emit('addFormat', '[', ']()')"
|
||||
>
|
||||
超链接
|
||||
<kbd> Alt + Shift + K </kbd>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
class="format-item"
|
||||
@click.native="$emit('formatContent')"
|
||||
>
|
||||
格式化
|
||||
<kbd> Ctrl + Alt + L </kbd>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click.native="statusChanged">
|
||||
<i
|
||||
class="el-icon-download"
|
||||
size="medium"
|
||||
@click="$emit('download')"
|
||||
class="el-icon-check"
|
||||
:style="{ opacity: citeStatus ? 1 : 0 }"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
<!-- 导出 HTML -->
|
||||
<el-tooltip
|
||||
class="header__item"
|
||||
:effect="effect"
|
||||
content="导出 HTML 页面"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<i class="el-icon-document" size="medium" @click="$emit('export')"></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>
|
||||
<!-- 插入表格 -->
|
||||
<el-tooltip
|
||||
class="header__item header__item_last"
|
||||
:effect="effect"
|
||||
content="插入表格"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<i
|
||||
class="el-icon-s-grid"
|
||||
size="medium"
|
||||
@click="$emit('show-dialog-form')"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
<el-select
|
||||
v-model="selectFont"
|
||||
size="mini"
|
||||
placeholder="选择字体"
|
||||
clearable
|
||||
@change="fontChanged"
|
||||
>
|
||||
<el-option
|
||||
微信外链转底部引用
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
编辑<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="$emit('show-dialog-upload-img')">
|
||||
<i class="el-icon-upload" size="medium"></i>
|
||||
上传图片
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="$emit('show-dialog-form')">
|
||||
<i class="el-icon-s-grid" size="medium"></i>
|
||||
插入表格
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
样式<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item class="padding-left-3">
|
||||
<el-dropdown placement="right" class="style-option-menu">
|
||||
<div class="el-dropdown-link">
|
||||
字体
|
||||
<i class="el-icon-arrow-right el-icon--right"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" style="width: 200px">
|
||||
<el-dropdown-item
|
||||
v-for="font in config.builtinFonts"
|
||||
:style="{ fontFamily: font.value }"
|
||||
:key="font.value"
|
||||
:label="font.label"
|
||||
:value="font.value"
|
||||
@click.native="fontChanged(font.value)"
|
||||
>
|
||||
<span class="select-item-left">{{ font.label }}</span>
|
||||
<i
|
||||
class="el-icon-check"
|
||||
:style="{ opacity: selectFont === font.value ? 1 : 0 }"
|
||||
></i>
|
||||
<span>{{ font.label }}</span>
|
||||
<span class="select-item-right">Abc</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="selectSize"
|
||||
size="mini"
|
||||
placeholder="选择段落字号"
|
||||
clearable
|
||||
@change="sizeChanged"
|
||||
>
|
||||
<el-option
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="padding-left-3">
|
||||
<el-dropdown placement="right" class="style-option-menu">
|
||||
<div class="el-dropdown-link">
|
||||
字号
|
||||
<i class="el-icon-arrow-right el-icon--right"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" style="width: 200px">
|
||||
<el-dropdown-item
|
||||
v-for="size in config.sizeOption"
|
||||
:key="size.value"
|
||||
:label="size.label"
|
||||
:value="size.value"
|
||||
@click.native="sizeChanged(size.value)"
|
||||
>
|
||||
<span class="select-item-left">{{ size.label }}</span>
|
||||
<i
|
||||
class="el-icon-check"
|
||||
:style="{ opacity: selectSize === size.value ? 1 : 0 }"
|
||||
></i>
|
||||
<span>{{ size.label }}</span>
|
||||
<span class="select-item-right">{{ size.desc }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="selectColor"
|
||||
size="mini"
|
||||
placeholder="选择颜色"
|
||||
clearable
|
||||
@change="colorChanged"
|
||||
>
|
||||
<el-option
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="padding-left-3">
|
||||
<el-dropdown placement="right" class="style-option-menu">
|
||||
<div class="el-dropdown-link">
|
||||
颜色
|
||||
<i class="el-icon-arrow-right el-icon--right"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" style="width: 200px">
|
||||
<el-dropdown-item
|
||||
v-for="color in config.colorOption"
|
||||
:key="color.value"
|
||||
:label="color.label"
|
||||
:value="color.value"
|
||||
@click.native="colorChanged(color.value)"
|
||||
>
|
||||
<span class="select-item-left">{{ color.label }}</span>
|
||||
<i
|
||||
class="el-icon-check"
|
||||
:style="{ opacity: selectColor === color.value ? 1 : 0 }"
|
||||
></i>
|
||||
<span>{{ color.label }}</span>
|
||||
<span class="select-item-right">{{ color.desc }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="selectCodeTheme"
|
||||
size="mini"
|
||||
placeholder="代码主题"
|
||||
@change="codeThemeChanged"
|
||||
>
|
||||
<el-option
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="padding-left-3">
|
||||
<el-dropdown placement="right" class="style-option-menu">
|
||||
<div class="el-dropdown-link">
|
||||
代码主题
|
||||
<i class="el-icon-arrow-right el-icon--right"></i>
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown" style="width: 200px">
|
||||
<el-dropdown-item
|
||||
v-for="code in config.codeThemeOption"
|
||||
:key="code.value"
|
||||
:label="code.label"
|
||||
:value="code.value"
|
||||
@click.native="codeThemeChanged(code.value)"
|
||||
>
|
||||
<span class="select-item-left">{{ code.label }}</span>
|
||||
<i
|
||||
class="el-icon-check"
|
||||
:style="{ opacity: selectCodeTheme === code.value ? 1 : 0 }"
|
||||
></i>
|
||||
<span>{{ code.label }}</span>
|
||||
<span class="select-item-right">{{ code.desc }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-tooltip content="自定义颜色" :effect="effect" placement="top">
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
divided
|
||||
class="padding-left-3"
|
||||
@click.native="showPicker()"
|
||||
>
|
||||
自定义颜色
|
||||
<el-color-picker
|
||||
v-model="selectColor"
|
||||
size="mini"
|
||||
show-alpha
|
||||
ref="colorPicker"
|
||||
size="mini"
|
||||
style="float: right; margin-top: 3px"
|
||||
v-model="selectColor"
|
||||
@change="colorChanged"
|
||||
></el-color-picker>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
content="微信外链自动转为文末引用"
|
||||
:effect="effect"
|
||||
placement="top"
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item class="padding-left-3" @click.native="customStyle">
|
||||
自定义 CSS
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
divided
|
||||
class="padding-left-3"
|
||||
@click.native="showResetConfirm = true"
|
||||
>
|
||||
<el-switch
|
||||
class="header__switch"
|
||||
v-model="citeStatus"
|
||||
active-color="#67c23a"
|
||||
inactive-color="#dcdfe6"
|
||||
@change="statusChanged"
|
||||
>
|
||||
</el-switch>
|
||||
</el-tooltip>
|
||||
重置
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
帮助<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="$emit('show-about-dialog')">
|
||||
关于
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="right-side">
|
||||
<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>
|
||||
<el-button
|
||||
:type="btnType"
|
||||
plain
|
||||
size="medium"
|
||||
@click="prePost"
|
||||
placement="bottom-start"
|
||||
>发布</el-button
|
||||
>
|
||||
<el-button
|
||||
:type="btnType"
|
||||
plain
|
||||
size="medium"
|
||||
class="about"
|
||||
@click="$emit('show-about-dialog')"
|
||||
>关于</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>
|
||||
>发布
|
||||
</el-button>
|
||||
</div>
|
||||
<resetDialog
|
||||
:showResetConfirm="showResetConfirm"
|
||||
@ -254,6 +309,7 @@ import config from '../../assets/scripts/config'
|
||||
import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt'
|
||||
import resetDialog from './resetDialog'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: `editor-header`,
|
||||
data() {
|
||||
@ -300,6 +356,12 @@ export default {
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
refClick() {
|
||||
this.$refs.fileInput.click()
|
||||
},
|
||||
showPicker() {
|
||||
this.$refs.colorPicker.showPicker = true
|
||||
},
|
||||
prePost() {
|
||||
let auto = {}
|
||||
try {
|
||||
@ -335,6 +397,7 @@ export default {
|
||||
fonts: fonts,
|
||||
})
|
||||
this.setCurrentFont(fonts)
|
||||
this.selectFont = fonts
|
||||
this.$emit(`refresh`)
|
||||
},
|
||||
sizeChanged(size) {
|
||||
@ -345,6 +408,7 @@ export default {
|
||||
theme: theme,
|
||||
})
|
||||
this.setCurrentSize(size)
|
||||
this.selectSize = size
|
||||
this.$emit(`refresh`)
|
||||
},
|
||||
colorChanged(color) {
|
||||
@ -355,14 +419,17 @@ export default {
|
||||
theme: theme,
|
||||
})
|
||||
this.setCurrentColor(color)
|
||||
this.selectColor = color
|
||||
this.$emit(`refresh`)
|
||||
},
|
||||
codeThemeChanged(theme) {
|
||||
this.setCurrentCodeTheme(theme)
|
||||
this.selectCodeTheme = theme
|
||||
this.$emit(`refresh`)
|
||||
},
|
||||
statusChanged(val) {
|
||||
this.setCiteStatus(val)
|
||||
statusChanged() {
|
||||
this.citeStatus = !this.citeStatus
|
||||
this.setCiteStatus(this.citeStatus)
|
||||
this.$emit(`refresh`)
|
||||
},
|
||||
// 复制到微信公众号
|
||||
@ -449,6 +516,19 @@ export default {
|
||||
this.selectColor = this.currentColor
|
||||
this.selectCodeTheme = this.codeTheme
|
||||
this.citeStatus = this.currentCiteStatus
|
||||
|
||||
const fileInput = this.$refs.fileInput
|
||||
fileInput.onchange = () => {
|
||||
const file = fileInput.files[0]
|
||||
if (file == null) {
|
||||
return
|
||||
}
|
||||
const read = new FileReader()
|
||||
read.readAsText(file)
|
||||
read.onload = () => {
|
||||
this.$emit(`import-md`, read.result)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -457,15 +537,11 @@ export default {
|
||||
.editor__header {
|
||||
width: 100%;
|
||||
}
|
||||
.header__item {
|
||||
margin: 0 3px;
|
||||
}
|
||||
.header__item_last {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.header__switch {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mode__switch {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
@ -475,10 +551,12 @@ export default {
|
||||
background-size: cover;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.mode__switch_black {
|
||||
background: url('../../assets/images/light.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.top {
|
||||
height: 60px;
|
||||
padding: 10px 20px;
|
||||
@ -486,14 +564,17 @@ export default {
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -513,4 +594,53 @@ export default {
|
||||
color: #8492a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.el-dropdown {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.style-option-menu {
|
||||
margin: 0;
|
||||
width: 150px;
|
||||
|
||||
.el-dropdown-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-left-3 {
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
// 添加边距影响了 divided 行的移入效果，此处做一个兼容处理
|
||||
.el-dropdown-menu__item--divided.padding-left-3 {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3em;
|
||||
height: 6px;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.format-item {
|
||||
.padding-left-3;
|
||||
width: 180px;
|
||||
|
||||
kbd {
|
||||
font-size: 0.75em;
|
||||
float: right;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,20 @@
|
||||
<template>
|
||||
<div class="container" :class="{ container_night: nightMode }">
|
||||
<div
|
||||
class="container"
|
||||
:class="{ container_night: nightMode }"
|
||||
@keydown.alt.shift.k="addFormat('[', ']()')"
|
||||
@keydown.alt.shift.u="addFormat('~~')"
|
||||
@keydown.ctrl.alt.l="formatContent()"
|
||||
>
|
||||
<el-container>
|
||||
<el-header class="editor__header">
|
||||
<editor-header
|
||||
ref="header"
|
||||
@addFormat="addFormat"
|
||||
@formatContent="formatContent"
|
||||
@refresh="onEditorRefresh"
|
||||
@cssChanged="cssChanged"
|
||||
@import-md="importMD"
|
||||
@download="downloadEditorContent"
|
||||
@export="exportEditorContent"
|
||||
@showCssEditor="showCssEditor = !showCssEditor"
|
||||
@ -110,12 +119,12 @@ import {
|
||||
customCssWithTemplate,
|
||||
checkImage,
|
||||
} from '../assets/scripts/util'
|
||||
|
||||
import { toBase64 } from '../assets/scripts/util'
|
||||
import fileApi from '../api/file'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
require(`codemirror/mode/javascript/javascript`)
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -446,6 +455,64 @@ export default {
|
||||
this.isCoping = false
|
||||
}, 800)
|
||||
},
|
||||
// 工具函数，添加格式
|
||||
addFormat(before, after = before) {
|
||||
const { head, anchor } = this.editor.doc.sel.ranges[0]
|
||||
let start
|
||||
let end
|
||||
// 确定起始关系
|
||||
if (head.line === anchor.line) {
|
||||
if (head.ch < anchor.ch) {
|
||||
start = head
|
||||
end = anchor
|
||||
} else {
|
||||
start = anchor
|
||||
end = head
|
||||
}
|
||||
} else if (head.line < anchor.line) {
|
||||
start = head
|
||||
end = anchor
|
||||
} else {
|
||||
start = head
|
||||
end = anchor
|
||||
}
|
||||
|
||||
const rows = []
|
||||
let row = ``
|
||||
for (const c of this.editor.getValue()) {
|
||||
if (c === `\n`) {
|
||||
rows.push(row)
|
||||
row = ``
|
||||
} else {
|
||||
row += c
|
||||
}
|
||||
}
|
||||
rows.push(row)
|
||||
|
||||
let txt = ``
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const row = rows[i]
|
||||
for (let j = 0; j < row.length; j++) {
|
||||
if (i === start.line && j === start.ch) {
|
||||
txt += before
|
||||
}
|
||||
if (i === end.line && j === end.ch) {
|
||||
txt += after
|
||||
}
|
||||
txt += row[j]
|
||||
}
|
||||
//* 特殊情况，结束光标在末尾，无法遍历到
|
||||
if (i === end.line && row.length === end.ch) {
|
||||
txt += after
|
||||
}
|
||||
txt += `\n`
|
||||
}
|
||||
this.editor.setValue(txt)
|
||||
},
|
||||
importMD(md) {
|
||||
this.editor.setValue(md)
|
||||
this.onEditorRefresh()
|
||||
},
|
||||
// 导出编辑器内容到本地
|
||||
downloadEditorContent() {
|
||||
downloadMD(this.editor.getValue(0))
|
||||
@ -563,30 +630,37 @@ export default {
|
||||
padding-top: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
transition: all 0.3s;
|
||||
padding: 0;
|
||||
margin: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.textarea-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.preview-wrapper_night {
|
||||
overflow-y: inherit;
|
||||
position: relative;
|
||||
left: -3px;
|
||||
|
||||
.preview {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
#output-wrapper {
|
||||
position: relative;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.loading-mask {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -598,6 +672,7 @@ export default {
|
||||
font-size: 15px;
|
||||
color: gray;
|
||||
background-color: #1e1e1e;
|
||||
|
||||
.loading__img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@ -608,6 +683,7 @@ export default {
|
||||
background: url('../assets/images/favicon.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@ -615,11 +691,13 @@ export default {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInRight {
|
||||
animation-name: bounceInRight;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
/deep/ .preview-table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
@ -650,6 +728,7 @@ export default {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.codeMirror-wrapper {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user