mirror of
https://github.com/doocs/md.git
synced 2024-11-24 19:10:34 +08:00
2.4 KiB
2.4 KiB
微信 Markdown 编辑器
本项目克隆自 https://github.com/zkqiang/wechat-mdeditor ,感谢 zkqiang 定义的基础 CSS 样式。
英文文档请看 README。
在线编辑器
- GitHub Page:https://yanglbme.github.io/wxmd-editor
- Gitee Page:https://yanglbme.gitee.io/wxmd-editor
注:对于国内(中国)的朋友,访问 Gitee Page 速度会相对快一些。
为什么要二次改造?
每个人的审美都不一样,我希望能在基础 CSS 样式的基础上进行改造,定义一款自己喜欢的微信 Markdown 编辑器。
如何扩展样式?
- 首先在
assets/scripts/themes/
文件夹下添加一个 js 文件作为扩展的主题样式,如pink.js
,内容的格式与其他主题保持一致,let 变量命名为pinkTheme
。 - 然后在
assets/scripts/editor.js
中,找到变量themeOption
,添加一个选项(建议将 author 设置为色值的十六进制),如:
接着在下方的themeOption: [ { label: '橘红', value: 'orange', author: '#ff5f2e' }, { label: '淡绿', value: 'lightgreen', author: '#42b983'}, { label: '暗青', value: 'darkcyan', author: '#008b8b'}, { label: '粉色', value: 'pink', author: '#ff1cae'}, ],
styleThemes
中添加 一个 pink 主题,如:styleThemes: { orange: orangeTheme, lightgreen: lightgreenTheme, darkcyan: darkcyanTheme, pink: pinkTheme, },
- 最后在
index.html
文件末尾引入 pink.js 文件,如:<script src="assets/scripts/themes/orange.js"></script> <script src="assets/scripts/themes/lightgreen.js"></script> <script src="assets/scripts/themes/darkcyan.js"></script> <script src="assets/scripts/themes/pink.js"></script>
我的公众号
可以用微信扫码关注我的公众号“Doocs开源社区”,原创技术文章第一时间推送。