我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)

前言

成都创新互联公司专业为企业提供洛南网站建设、洛南做网站、洛南网站设计、洛南网站制作等企业网站建设、网页设计与制作、洛南企业网站模板建站服务,10多年洛南做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

之前,一直想开发一款属于自己的Markdown编辑器,主要是自己平常写文章可以更加灵活操作,另外扩宽自己的视野也是非常不错的选择啊!所以在周末就决定玩耍一番。首先我调研了很多线上热门的md编辑器,都很优秀。不为超过他们,主要自己用着舒服点。这篇文章主要是记录下我是如何从0到1是完成一款还算拿得出手的Markdown编辑器。

完成项目一览

调研Markdown编辑器

国内、国外关于Markdown编辑器有很多。

editor.md

网址: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.js
  • tui-editor

实战

确定好技术栈之后,我们就得脚踏实地地干活了。

1. 搭建Vue脚手架

我们会使用VueCLI搭建一个最基础的项目,这里暂时不需要Vue-router、Vuex这些插件,所以尽可能轻装。

2. 创建编辑器组件

我们会在components文件目录下创建一个Editor.vue文件,这个文件也就是我们的主战场,大部分操作都会在这个文件。

3. 配置编辑器组件

在配置编辑器时,有以下几点使我非常困惑,以致于花费了大量时间。

  1. 代码没有被高亮
  2. 语言不是中文
  3. 编辑器样式有问题

以上这几个问题通过以下措施才得以解决:

  1. 通过阅读文档:https://nhn.github.io/tui.editor/latest/
  2. 访问Github网站:https://github.com/nhn/tui.editor

Editor.vue

 
 
 
 
  1.  
  2.  

看似上面几行代码,但是也是很费劲才得以完成。

增加功能

首先,我开发这个程序的初衷是更好地方便自己写文章,所以,我定下了这几个需求:

  1. 可复制HTML格式文本,方便复制到微信公众号
  2. 可复制Markdown文本,方便可以复制到稀土掘金、csdn这些博客网站上发布
  3. 可下载Markdown文件,更加方便保存和移动

因篇幅原因,先奉上主要逻辑代码。这里我使用了clipboard这个将文本复制到剪贴板的插件。网址:https://clipboardjs.com/。

另外,downloadBlobAsFile方法主要是创建Blob对象,然后通过a标签的download属性进行下载。

downloadBlobAsFile.js

 
 
 
 
  1. export default function downloadBlobAsFile(data, filename) { 
  2.     const contentType = 'application/octet-stream'; 
  3.     if (!data) { 
  4.         console.error(' No data'); 
  5.         return; 
  6.     } 
  7.  
  8.     if (!filename) { 
  9.         filename = 'filetodonwload.txt'; 
  10.     } 
  11.  
  12.     if (typeof data === 'object') { 
  13.         data = JSON.stringify(data, undefined, 4); 
  14.     } 
  15.  
  16.     let blob = new Blob([data], {type: contentType}); 
  17.     let e = document.createEvent('MouseEvents'); 
  18.     let a = document.createElement('a'); 
  19.  
  20.     a.download = filename; 
  21.     a.href = URL.createObjectURL(blob); 
  22.     a.dataset.downloadurl = [contentType, a.download, a.href].join(':'); 
  23.     e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
  24.     a.dispatchEvent(e); 

Editor.vue

 
 
 
 
  1.  
  2.  

针对微信公众号进行样式优化

::v-deep是深度作用选择器,主要是为了覆盖原有的样式所用。

 
 
 
 
  1. ::v-deep ul li { 
  2.   list-style-type: disc !important; 
  3.  
  4. ::v-deep ol li { 
  5.   list-style-type: decimal !important; 
  6.  
  7. ::v-deep ul li::before, ::v-deep ol li::before { 
  8.   content: none; 
  9. ::v-deep .tui-editor-contents p>code{ 
  10.   background-color: #fff5f5; 
  11.   color: #ff502c; 
  12. ::v-deep .tui-editor-contents pre { 
  13.   width: 100%; 
  14.   overflow: auto; 

线上体验

https://www.maomin.club/site/mdeditor/

结语

谢谢阅读,希望没有浪费你的时间。

源码地址:

https://github.com/maomincoding/simpleMdEditor

网页题目:我熬夜开发了一款简约实用、支持多平台的Markdown在线编辑器(开源)
文章网址:http://www.shufengxianlan.com/qtweb/news39/407689.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联