107 lines
3.9 KiB
Markdown
107 lines
3.9 KiB
Markdown
---
|
||
title: Vue项目中在md-editor-v3工具栏中添加自定义工具
|
||
description: 以NEU小站中的“选择课程”工具为例
|
||
date: 2025-04-16
|
||
# image: helena-hertz-wWZzXlDpMog-unsplash.jpg
|
||
categories:
|
||
- 奇技淫巧
|
||
tags: [
|
||
"md-editor-v3",
|
||
"Markdown",
|
||
"Vue",
|
||
"前端",
|
||
"NEU小站"
|
||
]
|
||
lastmod: 2025-04-16T23:56:00+08:00
|
||
|
||
---
|
||
|
||
# 效果
|
||
在基于Vue3的[个人项目](https://www.东北大学.com)中，我在md-editor-v3的工具栏中实现了一个“选择课程”工具，可以帮助用户搜索并选择相应的课程，然后插入一个包含课程id的组件标签。效果：
|
||
|
||
<img src="https://cdn.ember.ac.cn/images/bed/202504161943892.png" width="700">
|
||
<img src="https://cdn.ember.ac.cn/images/bed/202504161943849.png" width="700">
|
||
<img src="https://cdn.ember.ac.cn/images/bed/202504161944859.png" width="700">
|
||
|
||
# 实现
|
||
|
||
- 参考资料：[md-editor-v3 官方 API 文档](https://imzbf.github.io/md-editor-v3/zh-CN/api)
|
||
|
||
首先我们需要在组件处注册一个自定义工具的模板，注意使用`#defToolbars`，设置好图标、说明文字和点击事件，参考[此处](https://imzbf.github.io/md-editor-v3/zh-CN/api#%F0%9F%A7%B1%20toolbars)。
|
||
```html
|
||
<div class="editor-container">
|
||
<MdEditor
|
||
v-model="formData.content"
|
||
ref="markdownEditor"
|
||
:theme="editorTheme"
|
||
:toolbars="editorToolbars"
|
||
language="zh-CN"
|
||
preview-theme="github"
|
||
:placeholder="editorPlaceholder"
|
||
@onUploadImg="handleImageUpload"
|
||
>
|
||
<!-- 自定义工具 -->
|
||
<template #defToolbars>
|
||
<span class="md-editor-toolbar-item" title="添加课程卡片" @click="chooseCourse">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" width="20" height="24" stroke-width="1.1">
|
||
<path d="M22 9l-10 -4l-10 4l10 4l10 -4v6"></path>
|
||
<path d="M6 10.6v5.4a6 3 0 0 0 12 0v-5.4"></path>
|
||
</svg>
|
||
</span>
|
||
</template>
|
||
</MdEditor>
|
||
</div>
|
||
|
||
<script>
|
||
import MdEditor from 'md-editor-v3';
|
||
import 'md-editor-v3/lib/style.css';
|
||
export default {
|
||
components: {
|
||
MdEditor
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
然后，在`data()`的`editorToolbars`中添加自定义工具的配置，这里非常重要，需要用`0`来表示自定义工具的位置。如果有多个自定义工具，则以此类推0、1、2...，类似数组下标。
|
||
```js
|
||
editorToolbars: [
|
||
'bold', 'italic', 'strikethrough', 'title', 'sub', 'sup', 'quote', 'unordered-list',
|
||
'ordered-list', 'link', 'image', 'table', 'code-block', 'inline-code', 'preview',
|
||
'fullscreen', '-', 'revoke', 'next', '-', 0
|
||
],
|
||
```
|
||
这样我们的自定义图标就会出现在工具栏的对应位置。现在完成`chooseCourse`方法。方法内的逻辑自行定义，但是我们最终的操作一般是需要在编辑器中插入一段文本，所以需要使用编辑器提供的`insert`方法。
|
||
|
||
参考[insert API](https://imzbf.github.io/md-editor-v3/zh-CN/api#%F0%9F%92%89%20insert)，文档如下：
|
||
```js
|
||
/**
|
||
* @params selectedText 选中的内容
|
||
*/
|
||
editorRef.value?.insert((selectedText) => {
|
||
/**
|
||
* @return targetValue 待插入内容
|
||
* @return select 插入后是否自动选中内容，默认：true
|
||
* @return deviationStart 插入后选中内容鼠标开始位置，默认：0
|
||
* @return deviationEnd 插入后选中内容鼠标结束位置，默认：0
|
||
*/
|
||
return {
|
||
targetValue: `${selectedText}`,
|
||
select: true,
|
||
deviationStart: 0,
|
||
deviationEnd: 0,
|
||
};
|
||
});
|
||
```
|
||
说明我们需要返回一个对象，对象中的`targetValue`就是我们最终插入的内容。这里给个简单的例子：
|
||
```js
|
||
chooseCourse() {
|
||
const id = 3;
|
||
this.$refs.markdownEditor?.insert((selectedText) => {
|
||
return {
|
||
targetValue: `<CourseCard id="${id}" />\n`
|
||
}
|
||
})
|
||
}
|
||
```
|
||
这样，点击这个工具，就会在编辑器中插入`<CourseCard id="3" />`。具体的查询逻辑可以自行实现，这里不再赘述。
|