forked from lyricat/wechat-format
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (118 loc) · 5.87 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
<!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="src/favicon.png">
<link rel="apple-touch-icon-precomposed" href="src/favicon.png">
<link rel="stylesheet" href="src/assets/css/vue-eleui.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="src/codemirror/codemirror.css">
<link rel="stylesheet" href="src/codemirror/theme/base16-light.css">
<link rel="stylesheet" href="src/codemirror/theme/duotone-light.css">
<link rel="stylesheet" href="src/codemirror/theme/monokai.css">
<link rel="stylesheet" href="src/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="./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="src/assets/scripts/axios.min.js"></script>
<script src="src/assets/scripts/marked.min.js"></script>
<script src="src/assets/scripts/vue.js"></script>
<script src="src/assets/scripts/vue-eleui.js"></script>
<script src="src/assets/scripts/FuriganaMD.js"></script>
<script src="src/codemirror/codemirror.js"></script>
<script src="src/codemirror/mode/markdown/markdown.js"></script>
<script src="src/assets/scripts/themes/default.js"></script>
<script src="src/assets/scripts/themes/lupeng.js"></script>
<script src="src/assets/scripts/themes/reverseKill.js"></script>
<script src="src/assets/scripts/renderers/wx-renderer.js"></script>
<script src="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>