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

feat: update elements style

Browse Source 
更新元素样式
This commit is contained in:
yanglbme 2019-11-05 16:57:31 +08:00
parent c522ce0646
commit 0825695b4e
7 changed files with 26 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/css/app.css
View File

@ -21,11 +21,6 @@ html, body {
font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; font-family: 'PingFang SC', BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
} }
.copy-button {
text-decoration: none;
color: #ff3502
}
.el-message__icon { .el-message__icon {
display: none display: none
} }

6
assets/scripts/editor.js
View File

@ -144,16 +144,16 @@ let app = new Vue({
try { try {
if (document.execCommand('copy')) { if (document.execCommand('copy')) {
this.$message({ this.$message({
message: '已复制到剪贴板', type: 'success' message: '已复制文章到剪贴板，可直接到公众号后台粘贴', type: 'success'
}) })
} else { } else {
this.$message({ this.$message({
message: '未能复制到剪贴板，请全选后右键复制', type: 'warning' message: '未能复制文章到剪贴板，请全选后右键复制', type: 'warning'
}) })
} }
} catch (err) { } catch (err) {
this.$message({ this.$message({
message: '未能复制到剪贴板，请全选后右键复制', type: 'warning' message: '未能复制文章到剪贴板，请全选后右键复制', type: 'warning'
}) })
} }
}, },

51
index.html
View File

@ -1,10 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>微信公众号 Markdown 编辑器</title> <title>微信 Markdown 编辑器</title>
<link rel="shortcut icon" href="assets/images/favicon.png"> <link rel="shortcut icon" href="assets/images/favicon.png">
<link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png"> <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png">
@ -16,10 +17,10 @@
<link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.48.4/theme/duotone-light.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.48.4/theme/duotone-light.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.48.4/theme/monokai.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.48.4/theme/monokai.min.css">
<link rel="stylesheet" href="libs/prettify/color-themes/github-v2.min.css"> <link rel="stylesheet" href="libs/prettify/code-themes/github-v2.min.css">
<link rel="stylesheet" href="assets/css/app.css"> <link rel="stylesheet" href="assets/css/app.css">
</head> </head>
<body> <body>
<!--loading 界面--> <!--loading 界面-->
<div class="loading" id="loading"> <div class="loading" id="loading">
@ -33,22 +34,20 @@
<div id="app" class="container"> <div id="app" class="container">
<el-container> <el-container>
<el-header class="top"> <el-header class="top">
<div><img src="assets/images/favicon.png" class="web-icon" alt="icon"> <span <div><img src="assets/images/favicon.png" class="web-icon" alt="icon"> <span class="web-title">微信 Markdown 编辑器
class="web-title">公众号 Markdown 编辑器 </span></div> </span></div>
<el-form size="mini" class="ctrl" :inline=true> <el-form size="mini" class="ctrl" :inline=true>
<el-form-item label="编辑器主题"> <el-form-item label="编辑器主题">
<el-select v-model="currentEditorTheme" size="mini" placeholder="选择字体" @change="editorThemeChanged"> <el-select v-model="currentEditorTheme" size="mini" placeholder="选择字体" @change="editorThemeChanged">
<el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label" <el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label"
:value="editorTheme.value"> :value="editorTheme.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="字体"> <el-form-item label="字体">
<el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged"> <el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged">
<el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}" <el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
:key="font.value" :label="font.label" :value="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>
@ -56,10 +55,7 @@
</el-form-item> </el-form-item>
<el-form-item label="字号"> <el-form-item label="字号">
<el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged"> <el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged">
<el-option v-for="size in sizeOption" <el-option v-for="size in sizeOption" :key="size.value" :label="size.label" :value="size.value">
: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>
@ -75,21 +71,17 @@
</el-form-item> </el-form-item>
<el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker> <el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
</el-form> </el-form>
<el-button class="about" @click="aboutDialogVisible = true">关于</el-button> <el-button type="success" plain @click="copy">复制</el-button>
<el-button type="success" plain class="about" @click="aboutDialogVisible = true">关于</el-button>
</el-header> </el-header>
<el-main class="main-body"> <el-main class="main-body">
<el-row :gutter="10" class="main-section"> <el-row :gutter="10" class="main-section">
<el-col :span="12"> <el-col :span="12">
<textarea <textarea id="editor" type="textarea" placeholder="Your markdown here." v-model="source">
id="editor"
type="textarea"
placeholder="Your markdown here."
v-model="source">
</textarea> </textarea>
</el-col> </el-col>
<el-col :span="12" class="preview-wrapper" id="preview"> <el-col :span="12" class="preview-wrapper" id="preview">
<section> <section>
<div class="hint">全选复制或<a href="#" @click="copy" class="copy-button">点此复制</a>，然后在公众号编辑器粘贴</div>
<div class="preview" contenteditable="true"> <div class="preview" contenteditable="true">
<div id="output" v-html="output"> <div id="output" v-html="output">
</div> </div>
@ -101,19 +93,19 @@
</el-container> </el-container>
<el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center> <el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
<div> <div style="text-align: center;">
<p>一款可以将 Markdown 转换为微信公众号文章的在线编辑器，</p> <h3>一款简洁美观的微信 Markdown 编辑器</h3>
<p>这让你在公众号创作时，摆脱繁琐地排版样式，</p>
<p>可以把更多的时间专注于文章本身。</p>
<p>除了常规 Markdown 格式化，还增加了外链引用、注音样式等。</p>
</div> </div>
<div style="text-align: center;"> <div style="text-align: center;">
<img src="assets/images/qrcode.jpg" style="max-width: 300px"> <img src="assets/images/qrcode.jpg" style="max-width: 300px">
<p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button type="primary" <el-button type="success" plain @click="openWindow('https://github.com/yanglbme/wxmd-editor')">GitHub 仓库
@click="openWindow('https://github.com/yanglbme/wxmd-editor')">查看 GitHub 仓库</el-button> </el-button>
</span> <el-button type="success" plain @click="openWindow('https://gitee.com/yanglbme/wxmd-editor')">Gitee 仓库
</el-button>
</span>
</el-dialog> </el-dialog>
</div> </div>
@ -137,4 +129,5 @@
<script src="assets/scripts/loading.js"></script> <script src="assets/scripts/loading.js"></script>
</body> </body>
</html> </html>

0
libs/prettify/color-themes/github-v2.min.css → libs/prettify/code-themes/github-v2.min.css vendored
View File

0
libs/prettify/color-themes/tomorrow-night-eighties.min.css → libs/prettify/code-themes/tomorrow-night-eighties.min.css vendored
View File

0
libs/prettify/color-themes/tomorrow-night.min.css → libs/prettify/code-themes/tomorrow-night.min.css vendored
View File

0
libs/prettify/color-themes/tomorrow.min.css → libs/prettify/code-themes/tomorrow.min.css vendored
View File