2019-11-01 17:16:40 +08:00
|
|
|
<!DOCTYPE html>
|
2019-12-29 17:16:45 +08:00
|
|
|
<!--
|
|
|
|
|
_.._ ,------------.
|
|
|
|
|
,' `. ( 你终于发现我啦 )
|
|
|
|
|
/ __) __` \ `-,----------'
|
|
|
|
|
( (`-`(-') ) _.-'
|
|
|
|
|
/) \ = / (
|
|
|
|
|
/' |--' . \
|
|
|
|
|
( ,---| `-.)__`
|
|
|
|
|
)( `-.,--' _`-.
|
|
|
|
|
'/,' ( Uu",
|
|
|
|
|
(_ , `/,-' )
|
|
|
|
|
`.__, : `-'/ /`--'
|
|
|
|
|
| `--' |
|
|
|
|
|
` `-._ /
|
|
|
|
|
\ (
|
|
|
|
|
/\ . \.
|
|
|
|
|
/ |` \ ,-\
|
|
|
|
|
/ \| .) / \
|
|
|
|
|
( ,'|\ ,' :
|
|
|
|
|
| \,`.`--"/ }
|
|
|
|
|
`,' \ |,' /
|
|
|
|
|
/ "-._ `-/ |
|
|
|
|
|
"-. "-.,'| ;
|
|
|
|
|
/ _/["---'""]
|
|
|
|
|
: / |"- '
|
|
|
|
|
' | /
|
|
|
|
|
` |
|
|
|
|
|
-->
|
2019-11-01 17:16:40 +08:00
|
|
|
<html lang="en">
|
2019-11-05 16:57:31 +08:00
|
|
|
|
2019-11-01 17:16:40 +08:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2019-11-10 16:59:23 +08:00
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
2019-11-28 21:33:19 +08:00
|
|
|
<meta name="keywords" content="md,markdown,markdown-editor,wechat,official-account,yanglbme,doocs">
|
2019-11-10 16:59:23 +08:00
|
|
|
<meta name="description" content="Wechat Markdown Editor | 一款高度简洁的微信 Markdown 编辑器">
|
2019-11-30 20:36:32 +08:00
|
|
|
<meta name="viewport"
|
|
|
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
2019-11-05 16:57:31 +08:00
|
|
|
<title>微信 Markdown 编辑器</title>
|
2019-11-01 17:16:40 +08:00
|
|
|
<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">
|
2019-11-06 19:21:01 +08:00
|
|
|
<link rel="stylesheet" href="libs/css/index.css">
|
2019-12-10 19:16:05 +08:00
|
|
|
|
2019-11-06 19:21:01 +08:00
|
|
|
<link rel="stylesheet" href="libs/css/xq-light.min.css">
|
|
|
|
|
<link rel="stylesheet" href="libs/css/code-themes/github-v2.min.css">
|
2019-12-10 19:16:05 +08:00
|
|
|
|
2019-12-10 21:47:04 +08:00
|
|
|
<!-- codemirror -->
|
2019-12-10 19:16:05 +08:00
|
|
|
<link rel="stylesheet" href="libs/css/codemirror.min.css">
|
|
|
|
|
<link rel="stylesheet" href="libs/css/show-hint.css">
|
|
|
|
|
<link rel="stylesheet" href="libs/css/style-mirror.css">
|
2019-12-25 21:56:35 +08:00
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="libs/css/animate.css">
|
2019-12-29 16:29:03 +08:00
|
|
|
<link rel="stylesheet" href="assets/css/app.css">
|
2019-12-10 19:16:05 +08:00
|
|
|
|
2019-12-11 16:28:20 +08:00
|
|
|
<!-- 默认CSS/JS -->
|
|
|
|
|
<script src="assets/scripts/themes/default-theme-css.js"></script>
|
|
|
|
|
<script src="assets/scripts/default-content.js"></script>
|
2019-11-01 17:16:40 +08:00
|
|
|
</head>
|
2019-11-05 16:57:31 +08:00
|
|
|
|
2019-11-01 17:16:40 +08:00
|
|
|
<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">
|
2019-11-30 21:07:27 +08:00
|
|
|
<!-- 图片上传 -->
|
2019-12-19 09:26:01 +08:00
|
|
|
<el-upload action="https://imgkr.com/api/files/upload" headers="{'Content-Type': 'multipart/form-data'}"
|
2019-12-31 11:35:33 +08:00
|
|
|
:show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
|
|
|
|
|
:before-upload="beforeUpload" :on-success="uploaded">
|
2019-12-29 21:23:47 +08:00
|
|
|
<el-tooltip class="item" effect="dark" content="上传图片" placement="bottom-start">
|
2019-12-01 15:04:27 +08:00
|
|
|
<i class="el-icon-upload" size="medium"> </i>
|
|
|
|
|
</el-tooltip>
|
2019-11-30 20:36:32 +08:00
|
|
|
</el-upload>
|
2019-12-19 21:04:13 +08:00
|
|
|
<!-- 下载文本文档 -->
|
2019-12-29 21:23:47 +08:00
|
|
|
<el-tooltip class="item" effect="dark" content="下载编辑框Markdown文档" placement="bottom-start">
|
2019-12-19 21:04:13 +08:00
|
|
|
<i class="el-icon-download" size="medium" @click="downloadEditorContent"> </i>
|
|
|
|
|
</el-tooltip>
|
2019-12-07 16:46:30 +08:00
|
|
|
<!-- 页面重置 -->
|
2019-12-29 21:23:47 +08:00
|
|
|
<el-tooltip class="item" effect="dark" content="重置页面" placement="bottom-start">
|
2019-12-07 16:46:30 +08:00
|
|
|
<i class="el-icon-refresh" size="medium" @click="reset"> </i>
|
|
|
|
|
</el-tooltip>
|
2019-12-29 21:23:47 +08:00
|
|
|
<!-- 插入表格 -->
|
|
|
|
|
<el-tooltip class="item" effect="dark" content="插入表格" placement="bottom-start">
|
|
|
|
|
<i class="el-icon-s-grid" size="medium" @click="dialogFormVisible = true"> </i>
|
|
|
|
|
</el-tooltip>
|
2019-11-01 17:16:40 +08:00
|
|
|
<el-form size="mini" class="ctrl" :inline=true>
|
2019-12-25 22:41:41 +08:00
|
|
|
<el-form-item>
|
2019-11-06 17:13:48 +08:00
|
|
|
<el-select v-model="currentFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
|
2019-11-05 16:57:31 +08:00
|
|
|
<el-option v-for="font in builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
|
|
|
|
|
:label="font.label" :value="font.value">
|
2019-11-01 17:16:40 +08:00
|
|
|
<span class="select-item-left">{{ font.label }}</span>
|
|
|
|
|
<span class="select-item-right">Abc</span>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
2019-12-25 22:41:41 +08:00
|
|
|
<el-form-item>
|
2019-11-06 17:13:48 +08:00
|
|
|
<el-select v-model="currentSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
|
2019-11-05 16:57:31 +08:00
|
|
|
<el-option v-for="size in sizeOption" :key="size.value" :label="size.label" :value="size.value">
|
2019-11-01 17:16:40 +08:00
|
|
|
<span class="select-item-left">{{ size.label }}</span>
|
|
|
|
|
<span class="select-item-right">{{ size.desc }}</span>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
2019-12-25 22:41:41 +08:00
|
|
|
<el-form-item>
|
2019-11-06 17:13:48 +08:00
|
|
|
<el-select v-model="currentColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
|
2019-11-05 21:32:50 +08:00
|
|
|
<el-option v-for="color in colorOption" :key="color.value" :label="color.label" :value="color.value">
|
|
|
|
|
<span class="select-item-left">{{ color.label }}</span>
|
2019-11-06 17:13:48 +08:00
|
|
|
<span class="select-item-right">{{ color.hex }}</span>
|
2019-11-01 17:16:40 +08:00
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
2019-12-19 09:26:01 +08:00
|
|
|
<el-tooltip content="自定义颜色" placement="top">
|
|
|
|
|
<el-color-picker v-model="currentColor" size="mini" show-alpha @change="colorChanged"></el-color-picker>
|
|
|
|
|
</el-tooltip>
|
2019-12-07 21:14:02 +08:00
|
|
|
|
|
|
|
|
<el-tooltip content="微信外链自动转为文末引用" placement="top">
|
2019-12-19 09:26:01 +08:00
|
|
|
<el-switch v-model="status" active-color="#67c23a" inactive-color="#dcdfe6" @change="statusChanged">
|
2019-12-07 21:14:02 +08:00
|
|
|
</el-switch>
|
|
|
|
|
</el-tooltip>
|
2019-11-01 17:16:40 +08:00
|
|
|
</el-form>
|
2019-12-05 17:03:54 +08:00
|
|
|
<el-tooltip class="item" effect="dark" content="自定义CSS样式" placement="left">
|
|
|
|
|
<el-button type="success" plain size="medium" icon="el-icon-setting" @click="customStyle"></el-button>
|
|
|
|
|
</el-tooltip>
|
2019-11-06 11:19:05 +08:00
|
|
|
<el-button type="success" plain size="medium" @click="copy">复制</el-button>
|
|
|
|
|
<el-button type="success" plain size="medium" class="about" @click="aboutDialogVisible = true">关于</el-button>
|
2019-11-01 17:16:40 +08:00
|
|
|
</el-header>
|
|
|
|
|
<el-main class="main-body">
|
|
|
|
|
<el-row :gutter="10" class="main-section">
|
|
|
|
|
<el-col :span="12">
|
2019-12-25 21:56:35 +08:00
|
|
|
<textarea id="editor" type="textarea" placeholder="Your markdown text here." v-model="source">
|
2019-11-01 17:16:40 +08:00
|
|
|
</textarea>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12" class="preview-wrapper" id="preview">
|
|
|
|
|
<section>
|
|
|
|
|
<div class="preview" contenteditable="true">
|
2019-12-24 22:53:53 +08:00
|
|
|
<section id="output" v-html="output">
|
|
|
|
|
</section>
|
2019-11-01 17:16:40 +08:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</el-col>
|
2019-12-10 21:47:04 +08:00
|
|
|
<transition name="custom-classes-transition" enter-active-class="animated bounceInRight">
|
2019-12-10 19:16:05 +08:00
|
|
|
<el-col id="cssBox" :span="12" v-show="showBox">
|
2019-12-25 21:56:35 +08:00
|
|
|
<textarea id="cssEditor" type="textarea" placeholder="Your custom css here.">
|
2019-12-10 19:16:05 +08:00
|
|
|
</textarea>
|
|
|
|
|
</el-col>
|
2019-12-10 21:47:04 +08:00
|
|
|
</transition>
|
|
|
|
|
|
2019-11-01 17:16:40 +08:00
|
|
|
</el-row>
|
|
|
|
|
</el-main>
|
|
|
|
|
</el-container>
|
|
|
|
|
<el-dialog title="关于" :visible.sync="aboutDialogVisible" width="30%" center>
|
2019-11-05 16:57:31 +08:00
|
|
|
<div style="text-align: center;">
|
2019-11-10 16:59:23 +08:00
|
|
|
<h3>一款高度简洁的微信 Markdown 编辑器</h3>
|
2019-11-01 17:16:40 +08:00
|
|
|
</div>
|
2019-12-23 21:43:25 +08:00
|
|
|
<div style="text-align: center;margin-top:10px;">
|
2019-11-05 16:57:31 +08:00
|
|
|
<p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
|
2019-12-23 21:43:25 +08:00
|
|
|
<img src="assets/images/qrcode-for-doocs.jpg" style="width: 40%; display: block; margin: 20px auto 10px;">
|
2019-11-01 17:16:40 +08:00
|
|
|
</div>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
2019-12-10 21:47:04 +08:00
|
|
|
<a href="https://github.com/doocs/md" target="_blank">
|
2019-12-25 21:56:35 +08:00
|
|
|
<el-button type="success" plain>GitHub 仓库</el-button>
|
2019-12-10 21:47:04 +08:00
|
|
|
</a>
|
|
|
|
|
<a href="https://gitee.com/doocs/md" target="_blank">
|
2019-12-25 21:56:35 +08:00
|
|
|
<el-button type="success" plain>Gitee 仓库</el-button>
|
2019-12-10 21:47:04 +08:00
|
|
|
</a>
|
2019-11-05 16:57:31 +08:00
|
|
|
</span>
|
2019-12-29 21:23:47 +08:00
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog title="插入表格" :visible.sync="dialogFormVisible">
|
|
|
|
|
<el-form :model="form">
|
|
|
|
|
<el-form-item label="行数(表头不计入行数)">
|
2019-12-31 11:35:33 +08:00
|
|
|
<el-input v-model="form.rows"></el-input>
|
2019-12-29 21:23:47 +08:00
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="列数">
|
|
|
|
|
<el-input v-model="form.cols"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button type="success" plain @click="dialogFormVisible = false">取 消</el-button>
|
|
|
|
|
<el-button type="success" @click="insertTable">确 定</el-button>
|
|
|
|
|
</div>
|
2019-11-01 17:16:40 +08:00
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
|
2019-11-06 19:21:01 +08:00
|
|
|
<script src="libs/scripts/vue.min.js"></script>
|
|
|
|
|
<script src="libs/scripts/axios.min.js"></script>
|
|
|
|
|
<script src="libs/scripts/marked.min.js"></script>
|
2019-12-10 19:16:05 +08:00
|
|
|
|
2019-12-10 21:47:04 +08:00
|
|
|
<!-- codemirror -->
|
2019-12-10 19:16:05 +08:00
|
|
|
<script src="libs/scripts/codemirror/codemirror.min.js"></script>
|
|
|
|
|
<script src="libs/scripts/codemirror/css.js"></script>
|
|
|
|
|
<script src="libs/scripts/codemirror/matchbrackets.js"></script>
|
|
|
|
|
<script src="libs/scripts/codemirror/active-line.js"></script>
|
|
|
|
|
<script src="libs/scripts/codemirror/show-hint.js"></script>
|
|
|
|
|
<script src="libs/scripts/codemirror/css-hint.js"></script>
|
|
|
|
|
<script src="libs/scripts/codemirror/format.js"></script>
|
|
|
|
|
|
2019-11-06 19:21:01 +08:00
|
|
|
<script src="libs/scripts/markdown.min.js"></script>
|
|
|
|
|
<script src="libs/scripts/prettify.min.js"></script>
|
|
|
|
|
<script src="libs/scripts/index.js"></script>
|
|
|
|
|
<script src="libs/scripts/jquery.min.js"></script>
|
2019-12-07 18:03:26 +08:00
|
|
|
<script src="libs/scripts/closebrackets.js"></script>
|
2019-11-30 20:36:32 +08:00
|
|
|
|
2019-11-06 11:19:05 +08:00
|
|
|
<script src="assets/scripts/sync-scroll.js"></script>
|
2019-11-05 21:32:50 +08:00
|
|
|
<script src="assets/scripts/themes/default-theme.js"></script>
|
2019-11-01 17:16:40 +08:00
|
|
|
<script src="assets/scripts/renderers/wx-renderer.js"></script>
|
2019-11-05 21:32:50 +08:00
|
|
|
<script src="assets/scripts/util.js"></script>
|
2019-11-01 17:16:40 +08:00
|
|
|
<script src="assets/scripts/editor.js"></script>
|
2019-12-29 17:16:45 +08:00
|
|
|
<script>
|
|
|
|
|
$('#loading').hide();
|
2019-12-31 11:35:33 +08:00
|
|
|
window.console
|
|
|
|
|
&& window.console.log
|
|
|
|
|
&& (console.log("Think big, train fast, learn deep. See https://github.com/yanglbme"))
|
2019-12-29 17:16:45 +08:00
|
|
|
</script>
|
2019-11-01 17:16:40 +08:00
|
|
|
</body>
|
2019-12-29 17:16:45 +08:00
|
|
|
|
2019-11-05 16:57:31 +08:00
|
|
|
</html>
|
