熬夜开发一个简单实用，支持多平台（开源）的Markdown在线编辑器（开源）

前言之前，一直想开发自己的Markdown编辑器，主要是可以多写文章灵活地。另外开阔眼界也是一个很好的选择！所以我决定在周末找点乐子。首先，我研究了很多流行的在线md编辑器，它们都很优秀。不是为了超越他们，主要是为了让自己舒服一些。本文主要记录我是如何从0到1完成一个像样的Markdown编辑器的。完成项目列表Markdown编辑器研究国内外Markdown编辑器有很多。editor.mdURL:https://pandao.github.io/editor.md/是一个开源、可嵌入的Markdown在线编辑器（组件），基于CodeMirror、jQuery和Marked构建。这个组件好像是国内开发的，之前个人用一下还行。Typora官网：https://www.typora.io/Typora是一款免费的轻量级Markdown编辑器。不如Mou、Haroopad等Markdown编辑器出名，属于比较小众的产品。凭良心说，我用过好几个Markdown编辑器，包括：小博彩、Haroopad、Atom等，但Typora是最适合我的编辑器。它重量轻、速度快且易于使用，用起来不太舒服！！tui-editor网址：https://ui.toast.com/tui-editor这是一个Markdown组件，研究后决定使用。为什么？确认了眼神之后~技术栈Vue.jstui-editor实战确认了技术栈之后，我们就要脚踏实地的干活了。1.搭建Vue脚手架我们将使用VueCLI搭建一个基础项目。这里不需要Vue-router、Vuex等插件，所以尽量轻量。2.创建一个编辑器组件我们将在components文件目录下创建一个Editor.vue文件。这个文件也是我们的主战场，大部分的操作都会在这个文件中进行。3.配置编辑器组件在配置编辑器时，以下几点让我很困惑，我花了很多时间。代码没有突出显示。语言不是中文。编辑器风格有问题。以上问题可以通过以下措施解决：通过阅读文档：https://nhn.github.io/tui.editor/latest/访问Github网站：https://github.com/nhn/tui.editorEditor.vue看起来像上面几行代码，但是完成的添加也非常困难功能。首先，我开发这个程序的初衷是为了方便我写文章，所以我设置了这些要求：可以复制HTML格式的文本，方便复制到微信公众号可以复制Markdown文本，方便复制toRareEarthNuggets,csdnDownloadableMarkdown文件都发布在这些博客网站上，更方便保存和移动。由于篇幅原因，先给出主要逻辑代码。这里我使用了剪贴板，一个将文本复制到剪贴板的插件。网址：https://clipboardjs.com/。另外，downloadBlobAsFile方法主要是创建一个Blob对象，然后通过a标签的download属性进行下载。downloadBlobAsFile.jsexportdefaultfunctiondownloadBlobAsFile(data,filename){constcontentType='application/octet-stream';if(!data){console.error('Nodata');return;}if(!filename){filename='filetodonwload.txt';}if(typeofdata==='object'){data=JSON.stringify(data,undefined,4);}letblob=newBlob([data],{type:contentType});lete=document.createEvent('MouseEvents');leta=document.createElement('a');a.download=文件名;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微信样式优化公众号::v-deep是一个深度效果选择器，主要用于覆盖原有样式::v-deepulli{list-style-type:disc!important;}::v-deepolli{list-style-type:decimal!important;}::v-deepulli::before,::v-deepolli::before{content:none;}::v-deep.tui-editor-contentsp>code{background-color:#fff5f5;color:#ff502c;}::v-deep.tui-editor-contentspre{width:100%;overflow:auto;}在线体验https://www.maomin.club/site/mdeditor/结语感谢阅读，希望您没有浪费时间。源码地址：https://github.com/maomincoding/simpleMdEditor