vue3项目中使用md-editor-v3

在项目使用Markdown编辑器,有很多的版本如md-editor-v3、v-md-editor等等。

md-editor-v3基于Vue3版本的，使用jsx和typescript语法开发，支持切换主题、prettier美化文本等，界面也是非常简洁好看的。目前该项目一直在迭代中。

其官方文档：首页 - MdEditorV3 使用文档

如何使用：

1安装md-editor-v3依赖

npm install md-editor-v3

添加一些扩展依赖 如语言、主题 、使用toolbar的使用添加将内容导出为pPDF 

yarn add @vavt/cm-extension

yarn add @vavt/v3-extension

2.具体的代码实现

 模板中的使用

<template>
   <md-editor ref="mdEditorRef" v-model="text" 
   :auto-detect-code="true"   
    :toolbars="toolbars" 
    :footers="['markdownTotal',0, '=', 1, 'scrollSwitch']"
     @onUploadImg="uploadImg"
   >
    <template #defToolbars>
          <Emoji />
          <ExportPDF
            :modelValue="text"
            height="700px"
            @onSuccess="onSuccess"
            @onProgress="onProgress"
          />
        </template>
     <template #defFooters>
       <span>行数: {{ lines }}</span>
           <TimeNow />
     </template>   
  
</md-editor>
</template>

  js中定义工具栏等

<script setup>
import { computed, ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import { Emoji,  ExportPDF } from '@vavt/v3-extension';
import '@vavt/v3-extension/lib/asset/style.css';
import { message } from '@vavt/message';
import 'md-editor-v3/lib/style.css';

import { config } from 'md-editor-v3';
import { lineNumbers,highlightActiveLine } from '@codemirror/view';

config({
  codeMirrorExtensions(_theme, extensions) {
    return [...extensions,lineNumbers(),highlightActiveLine()];
  },
})
import { toolbars } from './staticConfig';

import TimeNow from '@/components/TimeNow.vue';
const text = ref('### 目标\n\n实现一个小目标,实现一个小目标，实现一个小目标\n\n### 个人情况\n\n目前正在梦想实现一个小目标\n\n### 掌握的技能')
const lines  = computed(() => {
  return text.value.split('\n').length;
});
//图片上传
const uploadImg = async (files, callback) => {
  const res = await Promise.all(
    files.map((file) => {
        console.log(file);
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);
         //todo 调用接口实现图片上传
        // axios
        //   .post('/api/img/upload', form, {
        //     headers: {
        //       'Content-Type': 'multipart/form-data',
        //     },
        //   })
        //   .then((res) => rev(res))
        //   .catch((error) => rej(error));
      });
    })
  );

  // 方式一
  callback(res.map((item) => item.data.url));
};
//将内容转为PDF输出
let updateRatio=(str) => {} ;
let closrRatio = () => {};

const onProgress = ({ ratio }) => {
  if (updateRatio) {
    updateRatio(`Progress: ${ratio * 100}%`);
  } else {
    const { close, update } = message.info(`Progress: ${ratio * 100}%`, {
      zIndex: 999999,
      duration: 0,
    });

    updateRatio = update;
    closrRatio = close;
  }
};

const onSuccess = () => {
  closrRatio();

  setTimeout(() => {
    updateRatio = undefined;
  }, 100);

  message.success(
     '导出成功！',
    {
      zIndex: 999999,
    }
  );
};

   工具栏的设置 staticofing.js

export const toolbars=['title', 'bold', 'italic', 'quote', 'unorderedList', 'orderedList', 
  'task', 'codeRow', 'code', 'link', 'image', 'table', 'mermaid', 'katex', 0,1,2,'=', 
  'pageFullscreen', 'fullscreen', 'preview', 'htmlPreview', 'previewOnly','catalog'
]

一些样式的修改

:deep(svg.md-editor-icon ){
 width: 24px;
 height: 24px;
 fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:deep(.cm-line .ͼ1i,ͼ1k){
  color: #00f;
}

实现效果如下