![封面2.jpeg](http://112.124.1.74/static/img/35d5c12b29e9abb8d9d768249034c509.%E5%B0%81%E9%9D%A22.jpeg)
## 📖阅读本文，您将收获

- 工作中如何使用 Git回退到某一个历史提交记录
- `git reset`与`git revert`两者的区别



## 预设场景

> 我们先假设一个理想的场景，

- 某公司有A、B两位员工共同维护一个项目
- 现在A、B都向Git源仓库提交过代码，A、B提交的历史记录如下：
    
    A员工提交：A员工: 您好！
    
    提交的内容变动: 
    
    * 创建一个`index.js`文件，并且写入`console.log('A员工：您好！');`
    
    ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1af29aebc9e4fffb056956a4c29f7bc~tplv-k3u1fbpfcp-zoom-1.image)
    B员工提交：B员工:点赞
    
    提交内容变动：
    * 删除了`index.js`文件中`console.log('A员工：您好！');`这一行代码，并且写入`console.log('B员工：点赞')`
    * 创建`main.js`文件，写入`console.log('B员工：您好！');`
     
   ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c088c7737c74d24867c460f8341dd63~tplv-k3u1fbpfcp-zoom-1.image)
   
   A员工再次提交：B员工:瞎改，我锤你哦
   
   提交内容变动：
   * `main.js`文件中添加一行`console.log('A员工：动我代码，我跟你拼命');`
   
   ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4e678c586e964d7189d4b3ab76aa4e07~tplv-k3u1fbpfcp-zoom-1.image)
        A、B员工Git历史提交顺序：

    ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90adb817c1c546dfb52786801230fa45~tplv-k3u1fbpfcp-zoom-1.image)
- 问题：B员工因删了A员工的代码，被A员工怼了一顿；现在A员工想自己找回被B员工删除的代码，该什么做呢？

## 解决A员工问题

解决A员工的问题有两种方法：`git reset`、`git revert`，它们都能达到回退至某个历史git提交记录目的。

### `git revert`

现在把git历史记录回退到A员工提交的"A员工:您好！"，复制commit记录唯一值。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/798571df14b74c12b63687564279b3ca~tplv-k3u1fbpfcp-zoom-1.image)

执行`git revert commit-id`

```Bash
git revert 65ddd52968631b718021fdb2abd9f423cb71ce2d
```

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/039ff143986848ecbb1fbaddd497dd10~tplv-k3u1fbpfcp-zoom-1.image)

解决冲突后，重新`git add 、git commit、git push`提交至远程仓库即可。

使用`git revert`相当于增加一个`git commit`，它依旧会保留以前的历史记录。

### `git reset`

相同的，我们把git历史记录回退到A员工提交的"A员工:您好！"，此时与`git revert`稍有不同；需要使用提交记录"A员工:你好！"的commit id。将git 历史记录"A员工:你好！"之后提交的所有记录回退。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1fe54e478dde4370b0bf0a614255d0b2~tplv-k3u1fbpfcp-zoom-1.image)

回退后，本地代码与远程仓库不同步；因此在推送远程需要**强制推送**`git push ... -f`,强行覆盖远程仓库。

### `git revert`与`git revert`的区别

- `git revert`、`git reset`都能完成Git 记录回退代码的目的
- `git revert`相当于新增一条Git记录，不会消除已存在的记录
- `git reset` 会消除存在的记录，并且`push` 至远程需要强制推送；多人协同时，在回退期间并不能保证其他人有没有提交过代码，所以强制推送是有风险的，它容易覆盖掉其他人提交的代码

# 总结

使用`git revert、git reset`都能帮助我们回退历史记录，但`git reset`需要进行强制推送至远程，有风险。工作中更推荐使用`git revert`命令。

另外，如果文章内容对您有所帮助，帮我**点赞+评论+关注**就是对我的最大的支持❤️

【Git】有人瞎动你代码怎么办？学会git reset、 revert轻松解决！

![image.png](http://112.124.1.74/static/img/a848ca0fa6032301b662a2efb86efd6e.image.png)
> 文章已收录:https://github.com/CatsAndMice/Blog

公司需求拍摄视频上传，拍摄的视频体积大，上传常常因超时，导致上传失败。对此视频文件上传前，需要对文件进行一定的处理，实践中选择了ffmpem进行操作，本文目的是将ffmpem个人踩坑经验分享给大家



### ffmpeg视频压缩转码

上传视频将存储于[阿里云oss]([对象存储OSS_云存储服务_企业数据管理_存储-阿里云 (aliyun.com)](https://www.aliyun.com/product/oss/))，如果将视频压缩成压缩包上传，服务器端需要将上传成功的压缩包进行解压，第三方服务器并没有提供类似方案，这样客户端播放视频要将线上压缩包下载后进行解缩再播放，一来二去肯定会花费时间与性能，用户体验不友好，压缩成压缩包上传肯定是不能的。

移动端拍摄的视频格式一般为mp4或mov, 能不能将视频转化成其他体积相对更小的视频格式呢？思路可行，一顿Chrome找到了[专业视频处理库ffmpeg.js]([Kagami/ffmpeg.js: Port of FFmpeg with Emscripten (github.com)](https://github.com/Kagami/ffmpeg.js)),ffmpeg纯`C,C++`语言编写。

非`javaScpit`语言为什么能在浏览器环境中运行，不在本文中介绍。

有兴趣者，请阅读[WebAssembly]([WebAssembly概念 - WebAssembly | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts))

![](https://i.bmp.ovh/imgs/2021/10/39abc5f97fc95e34.png)

ffmpeg压缩视频使用就简单的几行代码，复制粘贴完事。

然而简单的几行代码，运行却报错😂

![](https://i.bmp.ovh/imgs/2021/10/2f58b3e6af88dbc2.png)

查阅[仓库issues#231]([SharedArrayBuffer is not defined in chrome 92 · Issue #231 · ffmpegwasm/ffmpeg.wasm (github.com)](https://github.com/ffmpegwasm/ffmpeg.wasm))，发现问题是chrome92版本发布限制了`SharedArrayBuffer`使用

#### 解决SharedArrayBuffer报错

##### 1. SharedArrayBuffer 降级 ArrayBuffer

```js
if(!crossOriginIsolated) {
  SharedArrayBuffer = ArrayBuffer;
}
```

缺点: 可以影响功能

ffmpeg.js运行失败

![](https://i.bmp.ovh/imgs/2021/10/663e0b0b24cbe099.png)

##### 2. 设置响应COOP和COEP状况

```js
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

缺点: 影响加载跨域资源，如iframe,script标签加载等

服务端响应头添加字段：

![](https://i.bmp.ovh/imgs/2021/10/b84e86dc9671820e.png)

成功运行，然而视频压缩时间较长

![](https://i.bmp.ovh/imgs/2021/10/2e0aa1b6ce17da6f.gif)

并且iframe资源无法进行加载

![](https://i.bmp.ovh/imgs/2021/10/b18cb29666dd55bb.png)

### 总结 

ffmpeg转码压缩视频时间长，并且需要设置`COOP`和`COEP`,影响到iframe,script标签等跨域资源加载。在用户上传视频场景下不适合使用ffmpeg

> ffmpeg使用详细代码获取:https://github.com/CatsAndMice/upfile/tree/master/ffmpeg

### 参考

[解决 SharedArrayBuffer is not defined - 掘金 (juejin.cn)](https://juejin.cn/post/7016962394479919118)

ffmpeg视频压缩踩坑总结

### 效果展示

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/310103d07a2640dba7d43a3d82b726de~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;"/>





### 绘制大致容器

`gird`简易布局,11个`dd`元素模拟图片

```html
<dl class="view">
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>
```

```css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
}
.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}
```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c02f5d1668294661a21a02fd9260c709~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;" />

### `counter`计算属性展示数量

使用`::before伪元素覆盖住图片，将`counter`计算的数量展示在`::before元素中

<a href="[counter() - CSS（层叠样式表） | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter())">counter</a>

```css
.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
}
.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}
.view dd::before{
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30e5a21617064572993e93214e14e9f0~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;">

`counter`已经将全部`dd`元素数量展示出来,可我们只需要超出第九个`dd`元素的数量,这要怎么做呢？

其实很简单，使用<a href="[:nth-child - CSS（层叠样式表） | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child)" >:nth-child伪类</a>选择**第九个`dd`元素后的兄弟元素**

```css
.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

.view dd:nth-child(9)~dd {
    counter-increment: images;
}

.view dd:nth-child(9) ~ dd::before{
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
```

`~ dd`表示后面所有的`dd`元素

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/165fa3b02bc947ea8e76a9a73d5a3519~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0" />

嘿嘿！只差将最后的元素移个位置了，可以使用定位

```css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

.view dd:nth-child(9)~dd {
    width: 100px;
    counter-increment: images;
    position: absolute;
    right: 0;
    bottom: 0;
}

.view dd:nth-child(9)~dd::before {
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
```

将超出第九个的所有元素定位至容器右下方

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90b41870d7fb4df684fce89779c22c00~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;" />

### 原生js实现点击展示

超出第九个的所有元素被定位在右下，利用js实现点击定位的元素则将元素去除定位属性

```css
//去除定位 
.view dd.no-befter {
    position: static !important;
}

.view dd.no-befter::before {
    display: none !important;
} 
```

```js
let dd = document.getElementsByTagName('dd'),
    len = dd.length;
dd[len - 1].onclick = () => {
    [].slice.call(dd).forEach(val => {
        val.classList.add('no-befter');
    })
}
```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448023a8b7fd4fee98d18f9ba9fb13ff~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0" />

### counter另一种思维实现

`counter`实现九宫格，上面是使用`counter`默认从`0`开始。现在重新设置`counter`从`-9`开始计算。

```css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images -9;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}

.view dd::before {
    content: counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/433e01dd6e58411f8a8b4528826e0f37~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;" />

同理，超出第九个元素才展示数量，然后定位

```css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images -9;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}

.view dd:nth-child(9)~dd:before {
    content: counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79bde449359a4449bbf51f73896901a4~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;" />

后面的代码就不展示了，基本上是一样的。

所有代码保存在<a href="https://github.com/lihai-boop/simple-dome/blob/master/counter%E5%AE%9E%E7%8E%B0%E4%B9%9D%E5%AE%AB%E6%A0%BC%E5%9B%BE%E7%89%87%E5%B1%95%E7%A4%BA.html"> github</a>需要的自取。

### 最后

<a href="https://blog.csdn.net/qq_45472813/article/details/118382226">CSS::marker让文字序号不再呆板</a>,`counter`配合`::marker`可以做有趣列表展示。

公众号:隔壁姥爷，求个关注❤️‍🔥

counter实现图片九宫格超出展示Demo

### 1. 滚动距离计算

`offsetTop,scrollTop,clientHeight`原生API获取距离像素计算

`offsetTop:`获取当前元素与其父级元素顶部内边距的距离 

`scrollTop:`当前元素滚动超出的高度

`clientHeight:`当前元素的可视高度

"灵魂画手"绘图

img元素offsetTop - 父级元素scrollTop<父级元素clientHeight,即说明img已滚动进入父可视区域

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fb270d13cf6465296db9e56ac6a9f59~tplv-k3u1fbpfcp-zoom-1.image">





```css
#view {
    width: 300px;
    height: 500px;
    margin: 30px auto;
    overflow-y: auto;
}

.parent {
    height: 1000px;
}

img {
    margin-top: 800px;
}
```

```html
<div id="view">
    <div class="parent">
        <img alt="..." loading="lazy" class="img"
             data-src="https://tse1-mm.cn.bing.net/th?id=OIP-C.FaG6dzohGs3q45-DwsEyQQHaEK&w=165&h=100&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
    </div>
</div>
```

```js
let view = document.getElementById('view');
let img = document.getElementsByClassName('img')[0];
view.onscroll = function () {
    let sh = this.clientHeight;
    let st = this.scrollTop;
    let ch = img.offsetTop;
    ch - st < sh && (img.src = img.dataset.src)
}

```

用户频繁滚动鼠标时，会多次触发`onscroll`事件计算滚动距离，消耗性能又没有意义，所以需要控制函数执行的次数，减少性能的消耗，对滚动事件进行防抖处理

开发中为减少反复写防抖函数，已经将它封装入`@lihai-js/tool`,  开箱即用

`@lihai-js/tool`地址https://github.com/lihai-boop/tool

```js
let img = document.getElementsByClassName('img')[0];
let view = document.getElementById('view');
function debounce (fn, wait = 1000, immediate = false) {
    const self = this
    immediate && fn.call(this)
    return function () {
        self.debounceTime && clearTimeout(self.debounceTime)
        self.debounceTime = setTimeout(() => {
            fn.apply(this, arguments)
        }, wait)
    }
}

view.onscroll =debounce(function () {
    let sh = view.clientHeight;
    let st = view.scrollTop;
    let ch = img.offsetTop;
    ch - st < sh && (img.src = img.dataset.src)
}) 
```

### 2. `getBoundingClientReat`方法计算

`Element.getBoundingClientReat()`方法返回元素的大小及其相对于视口的位置。

该方法返回一个`DOMRect`对象，对象包括`left`, `top`, `right`, `bottom`, `x`, `y`, `width`, 和 `height`这8个属性值。除了`width` 和 `height` 以外的属性是相对于视图窗口的左上角来计算的。

[Element.getBoundingClientRect() - Web API 接口参考 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)

以**滚动计算距离**列举的代码例子来说,可视窗口为浏览器窗口，对`img`dom对象使用`getBoundingClientReat()`获取top，top即为浏览器窗口左上角到`img`标签左上角的像素距离点

<img style="margin-left:0px" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9494d8feeb07477591c188db635fdddd~tplv-k3u1fbpfcp-zoom-1.image">

利用上述点，当`top`值小于浏览器窗口高度时，说明`img`已滚动于可视区域，即进行加载

```css
#view {
    width: 300px;
    height: 500px;
    margin: 30px auto;
    overflow-y: auto;
}

.parent {
    height: 1000px;
}

img {
    margin-top: 800px;
    margin-bottom: 30px;
}
```

```html
<div id="view">
    <img alt="..." class="img" data-src="https://p.pstatp.com/origin/pgc-image/c206105e0c46482a85b69a67a59ce682" />
</div>
```

```js
let img = document.getElementsByClassName('img')[0];
let view = document.getElementById('view');
//省略防抖代码
window.onscroll = debounce(() => {
    let clientHeigth = view.clientHeight;
    let { top } = img.getBoundingClientRect();
    top < clientHeigth && (img.src = img.dataset.src);
})

view.onscroll =debounce(function () {
    let sh = view.clientHeight;
    let { top } = img.getBoundingClientRect();
    top<sh && (img.src = img.dataset.src)
})
```



### 3. `IntersectionObserver`监听

`IntersectionObserver`API原理与**2. `getBoundingClientReat`方法计算**一样，官方认为图片懒加载，开发者既要获取top值，又要监听滚动事件，还要进行防抖处理，一系列操作麻烦不方便。为了简化它，官方提供了`IntersectionObserver`接口。

`IntersectionObserver(callback[, options])`

当监听的元素达到要求后，触发`callback`回调函数，它接收两个参数

[IntersectionObserver API 使用教程 - 阮一峰的网络日志 (ruanyifeng.com)](http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)

```js
let img = document.getElementsByClassName('img')[0];
let view = document.getElementById(view);
let ob = new IntersectionObserver(function (changes) {
    changes.forEach(val => {
        let { isIntersecting, target } = val;
        isIntersecting && (target.src = target.dataset.src);
    })
}, {
    root: view,
    threshold: [0]
})
ob.observe(img);
```



### 4.`<img>` 标签属性`loading`

> 兼容性差，不推荐

`<img>`标签属性`loding`,可选值：

`eager`:立即加载图像

`lazy`:延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义

详细介绍:<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-loading">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-loading</a>

```html
<div class="parent">
    <img loading="lazy"
         src="https://tse1-mm.cn.bing.net/th?id=OIP-C.FaG6dzohGs3q45-DwsEyQQHaEK&w=165&h=100&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"  alt="...">
</div>
```
### 最后

期待各位同学指点补充！

觉得文章有用的同学点赞一波!

实现懒加载的四种方式

![IMG_0406.HEIC.JPG](http://112.124.1.74/static/img/4239b8ec1323cf758c5dfb5c94955ac7.IMG_0406.HEIC.JPG)
## 📖阅读本文，您将收获

-   了解到优秀的markdown产品[wolai](https://www.wolai.com/signup?invitation=I6MQISP)、[notion](https://www.notion.so/66bed77ec85d42d9b84f3799e69dd711)
-   markdown编辑器选型，多一个选择项
-   学会如何使用`Mildown`



## 一、markdown编辑器的槽点

作为研发人员，我不相信您编写文档没有使用过markdown；如果使用markdown编写文档，那肯定是离不开一款markdown编辑器。

但是呢，市面上markdown编辑器又有蛮多槽点的：

-   大部分开源编辑器，它是编辑区与预览区分离
    ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10e013f54d574fd7b0ec8db1bdc384fa~tplv-k3u1fbpfcp-watermark.image?)
    上图为掘金平台使用的编辑器，编辑区与预览区分离老碍眼了。古板，我觉得两者结合做到所见即所得会更好。

-   收费

    做到所见即所得的markdown编辑器，当然有，例如市面上的[Typora](https://typora.io/)、[wolai](https://www.wolai.com/signup?invitation=I6MQISP)、[notion](https://www.notion.so/66bed77ec85d42d9b84f3799e69dd711)。

    这三款编辑器产品，用过的人都说好，**强烈推荐**。

    它们有个共同的问题：商业化，商业化的产品目的就是搞钱，所以呢，它们有部分高级功能是需要付费的。

    但对大部分无特殊功能要求的人，它们已经够用了。

-   不开源

    像[Typora](https://typora.io/)、[wolai](https://www.wolai.com/signup?invitation=I6MQISP)、[notion](https://www.notion.so/66bed77ec85d42d9b84f3799e69dd711)产品，它们的源代码是没有开放出来的，我们想在项目中集成它们是不可能的。

## 二、新宠儿：`Milkdown`

> GitHub Star数: 6k+

`Milkdown`是什么?

官方自我介绍：

> Milkdown 是一个轻量但强大的 WYSIWYG（所见即所得）的 markdown 编辑器

为什么选择`Milkdown`?

官方理由：

-   为开发者提供一个**免费开源解决方案**
-   不同于 [Notion](https://notion.so) 和 [Typora](https://typora.io/) 等商用软件，Milkdown是开源且永久免费的
-   值得信赖，有强大的社区支撑  


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3544cbdeb714d659cf501087dbd3b14~tplv-k3u1fbpfcp-watermark.image?)  
    
在线体验：<https://milkdown.dev/zh-hans/online-demo>

GitHub: <https://github.com/Saul-Mirone/milkdown>

### 2.1 安装并运行

`Mildown`以插件驱动，它由核心模块、官方插件组成。

安装核心模块：

```
npm i @milkdown/core @milkdown/transformer @milkdown/prose @milkdown/ctx
```

创建Editor实例：

```
import { Editor } from "@milkdown/core"
Editor.make().create()
```

执行，两行代码就报错啦！！

-   错误1:`Uncaught (in promise) Timing InitReady timeout.`

    原因是缺少主题，再安装一个主题包：

```
npm i  @milkdown/theme-nord 
```

```
import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
Editor.make().use(nord).create()
```

```
再次运行，紧接着第二个报错出现。
```

-   错误2:`Uncaught (in promise) RangeError: Schema is missing its top node type ('doc')`

    错误大概意思是缺少`doc`节点，这是原因缺少markdown预设指令插件。

    官方提供了两款插件：`@milkdown/preset-commonmark、@milkdown/preset-gfm`，推荐`@milkdown/preset-gfm`。

    同样的，下载使用：

```
import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import {gfm} from "@milkdown/preset-gfm"
Editor.make().use(nord).use(gfm).create()
```

![Aug-14-2022 11-37-41.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85ca1e58200c4a9a95a69e990b142623~tplv-k3u1fbpfcp-watermark.image?)
至此，`Milkdown`成功运行。接下来，只需要按需添加插件。

### 2.2 顶部工具栏插件

```
npm i @milkdown/plugin-menu
```

还是链式调用`use` ,注册插件。

```
import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import { gfm } from "@milkdown/preset-gfm"
// 工具栏
import { menu } from '@milkdown/plugin-menu';
Editor
    .make()
    .use(nord)
    .use(gfm)
    .use(menu)
    .create()
```

但得到的是一堆英文单词：


![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e29ec8702ae44c099ae56af61f6e5c8~tplv-k3u1fbpfcp-watermark.image?)

功能是存在的，但展示有问题，需要把一堆英文单词替换成字体图标。

```
import { Editor ,ThemeIcon} from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import { gfm } from "@milkdown/preset-gfm"
// 工具栏
import { menu } from '@milkdown/plugin-menu';
import { getIcon } from "./icon"
Editor
    .make()
    .use(nord.override((emotion, manager) => {
        manager.set(ThemeIcon, (icon) => {
            if (!icon) return;
            return getIcon(icon);
        });
    }))
    .use(gfm)
    .use(menu)
    .create()
```

针对`@milkdown/theme-nord` 设置，添加一个`getIcon` 方法。

`icon` 文件内容过多此处不粘贴，请移动GitHub阅读：<https://github.com/CatsAndMice/milkdown/blob/master/icon.js>。

另外需要加载字体图标资源：

```
 <html>
 //...
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 </html>
```

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f89a2e4916d349cc8b01a88ff09f97d9~tplv-k3u1fbpfcp-watermark.image?)

### 2.3 复制粘贴插件

```
import { clipboard } from '@milkdown/plugin-clipboard';
```

```
//...
import { clipboard } from '@milkdown/plugin-clipboard';
Editor
    .make()
    .use(nord.override((emotion, manager) => {
        manager.set(ThemeIcon, (icon) => {
            if (!icon) return;
            return getIcon(icon);
        });
    }))
    .use(gfm)
    .use(menu)
    .use(clipboard)
    .create()
```

### 2.4 选择工具栏插件

```
npm i @milkdown/plugin-tooltip
```

设置工具栏选中后置顶：

```
//...
import { tooltipPlugin, tooltip } from '@milkdown/plugin-tooltip';
Editor
    .make()
    .use(nord.override((emotion, manager) => {
        manager.set(ThemeIcon, (icon) => {
            if (!icon) return;
            return getIcon(icon);
        });
    }))
    .use(gfm)
    .use(menu)
    //新增
    .use(tooltip.configure(tooltipPlugin, {
        top: true,
    }))
    .create()
```

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/745797ac9c2c41c793d5bef492faeeea~tplv-k3u1fbpfcp-watermark.image?)

### 2.5 支持`/` 命令插件

```
npm i @milkdown/plugin-slash
```

输入`/`，自定义添加面板功能配置：

```
import { defaultValueCtx, Editor, rootCtx, ThemeIcon, themeManagerCtx } from "@milkdown/core";
//...
import {slash,createDropdownItem,defaultActions,slashPlugin} from '@milkdown/plugin-slash';

Editor
    .make()
   // 新增
  .use(slash.configure(slashPlugin, {
    config: (ctx) => {
      return ({ content, isTopLevel }) => {
        if (!isTopLevel) return null;
        if (!content) {
          return { placeholder: "键入文字或'/'选择" };
        }

        const mapActions = (action) => {
          const { id = "" } = action;
          switch (id) {
            case "h1":
              action.dom = createDropdownItem(
                ctx.get(themeManagerCtx),
                "标题1",
                "h1"
              );
              return action;
            //...
            default:
              return action;
          }
        };

        if (content.startsWith("/")) {
          return content === "/"
            ? {
              placeholder: " ",
              actions: defaultActions(ctx).map(mapActions)
            }
            : {
              actions: defaultActions(ctx, content).map(mapActions)
            };
        }
        return null;
      };
    }
  }))
```

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03582030978044359c99465ee92acb92~tplv-k3u1fbpfcp-watermark.image?)

### 2.6 设置默认内容及添加事件插件

设置默认内容是核心模块提供的功能，不必安装插件。

```
import { defaultValueCtx, Editor, rootCtx, ThemeIcon, themeManagerCtx } from "@milkdown/core";
//...

Editor.make()
  .config((ctx) => {
    ctx.set(rootCtx, document.querySelector('#app'));
    ctx.set(defaultValueCtx, "## 点赞+评论+关注=学会");
  })
  //...
```

添加事件:

```
npm i @milkdown/plugin-listener
```

`@milkdown/plugin-listener`分别对应七个生命周期函数：

|       事件名          |       事件描述      |
| --------------- | ----------- |
| beforeMount     | 挂载前         |
| mounted         | 挂载后         |
| updated         | 状态更新        |
| markdownUpdated | markdown 更新 |
| blur            | 失焦          |
| focus           | 聚焦          |
| destroy         | 销毁          |

```
//...
import { listenerCtx, listener } from "@milkdown/plugin-listener"

Editor.make()
  .config((ctx) => {
    ctx.set(rootCtx, document.querySelector('#app'));
    ctx.set(defaultValueCtx, "## 点赞+评论+关注=学会");
    //新增
    ctx.get(listenerCtx).markdownUpdated((ctx, markdown, prevMarkdown) => {
      console.log(markdown);
    });
  })
  //...
```

借助上述事件，可以自定义获取内容等功能。

Milkdown官方还有其他功能插件，例如：图片上传等，文章不逐一列举了。

文章演示代码已开放GitHub: <https://github.com/CatsAndMice/milkdown>

## 三、结束语

原创不易！如果我的文章对你有帮助，**点赞+评论+关注**就是对我的最大支持^_^。