前言
之前，一直想开发一款属于自己的Markdown编辑器，主要是自己平常写文章可以更加灵活操作，另外扩宽自己的视野也是非常不错的选择啊！所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器，都很优秀。不为超过他们，主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。
完成项目一览
调研Markdown编辑器
国内、国外关于Markdown编辑器有很多。
- editor.md
网址：https://pandao.github.io/editor.md/
是一款开源的、可嵌入的 Markdown 在线编辑器（组件），基于 CodeMirror、jQuery 和 Marked 构建。这个组件好像是国内开发的，个人之前用着还可以。
- typora
Typora是一款免费的轻量级Markdown编辑器，它没有Mou，Haroopad等Markdown编辑器那么大名鼎鼎，算是较为小众的一款产品。 凭良心说话，我用过的Markdown编辑器也有好几款，其中包括：小书匠，Haroopad，Atom等，但Typora是最合我心意的一款编辑器了，其轻量、快速、易于上手，使用起来简直不要太舒服！！
- tui-editor
网址：https://ui.toast.com/tui-editor
这是一款Markdown组件，通过调研决定用它。为什么？确认过眼神~
技术栈
- Vue.js
- tui-editor
实战
确定好技术栈之后，我们就得脚踏实地地干活了。
1. 搭建Vue脚手架
我们会使用VueCLI搭建一个最基础的项目，这里暂时不需要Vue-router、Vuex这些插件，所以尽可能轻装。
2. 创建编辑器组件
我们会在components文件目录下创建一个Editor.vue文件，这个文件也就是我们的主战场，大部分操作都会在这个文件。
3. 配置编辑器组件
在配置编辑器时，有以下几点使我非常困惑，以致于花费了大量时间。
- 代码没有被高亮
- 语言不是中文
- 编辑器样式有问题
以上这几个问题通过以下措施才得以解决：
- 访问Github网站：
https://github.com/nhn/tui.editor
Editor.vue
<template> <div class="main"> <div id="editor"></div> </div> </template> <script> import Editor from "@toast-ui/editor"; import hljs from "highlight.js"; import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight"; import '@toast-ui/editor/dist/i18n/zh-cn.js'; import "highlight.js/styles/github.css"; import "codemirror/lib/codemirror.css"; // Editor's Dependency Style import "@toast-ui/editor/dist/toastui-editor.css"; // Editor's Style import "@/styles/index.css"; export default { components: {}, data() { return { editor: null }; }, mounted() { this.editor = new Editor({ el: document.getElementById("editor"), plugins: [[codeSyntaxHighlight, {hljs}]], previewStyle: "vertical", height: "100vh", initialEditType: "markdown", minHeight: "200px", initialValue: "", placeholder: "你想写点什么...", language:'zh-CN', useCommandShortcut: true, useDefaultHTMLSanitizer: true, usageStatistics: false, hideModeSwitch: false, viewer: true, toolbarItems: [ "heading", "bold", "italic", "strike", "divider", "hr", "quote", "divider", "ul", "ol", "task", "indent", "outdent", "divider", "table", "image", "link", "divider", "code", "codeblock", ], }); this.editor.getUI().getToolbar().removeItem("21"); }, }; </script>
看似上面几行代码，但是也是很费劲才得以完成。
增加功能
首先，我开发这个程序的初衷是更好地方便自己写文章，所以，我定下了这几个需求：
- 可复制HTML格式文本，方便复制到微信公众号
- 可复制Markdown文本，方便可以复制到稀土掘金、csdn这些博客网站上发布
- 可下载Markdown文件，更加方便保存和移动
因篇幅原因，先奉上主要逻辑代码。这里我使用了clipboard这个将文本复制到剪贴板的插件。网址：https://clipboardjs.com/。 另外，downloadBlobAsFile方法主要是创建Blob对象，然后通过a标签的download属性进行下载。
downloadBlobAsFile.js
export default function downloadBlobAsFile(data, filename) { const contentType = 'application/octet-stream'; if (!data) { console.error(' No data'); return; } if (!filename) { filename = 'filetodonwload.txt'; } if (typeof data === 'object') { data = JSON.stringify(data, undefined, 4); } let blob = new Blob([data], {type: contentType}); let e = document.createEvent('MouseEvents'); let a = document.createElement('a'); a.download = filename; a.href = URL.createObjectURL(blob); a.dataset.downloadurl = [contentType, a.download, a.href].join(':'); e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(e); }
Editor.vue
<template> <div class="main"> <div class="tools"> <el-button size="mini" type="primary" @click="drawer = true" >工具</el-button> <el-button size="mini" type="primary" @click="aboutView = true" >关于</el-button> <el-dialog :title="'工具'" :visible.sync="drawer" :append-to-body="true" > <div class="tool-innter"> <el-button type="primary" @click="getHtml" class="htmlbtn" >复制HTML </el-button > <el-button type="primary" @click="getMd" class="mdbtn" >复制MarkDown </el-button > <el-button type="primary" @click="downloadMd" class="downloadbtn" >下载MarkDown </el-button > </div> </el-dialog> <el-dialog :title="'关于'" :visible.sync="aboutView" :append-to-body="true" > <h3>Simple·MarkDown编辑器</h3> <ul class="functionList"> <li v-for="(item,index) in functionList" :key="index"> {{item}} </li> </ul> <h3>作者</h3> <ul class="functionList"> <li v-for="(item,index) in authorList" :key="index">{{item}}</li> </ul> <div class="wxcode"> <img src="../assets/wxcode.jpeg" alt=""> </div> </el-dialog> </div> <div id="editor"></div> </div> </template> <script> import Editor from "@toast-ui/editor"; import Clipboard from "clipboard"; import hljs from "highlight.js"; import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight"; import '@toast-ui/editor/dist/i18n/zh-cn.js'; import downloadBlobAsFile from "../utils/download"; import "highlight.js/styles/github.css"; //https://github.com/highlightjs/highlight.js/tree/master/src/styles import "codemirror/lib/codemirror.css"; // Editor's Dependency Style import "@toast-ui/editor/dist/toastui-editor.css"; // Editor's Style import "@/styles/index.css"; export default { components: {}, data() { return { editor: null, drawer: false, aboutView: false, functionList:['页面简约','功能实用','支持稀土掘金、CSDN、微信公众号、知乎','可复制HTML、MarkDown','可下载MarkDown文件'], authorList:['作者：Vam的金豆之路','欢迎关注我的公众号：前端历劫之路','我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入'] }; }, methods: { // 复制HTML getHtml() { const clipboard = new Clipboard(".htmlbtn", { target: () => this.editor.preview.el, }); clipboard.on("success", () => { this.$message({ message: "复制成功", type: "success", }); clipboard.destroy(); }); clipboard.on("error", () => { this.$message.error("复制失败"); clipboard.destroy(); }); }, // 复制Markdown getMd() { const clipboard = new Clipboard(".mdbtn", { text: () => this.editor.getMarkdown(), }); clipboard.on("success", () => { this.$message({ message: "复制成功", type: "success", }); clipboard.destroy(); }); clipboard.on("error", () => { this.$message.error("复制失败"); clipboard.destroy(); }); }, // 下载Markdown downloadMd() { if (this.editor.getMarkdown().trim()) { downloadBlobAsFile(this.editor.getMarkdown(), "unnamed.md"); } else { this.$message.error("下载失败"); } }, }, mounted() { this.editor = new Editor({ el: document.getElementById("editor"), plugins: [[codeSyntaxHighlight, {hljs}]], previewStyle: "vertical", height: "100vh", initialEditType: "markdown", minHeight: "200px", initialValue: "", placeholder: "你想写点什么...", language:'zh-CN', useCommandShortcut: true, useDefaultHTMLSanitizer: true, usageStatistics: false, hideModeSwitch: false, viewer: true, toolbarItems: [ "heading", "bold", "italic", "strike", "divider", "hr", "quote", "divider", "ul", "ol", "task", "indent", "outdent", "divider", "table", "image", "link", "divider", "code", "codeblock", ], }); this.editor.getUI().getToolbar().removeItem("21"); }, }; </script>
针对微信公众号进行样式优化
::v-deep是深度作用选择器，主要是为了覆盖原有的样式所用。
::v-deep ul li { list-style-type: disc !important; } ::v-deep ol li { list-style-type: decimal !important; } ::v-deep ul li::before, ::v-deep ol li::before { content: none; } ::v-deep .tui-editor-contents p>code{ background-color: #fff5f5; color: #ff502c; } ::v-deep .tui-editor-contents pre { width: 100%; overflow: auto; }
线上体验
https://www.maomin.club/site/mdeditor/
结语
谢谢阅读，希望没有浪费你的时间。
源码地址：
https://github.com/maomincoding/simpleMdEditor
如果对你有帮助，欢迎Star~
