-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (125 loc) · 5.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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>微信公众号格式化编辑器</title>
<link rel="shortcut icon" href="favicon.png">
<link rel="apple-touch-icon-precomposed" href="favicon.png">
<link rel="stylesheet" href="assets/css/vue-eleui.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="codemirror/codemirror.css">
<link rel="stylesheet" href="codemirror/theme/base16-light.css">
<link rel="stylesheet" href="codemirror/theme/duotone-light.css">
<link rel="stylesheet" href="codemirror/theme/monokai.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div id="app" class="container">
<el-container>
<el-header class="top">
<div class="logo">{{ title }}</div>
<el-form size="mini" class="ctrl" :inline=true>
<el-form-item label="Editor Themes">
<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="Fonts">
<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 style="float: left">{{ font.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px" >Abc</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Font Size">
<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 style="float: left">{{ size.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px" >{{ size.desc }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="Themes">
<el-select v-model="currentTheme" size="mini" placeholder="选择主题样式" @change="themeChanged">
<el-option v-for="theme in themeOption" :key="theme.value" :label="theme.label" :value="theme.value">
<span style="float: left">{{ theme.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ theme.author }}</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-button 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">
<section>
<div class="hint">全选复制或<a href="#" @click="copy" class="copy-button">点此复制</a>，然后在公众号编辑器粘贴</div>
<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>
<h3>WeChat Format 有什么用？</h3>
<p>能较好地排版；</p>
<p>能解决 <code>ul</code> 和 <code>ol</code> 渲染时样式被微信编辑器重置的问题；</p>
<p>能把外部链接自动转为参考文献索引，并且附在文章末尾</p>
<p> </p>
<h3>关于我</h3>
<p>我是 Lyric。如果你喜欢我的工具，可以：</p>
<p>关注我的公众号 "<code>iamlyricw</code>"，<a href='https://lyric.im' target='_blank' class='url'>博客</a> 或 <a href='https://github.com/lyricat/wechat-format' target='_blank' class='url'>Github</a></p>
<p>
微信打赏我：
<img src="./assets/images/wechat_qrcode.jpg" style="width: 60%; display: block; margin: 0 auto;"/>
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="aboutDialogVisible = false">打赏了！</el-button>
</span>
</el-dialog>
</div>
<script src="assets/scripts/axios.min.js"></script>
<script src="assets/scripts/marked.min.js"></script>
<script src="assets/scripts/vue.js"></script>
<script src="assets/scripts/vue-eleui.js"></script>
<script src="assets/scripts/FuriganaMD.js"></script>
<script src="codemirror/codemirror.js"></script>
<script src="codemirror/mode/markdown/markdown.js"></script>
<script src="assets/scripts/themes/default.js"></script>
<script src="assets/scripts/themes/lupeng.js"></script>
<script src="assets/scripts/renderers/wx-renderer.js"></script>
<script src="assets/scripts/editor.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-4178606-10"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-4178606-10');
</script>
</body>
</html>