如何自己开发个Markdown编辑器（3）

之前已经实现了最基本的功能：编辑Markdown文本内容；自动预览；代码语法高亮。今天来做插入图片功能。从编辑角度来讲，插入图片无非就是按Markdown的格式输入一个图片的url

![baidu](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)

当插入一个网络上可访问的图片时无需做什么处理在预览中就可以正常显示，但如果要插入一个本地图片时现在是无法显示的，因为我们是基于web的形式，无法直接访问本地图片。

后端服务

为了可以添加本地图片，我们需要一个本地的后端服务，用来提供图片访问。同时我们需要为文章指定一个文件夹，用来存放插入的图片，以及后期保存文章。后端服务并不复杂，所以也不需要使用太复杂的框架来做，我们就直接使用express来实现。安装express

yarn add express

安装ts-node-dev，用于开发时动态编译

yarn add --dev ts-node-dev

然后在package.json中添加启动后端服务的script

"server": "tsnd --respawn server/index.ts"

在项目根目录新建server目录，用于存放后端服务代码，在目录下创建index.ts，作为后端服务的入口

import express from 'express'

const app = express()
const port = 3080

app.get('/', (req, res) => {
  res.send('后端服务正常启动了')
})

app.use('/assets', express.static(${__dirname}/docs))

app.listen(port, () => {
  // eslint-disable-next-line no-console
  console.log(Example app listening at http://localhost:${port})
})

当然，现在所有路径都是固定的，后期再改为动态与文章相关的路径。在server下新建docs/fordev文件夹，在里面放一张图片，用于试验，然后在Markdown编辑中插入图片

![我的公众号](http://localhost:3080/assets/fordev/xxqianyuan-qr.jpg)

去掉url前缀

现在能够插入本地图片了，但用户在编辑文章时显然不希望插入本地图片还要写上后端服务的完整地址，用户也不应该需要知道后端服务的地址。正常的操作应该是用户把图片放入文章所在目录，然后在文章中直接引用图片即可。当然，弹出对话框让用户自己选择图片然后自动插入到文章，这样的方式应该更好。今天先实现手动插入图片的功能，后期再做自动插入。

去掉url前缀其实很简单，只要调整marked配置，让marked自动添加前缀即可

// 设置marked选项
marked.setOptions({
  // url前缀
  baseUrl: 'http://localhost:3080/assets/fordev/',
  // ...

})

baseUrl会添加到所有相对链接地址的前面。然后Markdown中的本地图片就可以省略url前缀了

![我的公众号二维码](xxqianyuan-qr.jpg)

再一次，配置中的url是写死的，后期再改为动态关联文章目录。