一个很好的markdown文档插件

1、vue中安装

npm i md-editor-v3

2、写一套组件

<script setup>
import {MdEditor, NormalToolbar, ModalToolbar} from "md-editor-v3";
import 'md-editor-v3/lib/style.css'
import emitter from "@/util/emitter";
import {ExportPDF} from "@vavt/v3-extension";

const props = defineProps(['markdown'])
const emit = defineEmits(['saveText'])

const visible = ref(false);

// 保存
const handleSave = () => {
  visible.value = false
  // 这里添加你的保存逻辑
  emit('saveText')
};

// 展示的工具
const toolbars = [
  'bold',          // 加粗
  'underline',     // 下划线
  'italic',        // 斜体
  'strikeThrough', // 删除线
  '-',             // 分隔线
  'title',         // 标题
  'sub',           // 下标
  'sup',           // 上标
  'quote',         // 引用
  'unorderedList', // 无序列表
  'orderedList',   // 有序列表
  'task',          // 任务列表
  '-',             // 分隔线
  'codeRow',       // 行内代码
  'code',          // 代码块
  'link',          // 链接
  'image',         // 图片
  'table',         // 表格
  'mermaid',       // Mermaid图表
  'katex',         // katex公式
  '-',             // 分隔线
  'revoke',        // 撤销
  'next',          // 重做
  1,
  // 'save',          // 保存
  0,               // 自定义导出按钮
  '=',             // 弹性分隔线（会将后面的按钮推到右侧）
  'prettier',       // 美化
  'preview',       // 预览
  'htmlPreview',   // HTML预览
  'catalog'        // 目录
]

const file = computed({
  get() {
    return props.markdown
  }
})

// 导出数据处理，如图片链接
const exportText = computed(() => {
  let content = props.markdown.content;
  if (content) {
    let result = content.replace(/\(([^)]+)\)/g, '(/api/markdown/image?url=$1)');
    return result
  }
})

const options = {
  allowTaint: true,   // 推荐设置为false，除非必要
  useCORS: true,       // 使用CORS方式加载跨域资源
  scale: 2,            // 缩放比例
  logging: true,      // 关闭日志
  letterRendering: true, // 更好的文本渲染
  async: true          // 异步加载
}

// 导出完成
const onSuccess = () => {
  emitter.emit('full-loading', false)
}

// 导出开始
const onStart = () => {
  emitter.emit('full-loading', true)
}

</script>

<template>
  <MdEditor v-model="file.content" @onSave="visible = true" :toolbars="toolbars">
    <template #defToolbars>
      <ExportPDF :model-value="exportText" :fileName="file.title" :options="options" @onSuccess="onSuccess"
                 @onStart="onStart"/>

      <ModalToolbar title="保存" modalTitle="文档信息" :visible="visible"  width="400px"
                    @onClick="visible = true" @onClose="visible = false">
        <template #trigger>
          <i class='bx bx-save'/>
        </template>
        <div>
          <el-form>
            <el-form-item>
              <el-input v-model="file.title" placeholder="文档名称" clearable/>
            </el-form-item>
          </el-form>
        </div>
        <div style="text-align: right">
          <el-button style="margin-left: auto" @click="visible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">
            确认
          </el-button>
        </div>
      </ModalToolbar>
    </template>

  </MdEditor>
</template>

<style scoped>
.md-editor {
  /*使md铺满整个页面*/
  height: 100%;
  /*自定义主题颜色*/
  --md-bk-color: var(--theme-bg-color);
  --md-scrollbar-bg-color: var(--theme-border-color);
  --md-border-color: var(--theme-border-color);
  --md-bk-color-outstand: var(--theme-hover-color);
}

/*顶部工具栏图标大小*/
:deep(.md-editor-icon) {
  width: 22px;
  height: 22px;
}

.bx {
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 16px;
}


</style>

3、页面中使用

<script setup>
import MyMdEditor from "@/components/MyMdEditor.vue";
import request from "@/util/request.js";
import {useRoute} from "vue-router";

const route = useRoute();
// 文本信息
const markdown = ref({
  content:'',
  title:''
})
const getFile = () => {
  request.get("/api/markdown/detail/"+route.params.fileId).then(res => {
    markdown.value = res.data
  })
}

const saveText = ()=>{
  request.post("/api/markdown/update", markdown.value).then(res=>{
    if(res.code !== 200){
      getFile()
    }
  })
}

getFile()
</script>


<template>
  <MyMdEditor :markdown="markdown" @saveText="saveText" style="height: 100%;"/>
</template>