当前位置: 首页 > 科技观察

熬夜开发一个简单实用,支持多平台(开源)的Markdown在线编辑器(开源)

时间:2023-03-18 18:18:59 科技观察

前言之前,一直想开发自己的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