在 vue3 中使用 markdown 编辑器 md-editor-v3 markdown编辑器vue3

本文将介绍编辑器的使用和伴随的某些开发技巧。
该编辑器支持的功能有：基础的md编辑、md语法快捷键、记录保存、暗黑主题、图片上传/复制图片上传/裁剪图片上传、格式化内容、浏览器全屏/屏幕全屏、仅预览模式等功能，静待使用。
详细的编辑器api参考：文档。

图片裁剪预览

文章图片

【在 vue3 中使用 markdown 编辑器 md-editor-v3】

文章图片

编辑器预览

文章图片

1. 基本使用这里演示两种环境三种写法：
1.1 npm安装用法
这种方式支持两种写法，除了.vue模板写法，还有jsx语法。
安装

yarn add md-editor-v3

.vue模板基础使用

jsx语法基础使用

import { defineComponent, ref } from 'vue'; import MdEditor from 'md-editor-v3'; import 'md-editor-v3/lib/style.css'; export default defineComponent({ name: 'MdEditor', setup() { const text = ref(''); return () => ( (text.value = https://www.it610.com/article/v)} /> ); } });

1.2 script标签引入用法
链接可前往https://cdn.jsdelivr.net搜索md-editor-v3。

注册组件

const App = { data() { return { text: 'Hello Editor!!' }; } }; Vue.createApp(App).use(MdEditorV3).mount('#md-editor-v3');

使用组件

2. 渲染内容该编辑器使用marked解析md为html，没有扩展语法。
通常来讲，编辑内容存储为md格式，渲染内容时，通过marked解析为html。
2.1 默认渲染
从1.3.0版本后，编辑器支持了previewOnly功能，可以直接使用编辑器预览文章，没有bar、编辑等等。

2.2 主动解析演示
这种方式用于保存md，然后自行解析md内容。

import marked from 'marked'; // 代码高亮 import hljs from 'highlight.js'; // 自选代码高亮样式 import 'highlight.js/scss/atom-one-dark.scss'; // 用于记录标题数，根据业务代替 let count = 0; // 记录标题内容 const headstemp = []; // marked设置 const rendererMD = new marked.Renderer(); // 调整标题内容 rendererMD.heading = (text, level) => { headstemp.push({ text, level }); count++; return `${text}`; }; // 设置图片内容，统一显示一张缓存图，用于懒加载~ rendererMD.image = (href, _, text) => ` 文章图片 `; marked.setOptions({ highlight(code) { return hljs.highlightAuto(code).value }, renderer: rendererMD }); // 这里的html就是插入到页面的元素文本了 const html = marked('## md内容');

2.3 标题导航实现
上面的例子headstemp记录了解析过程中的所有标题，作用是借助UI库的组件Anchor，构建一个标题导航。
下面演示一个基于ant-design-vue的版本，如果你使用的UI库是类似的锚点组件，那么代码将只需要小改动即可。代码使用jsx语法，vue模板语法请自行分离代码~
Recursive.tsx 导航中的链接组件

import { Anchor } from 'ant-design-vue'; import { defineComponent, PropType } from 'vue'; const { Link } = Anchor; export interface Head { text: string; level: number; }export interface TocItem extends Head { anchor: string; children?: Array; }const Recursive = defineComponent({ props: { tocItem: { type: Object as PropType, default: () => [] } }, setup({ tocItem }) { return ( {tocItem.children && tocItem.children.map((item) => )} ); } }); export default Recursive;

Topicfy.tsx 用于生成整个导航内容

import { Anchor } from 'ant-design-vue'; import { computed, defineComponent, PropType, ref, watch } from 'vue'; import Recursive, { Head, TocItem } from './Recursive'; const Topicfy = defineComponent({ props: { // 解析得到的标题列表 heads: { type: Array as PropType> } }, setup(props) { const topics = computed(() => { const tocItems: TocItem[] = []; // 标题计数器 let count = 0; const add = (text: string, level: number) => { count++; const item = { anchor: `heading-${count}`, level, text }; if (tocItems.length === 0) { // 第一个 item 直接 push tocItems.push(item); } else { let lastItem = tocItems[tocItems.length - 1]; // 最后一个 itemif (item.level > lastItem.level) { // item 是 lastItem 的 children for (let i = lastItem.level + 1; i <= 6; i++) { const { children } = lastItem; if (!children) { // 如果 children 不存在 lastItem.children = [item]; break; } // 重置 lastItem 为 children 的最后一个 item lastItem = children[children.length - 1]; if (item.level <= lastItem.level) { // item level 小于或等于 lastItem level 都视为与 children 同级 children.push(item); break; } } } else { // 置于最顶级 tocItems.push(item); } } }; props.heads?.forEach((item) => { add(item.text, item.level); }); return tocItems; }); return () => ({topics.value.map((item) => ( ))}); } }); export default Topicfy;