mirror of
https://github.com/doocs/md.git
synced 2024-10-30 15:57:50 +08:00
133 lines
6.1 KiB
HTML
133 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>微信 Markdown 编辑器</title>
|
|
<link rel="shortcut icon" href="assets/images/favicon.png">
|
|
<link rel="apple-touch-icon-precomposed" href="assets/images/favicon.png">
|
|
|
|
<link rel="stylesheet" href="assets/css/loading.css">
|
|
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.11.1/theme-chalk/index.css">
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.48.4/codemirror.min.css">
|
|
<link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.48.4/theme/base16-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="libs/prettify/code-themes/github-v2.min.css">
|
|
<link rel="stylesheet" href="assets/css/app.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!--loading 界面-->
|
|
<div class="loading" id="loading">
|
|
<div class="loading-wrapper">
|
|
<div class="loading-text">Loading...</div>
|
|
<div class="loading-anim"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--应用主体-->
|
|
<div id="app" class="container">
|
|
<el-container>
|
|
<el-header class="top">
|
|
<div><img src="assets/images/favicon.png" class="web-icon" alt="icon"> <span class="web-title">微信 Markdown 编辑器
|
|
</span></div>
|
|
<el-form size="mini" class="ctrl" :inline=true>
|
|
<el-form-item label="编辑器主题">
|
|
<el-select v-model="currentEditorTheme" size="mini" placeholder="选择字体" @change="editorThemeChanged">
|
|
<el-option v-for="editorTheme in editorThemes" :key="editorTheme.value" :label="editorTheme.label"
|
|
:value="editorTheme.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="字体">
|
|
<el-select v-model="currentFont" size="mini" placeholder="选择字体" @change="fontChanged">
|
|
<el-option v-for="font in 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 label="字号">
|
|
<el-select v-model="currentSize" size="mini" placeholder="选择段落字体大小" @change="sizeChanged">
|
|
<el-option v-for="size in 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 label="颜色">
|
|
<el-select v-model="currentColor" size="mini" placeholder="选择颜色" @change="colorChanged">
|
|
<el-option v-for="color in colorOption" :key="color.value" :label="color.label" :value="color.value">
|
|
<span class="select-item-left">{{ color.label }}</span>
|
|
<span class="select-item-right">{{ color.author }}</span>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
|
|
</el-form>
|
|
<el-button type="success" plain @click="copy">复制</el-button>
|
|
<el-button type="success" plain class="about" @click="aboutDialogVisible = true">关于</el-button>
|
|
</el-header>
|
|
<el-main class="main-body">
|
|
<el-row :gutter="10" class="main-section">
|
|
<el-col :span="12">
|
|
<textarea id="editor" type="textarea" placeholder="Your markdown here." v-model="source">
|
|
</textarea>
|
|
</el-col>
|
|
<el-col :span="12" class="preview-wrapper" id="preview">
|
|
<section>
|
|
<div class="preview" contenteditable="true">
|
|
<div id="output" v-html="output">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-main>
|
|
</el-container>
|
|
<el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
|
|
<div style="text-align: center;">
|
|
<h3>一款简洁美观的微信 Markdown 编辑器</h3>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<img src="assets/images/qrcode.jpg" style="max-width: 300px">
|
|
<p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="success" plain @click="openWindow('https://github.com/yanglbme/wxmd-editor')">GitHub 仓库
|
|
</el-button>
|
|
<el-button type="success" plain @click="openWindow('https://gitee.com/yanglbme/wxmd-editor')">Gitee 仓库
|
|
</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/marked/0.7.0/marked.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/codemirror/5.48.4/codemirror.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/codemirror/5.48.4/mode/markdown/markdown.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/prettify/r298/prettify.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/element-ui/2.11.1/index.js"></script>
|
|
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
|
|
|
|
<script src="libs/sync-scroll.js"></script>
|
|
<script src="libs/FuriganaMD.js"></script>
|
|
|
|
<script src="assets/scripts/themes/default-theme.js"></script>
|
|
|
|
<script src="assets/scripts/renderers/wx-renderer.js"></script>
|
|
<script src="assets/scripts/util.js"></script>
|
|
<script src="assets/scripts/editor.js"></script>
|
|
<script src="assets/scripts/loading.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |