一次偶然的机会,我体验的到了markdown的便捷,于是乎,我就着手给我的网站闲蛋博客社区集成了Markdown,现在可以自由的切换Markdown与富文本编辑的使用了。这里我特此分享记录下安装使用的过程。
一、安装Markdown编辑器
这里我采用的是md-editor-v3编辑器,目前看来还是很好用的,安装方便,使用简单
二 pnpm安装 pnpm install md-editor-v3
注意,直接运行的是安装的最新版的,最新版本的使用的vue3.5以上,如果你低于3.5的版本,代码运行的时候可能会报错,所以安装的是其它的版本
pnpm install md-editor-v3@4.21.1
三、页面基本使用
话不多说,直接看代码
<template>
<MdEditor :autoFocus="true" v-model="textContent" :toolbars="toolbars">
</MdEditor>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { MdEditor, DropdownToolbar, ToolbarNames, config } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
const { checkImg } = useUpload();
const toolbars: ToolbarNames[] = [
'bold',
'underline',
'italic',
'-',
'title',
'strikeThrough',
'sub',
'sup',
'quote',
'unorderedList',
'orderedList',
'task',
'-',
'codeRow',
'code',
'link',
'image',
'table',
'mermaid',
'katex',
'-',
'revoke',
'next',
'=',
'pageFullscreen',
'fullscreen',
'preview',
'htmlPreview',
'catalog',
'github'
];
</script>
让后运行项目如下图
这样就可以了,但是我们看官网,它是可以支持切换主题的,那么怎实现呢。
四、编辑器切换主题
实现它就是去使用它的#defToolbars插槽,可以实现
实现切换预览主题
我这里只是默认使用它里面提供的几个主题,定义预览主题如下:
const previewThemeOptions = [
{
value: 'default',
label: 'default'
},
{
value: 'github',
label: 'github'
},
{
value: 'vuepress',
label: 'vuepress'
},
{
value: 'mk-cute',
label: 'mk-cute'
},
{
value: 'smart-blue',
label: 'smart-blue'
},
{
value: 'cyanosis',
label: 'cyanosis'
}
];
然后插槽里面的代码
<MdEditor :autoFocus="true" v-model="textContent" :previewTheme="previewThemeSelected"
:toolbars="toolbars">
<template #defToolbars>
<DropdownToolbar title="预览主题" :visible="showPreviewTheme" :on-change="appendixPreviewThemeChanged">
<template #overlay>
<el-select v-model="previewThemeSelected" size="small" style="width: 70px"
@change="previewThemeChange">
<el-option v-for="item in previewThemeOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</template>
<template #trigger>
<el-icon class="md-editor-icon" :size="18">
<Platform />
</el-icon>
</template>
</DropdownToolbar>
</template>
</MdEditor>
同时在toolbars里面要加一个对应的索引位置,代表自己的工具栏
然后运行看下代码部分截图
default主题
github主题
smart-blue主题
以此类推,其它的主题我就不演示了
图片上传
图片上传要实现它的 @on-upload-img="onUploadImg"方法,参考代码如下,也可以参考官网的写法,比较简单
function onUploadImg(files, callback) {
files.forEach((s) => {
let file = s;
let formData = new FormData();
formData.append('file', file);
uploadFileApi(formData).then((res) => {
let arr = [];
arr.push(res.urlPath);
callback(arr);
});
});
}
内容超链接target属性
如果想实现target属性需要安装 markdown-it-link-attributes 插件,让后代码加入如下代码
import LinkAttr from 'markdown-it-link-attributes';
config({
markdownItPlugins(plugins) {
return [
...plugins,
{
type: 'linkAttr',
plugin: LinkAttr,
options: {
matcher(href: string) {
return !href.startsWith('#');
},
attrs: {
target: '_blank'
}
}
}
];
}
});
应该没有什么还有补充了
标签:function,Markdown,const,value,label,编辑器,let,import,日记 From: https://www.cnblogs.com/MrHanBlog/p/18607910