基于mdEditor实现数据的存储和回显(导出pdf&表情包&目录)

背景

最近在写基于Vue + SpringBoot的毕业设计，需要用到发布文章这一模块，就需要用到文本编辑器，找来找去，发现了这个mdEditor。

效果

数据的编辑

代码

javascript 复制代码

import { ref } from 'vue'
import 'md-editor-v3/lib/style.css'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { Emoji } from '@vavt/v3-extension'
import '@vavt/v3-extension/lib/asset/Emoji.css'
import { ExportPDF } from '@vavt/v3-extension'
import '@vavt/v3-extension/lib/asset/ExportPDF.css'

html 复制代码

      <!-- 文章内容 -->
      <div class="editor-wrapper">
        <MdEditor
            ref="editorRef"
            v-model="params.content"
            :toolbars="toolbars"
            :height="1000"
            :placeholder="placeholder"
            :theme="theme"
            :language="lang"
            :code-theme="codeTheme"
            @onUploadImg="handleUploadImage"
            @save="handleSave"
            :hotkeys="customHotkeys"
            showToolbarName
            style="min-height: 600px; height: auto;"
            :image-auto-preview="true">
          <!-- 自定义工具栏：文字居中、导出PDF、Emoji -->
          <template #defToolbars>
            <ExportPDF :modelValue="params.content" />
            <Emoji>
              <template #trigger>😀</template>
            </Emoji>
          </template>
        </MdEditor>
      </div>

工具栏扩展

https://github.com/imzbf/md-editor-extension/tree/develop/packages/v3/components

文档API

API - MdEditorV3 使用文档

数据的回显

数据的回显对我来说是一个很头痛的问题。

存在后端数据库里面的数据格式是markdown形式的，前端在进行渲染的时候，可以通过很多的方式，但总会少点啥(代码不高亮 流程图解析不出来) ，解铃还须系铃人。 （用mdEditor 进行回显**）**

代码

html 复制代码

<script setup lang="ts">
/*------------- 导包 ------------------------*/
import {computed, ref} from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {Emoji, ExportPDF} from "@vavt/v3-extension"; // 导出为PDF

/*------------- 数据 ------------------------*/
const props = defineProps<{
  mdText: string;                // 原始 Markdown 内容
  theme?: 'light' | 'dark';       // 主题（默认 light）
  language?: string;              // 界面语言（默认 zh-CN）
  codeTheme?: string;             // 代码高亮主题（如 'atom'、'github'）
}>();
const content = computed(() => props.mdText);
const toolbars = [0,
  '=',  // 右侧区域开始
  'catalog'
]
const editorRef = ref(null)

/*------------- 方法 ------------------------*/
</script>

<template>
  <MdEditor
      ref="editorRef"
      v-model="content"
      :previewOnly="true"
      :theme="theme"
      :language="language"
      :codeTheme="codeTheme"
      :toolbars="toolbars"
      :showCodeRowNumber="true"
      showToolbarName
      readOnly
      style="height: 100%"
      inputBoxWidth="0">
    <!-- 自定义工具栏：文字居中、导出PDF、Emoji -->
    <template #defToolbars>
      <ExportPDF :modelValue="content" />
    </template>

  </MdEditor>
</template>


<style scoped>

</style>

想法

给前端展示的时候，也是通过mdEditor编辑界面，只不过：禁止修改(readOnly) && 修改框长度为0（inputBoxWidth="0"）&& 工具栏只显示打印为pdf和显示目录

javascript 复制代码

const toolbars = [
    0, // 0是占位的 这里表示的是打印为pdf
  '=',  // 右侧区域开始
  'catalog'
]

效果

不足

可以通过这个进行拖拽，得到原始的markdown数据，但是无法修改。

解决问题😄

文档里面居然有仅预览。

示例 - MdEditorV3 使用文档

javascript 复制代码

<template>
      <!-- 目录 -->
      <MdCatalog :editorId="id" :scrollElement="scrollElement" />
      <!-- 文章内容 -->
      <MdPreview :id="id" :modelValue="article.content" />
</template>

<script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';

const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>

最后

祝大家新年快乐！！！