v-md-editor简单使用

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件，点击查看官方文档

在Vue3中

安装

# 使用 npm
npm i @kangc/v-md-editor@next -S

# 使用 yarn
yarn add @kangc/v-md-editor@next

配置

创建plugins/index.ts文件

import { App } from 'vue'
import VMarkDownEditor from './MarkDownEditor' //引入组件包

const pluginList = [
    VMarkDownEditor,//导入组件包
    
]
const plugins = {
    install (app: App<Element>) {
        // 批量注册插件  改用自动引入
        Object.entries(pluginList).forEach(([, v]) => {
            app.use(v)
        })
    }
}

export default plugins

创建plugins/MarkDownEditor.ts文件

//编辑组件
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
//主题
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';



VMdEditor.Codemirror = Codemirror;
VMdEditor.use(githubTheme,{
    Hljs: hljs,
})

export default VMdEditor

main.ts文件导入

import { createApp,defineAsyncComponent  } from "vue";
import App from "./App.vue";
import router from "./router/index";

//引入组件
import plugins from './plugins';

const app = createApp(App);
app.use(router).use(plugins).mount("#app");

使用

<script setup lang="ts">
    //左侧工具栏
    const leftBar = ref('undo redo clear h bold italic strikethrough quote ul ol table hr link image code');
            //右侧工具栏
    const rightBar = ref('preview sync-scroll fullscreen');
            
            //Alt + a 实现上传图片
    const handleUploadImage = async (event, insertImage, files) => {
              // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
        const formData = new FormData();
        formData.append('file', files[0]);
              //你自己的上传文件接口
        let res = await FileApi.commonUpload('N', formData);
        insertImage({
            //state.filePreviewUrl 是我本地的预览接口 你可以换成自己的也可以用上传接口给你反的url
            url: state.filePreviewUrl + res.data.fileId,
            desc: res.data.fileOriginName
        });
    };
</script>
<template>
  <v-md-editor
  v-model="form.artContent" //绑定的值
  :autofocus="true" //自动选中
  height="400px" //高（必须）
  width="100%"  //宽
  ref="editor"
  :left-toolbar="leftBar" //左侧工具
  :right-toolbar="rightBar" //右侧工具
  :disabled-menus="[]" //禁用菜单
  @upload-image="handleUploadImage" //上传图片的事件
  ></v-md-editor>
</template>