vue好用的markdown编辑器推荐md-editor-v3

2024-09-20 14:29:36

小程序码

扫一扫在手机上看此文章

文章目录

热门文章

vscode里如果出现中文空格标出黄色突出显示，怎么去掉？ 1706

php基础入门课程资料文档课件实战源码 1460

wordpress主题开发文档资料下载 1107

vscode插件code runner详细配置说明 1088

php进阶课程文档资料下载 861

整理下php学员遇到的一些问题 763

fastadmin监听或重写删除编辑按钮事件 750

使用ffmpeg将mp4格式转为m3u8 722

phpstudy怎么手动安装php8.3.0版本？ 705

推荐2款mac电脑里非常好用的php集成开发环境 641

### md-editor-v3
官方文档：
[https://imzbf.github.io/md-editor-v3/zh-CN/docs](https://imzbf.github.io/md-editor-v3/zh-CN/docs)

github文档：
[https://github.com/imzbf/md-editor-v3/tree/v3](https://github.com/imzbf/md-editor-v3/tree/v3)

![](https://resource.maoshu.fun/storage/default/20240920/imagee274bddf0b995b8fb880774f509a94462a21f5dc.png?e=1740165196&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:2PMKLBQWCrQB4_cmW1UZWGrQpB0=)

常用内容可查看文档

下面是增加自定义按钮的方式

### 自定义按钮：
```vue
<template #defToolbars>
    <NormalToolbar title="付费内容" @>
        <template #trigger>
        <svg class="md-editor-icon" aria-hidden="true">
            <use ></use>
        </svg>
        </template>
    </NormalToolbar>
</template>
```
### 自定义按钮点击事件：
```js
const handler = () => {
    editorRef.value?.insert((selectedText) => {
        /**
         * @return targetValue    待插入内容
         * @return select         插入后是否自动选中内容，默认：true
         * @return deviationStart 插入后选中内容鼠标开始位置，默认：0
         * @return deviationEnd   插入后选中内容鼠标结束位置，默认：0
         */
        return {
            targetValue: 
`前置内容
${selectedText}
后置内容`,
            select: true,
            deviationStart: 0,
            deviationEnd: 0
        };
    });
};

```

铜牌 · 会员

50元/年

解锁全部文章

全部课程8折购买

如果在b站充值了专属会员，可联系猫叔直接开通相同时间的此会员

金牌 · 会员

399元/3个月

解锁全部文章

全部课程5折购买

微信一对一答疑

优先解决问题