9102年如何写一个本身的markdown在线编辑器

Markdown 在线编辑器

先贴出编辑器地址，涵盖了大多数markdown语法的快捷操做，实时编译实时预览，支持直接导出md 格式文件，支持微博图床。纯前端实现，没必要担忧数据被后台存储。未作移动端适配，建议pc食用。 欢迎各位有写做需求的大佬试用，提出宝贵意见。

背景 & 前言

市面上一些md编辑器 有的有实时预览，好比掘金，没有操做按钮（有快捷键的哈)，用着不是太方便，而简书的操做按钮有的受限于简书钻的数量。事实上有道词典的md编辑器作的很好，但最近出现了我出现了卡顿、中文难以输入上去的问题，弃之。
因此干脆本身撸一个，能够知足本身写东西的需求。 本身作的东西就算难用也得受着
因为手上没有windows设备，滚动条的样式还请本身修改下。

---

技术

vue less iview markdown-it iconfont

---

插件

markdown-it-mark 标记功能
markdown-it-emoji emoji表情解析
highligh.js代码高亮
markdown-it-task-checkbox 复选框功能
markdown-it-footnote 脚注功能

---

插件效果

==高亮标记==
:smiling_imp:

• text
• text
  ^{[1] [2]}

掘金没有支持标记与emoji，贴一下图。

原理

在编辑器输入组件中 watch输入内容的变化，有变化就实时调用markdown-it的render函数，并在localStorage中实时更新一份，防止页面误操做被跳出再返回时辛辛苦苦写的内容没了。同时也能够达到此次没写完页面关闭了，下次打开继续写的需求。 导出文件后草稿会被清空。 由于不调用接口存储数据，未作函数防抖处理，如需引入请自行添加。 微博图床的地址是从一个工具页面上扒下来的，感受写那个工具的兄弟也是从其余的地方扒的呢哈哈（开玩笑的），贴出工具地址：图床工具

---

下载打包

git clone git@github.com:ch957869975/md-editor.git
npm run dev 或 npm run build 打开 8080端口便可看到预览

---

有意思的点

作的时候遇到几个点比较有意思，提一下。

在光标位置插入字符

ie 支持document.selection，而绝大多数浏览器支持selectionStart 与 selectionEnd 两个属性。利用这两个属性加上字符串的substring方法动态拼接起来。 这里须要注意的是 用这个方法拼接起来的字符串，并无触发对变量的双向绑定，因此我在这里手动触发了一下textarea的input事件，以下：

document.querySelector('textarea').dispatchEvent(new Event('input'))
复制代码

---

文件在前端生成并下载

下载在前端开发中并不稀奇，但文件写入可能不常遇到，要不是写这个玩意，我也没作过文件生成。 代码以下：

if (!this.editorContent || !window.localStorage.getItem('MarkdownDraft')) {
     return this.$Notice.error({ title: '你尚未写内容' })
 }
const content = this.editorContent
const elem = document.createElement('a');
elem.download = 'draft.md';
elem.style.display = 'none';
const blob = new Blob([content], { type: 'text/plain' });
elem.href = URL.createObjectURL(blob)
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
setTimeout(() => {
   this.editorContent = ''
   window.localStorage.removeItem('MarkdownDraft')
}, 300)
复制代码

思路仍是比较清晰的：有值的时候才生成， 避免生成一个空文件。 利用Blob对象生成对应内容后，再建立一个 不可见的a标签并将 href和download属性添加进去，手动触发点击事件后并移除该标签。 可是须要考虑兼容性呀。 这里是a.download的支持状况，ie不支持！！！。

木得办法，作个判断吧。

if (!('download' in document.createElement('a'))) return this.$Notice.error({ title: '浏览器不支持' })
复制代码

可能你说ie怎么办？
回答：都9102年了，你还在用ie，不抛弃你抛弃谁？？

---

组件通讯

组件之间通讯，由于偷懒，用了bus.js，实际代码就两行

import Vue from 'vue'
export default new Vue()
复制代码

原理是 挂载在同一实例上的组件均可以触发实例上的事件，理论上是能够实现任意组件之间的通讯，无视组件层级关系。可是， 并不推荐这种作法，由于这会让你的逻辑太跳跃，具体表现就是你的代码东一榔头西一棒子，A组件在bus上绑定的事件常常找不到在哪里触发的，B组件触发的事件找不到是在哪里绑定的，维护起来较为困难。

---

总结

功能简单、技术简单、ui简单、部署简单。一个简单的小项目，就看你愿不肯意去作了。

这里贴出编辑器地址与源码地址。厚着脸皮求个star。 博客地址

不是全部的事情都能如愿以偿，可是任何事情都值得去尝试。加油！

ps: 下面两个脚注对应插件效果演示，没必要关心。

---

1. 脚注1 ↩︎

2. 脚注2 ↩︎