![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>

## 三、结束语

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

🐂呀！这款markdown编辑器我太钟意啦！

![image.png](http://112.124.1.74/static/img/e9694ccce8fb42b3e62e487276c79557.image.png)
一年又一年，时间过得太快啦！

最近总是想着2022年的点点滴滴，一年时光不得写点什么不一样的，可是思前想后觉得这一年也没什么不一样的啊。所以呢，2022年终总结标题就取名为`平淡无奇`。

**人一生最重要的是什么？**我知乎、百度了一下，给出的答案相似，提到了人生五个方面，分别是**身体健康、财务理财、人际社群、工作事业、家庭生活、学习成长**。自己也觉得挺合理的，于是决定年终总结按这五个方面来写。

写年终总结思想过程中，想到了大学毕业前写的一篇写给五年后自己的话，想跟读者一起回顾下：

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

共勉！



## **身体健康**

身体健康是一切的基础，每年我都会下意识地去锻练身体，这一年也不例外。

使用Keep有两年时间，运动总记录有12594分钟，这一年有7480分钟被运动占用

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

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

这一年，十一月份买了辆山地车开启周未骑行模式。到写完这篇文章为止，总骑行120公里。

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

跟大家分享骑行动态：

最长骑行距离刷新到26公里

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

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

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

骑行风景照合成视频发表个人视频号

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

关于运动，我是较真的。

## 财务理财

分享两篇文章：

-   [一个程序员的财务独立之路](https://github.com/ruanyf/weekly/blob/08bcc8c63566fd4750bbeb31415f89ca8f170403/docs/issue-191.md)
-   [程序员如何实现财富自由](https://juejin.cn/post/7142455046599344164)

实现“财务独立”，不再为维持生计和支付日常账单而劳碌。这是每个人都幻想过的，我也想，我的人生目标就是追求财务独立。

读过好几本理财类书籍：

-   《小狗钱钱》
-   《富爸爸穷爸爸》
-   《财富自由之路》等

它们告诉我实现财务独立的一些做法：

-   开源节流

    除工作收入，应扩展更多收入来源，节省生活中不必要的消费；避免高额负债

-   学会投资

    投资自己是最靠谱的；学会钱生钱的方法，股票、基金等可以去购买

-   合理分配收入

    投资不是让你把收入全部碰股市，抱着搏一搏单车变宝马的心态。要将收入分成**要花的钱、保值的钱、生钱的钱以及保命的钱**

-   长期坚持

其实教给我们的道理很简单，难的是自己能否坚持做下去。

这一年，购买了一支股票、一支偏债型基金、二支偏股型基金，给家人及自己购买商业医保有一年。**要花的钱、保值的钱、生钱的钱以及保命的钱**这四笔钱均有去分配，但细想后发觉这四笔钱分配比例有点偏了，后面再调整下。

投资有风险，遭遇损失是常有的。

这一年收益率为-0.12%，学徒级投资吧。

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

## **人际社群**

人际社交这方面，一直是我不擅长的。大学时期加入过学校社团，呆了半年，后来感觉实在难隔入到群体中就退出了，大学到毕业很少主动去社交，能认识的都是自己班上的。

工作后感觉圈子更窄了，作为技术人大部分时间是在独立思考敲代码，很少有机会能接触认识到优秀的人，更别说跨行业认识优秀的人。

自己线上会加入一些技术群，也会去认识关注一些行内大佬，他们会看书，经常写文档，写规划，写总结，早起学习，产出各种方法论，产出各种技术轮子，并且分享出来。他们有各种各样的优秀特质，我没有，接触后自己的潜意识里面也会想去培养一下特质，见贤思齐，鞭策一下自己。

## 工作事业

我想了想，感觉工作其实没什么好写的，日常工作就是写页面。公司业务技术难点不高，熟悉一段时间后基本可以用搬砖来形容，对于我这种工作没几年的程序员来讲要做的就是积累技能，学习怎么把砖搬好。

然而，在一个地方呆久了之后，难免会进入舒适区，焦虑倒是没感觉到，毕竟自己工作没几年。

温水煮青蛙非常浅显的道理，舒适区呆久了人容易麻木，原地踏步，所以跳出舒适区是下一年自己必须要去做的一件事。

这一年工作带给我的成长有限，重复的工作内容更多的是身体上的劳累，脑袋缺少思考。

最后再放一下公司代码提交记录和个人 `github` 代码提交记录：

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

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

说到事业就更没东西写了，社会阅历尚浅，没钱、没人脉、没点子，没故事，如果去创业肯定是找死。

有时候会想如果这行干不下去了，我会去做什么呢？暂时我也没有找到答案。

生活中会把脑子里一闪而过的想法记录下来，怕突然想不起了，可能哪一天我会从其中找到一条可行性想法做为答案吧。

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

## 学习成长

年初，我定了一个计划：每天学习看书一个小时，然后通过某个应用自动生成，到点提醒

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

到年尾盘点一下，结果是完成次数少，未完成的次数占大头。

**思想的巨人，行动的矮子**，也许说得就是我这种。

这一年，没完整读完一本书，都是阅读到一半后没再读下去。

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

好在自己有写文章的习惯，以教为学，这也是一种高效的学习方法。

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

这一年，我在掘金写了10篇文章，写得也比较少，懒人一个。

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

有参与`github`社区贡献，但没有深入参与到某一个开源项目中去

-   [vueuse](https://github.com/vueuse/vueuse/pull/2433)
-   [vue-devui](https://github.com/DevCloudFE/vue-devui/pull/99)
-   [vant](https://github.com/youzan/vant/pull/9732)

## 家庭生活

**家有本难念的经**，我是厌烦了，想离家远点越来越不想回家了。

翻一翻朋友圈，再简单分享一些生活点滴：

自己拍的好看景色

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

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

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

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

五一假期去横店

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

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

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

金华衢州、武义游玩

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

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

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

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

图贴得有点多，不贴了。

## 总结

白驹过隙，日光荏苒，再回看这一年光阴不禁感唉自己没有做成一件让自己满意的事。年中也写一篇总结，flag立的蛮多，完成的没有几件。

2023年度计划简化下就两点：

-   跳出舒适区，多写文章(最少15篇)尝试运营公众号「凌览社」，倒逼自己学习
-   搞钱

最后，2023年，希望大家**在新的一年，遇见更好的自己**。