官网

MdEditorV3 Documentation (imzbf.github.io)

其他的集成看文档便懂

---

tag:

• md-editor-v3 category:
• 前端 date: 2024-06-27

cover: /assets/img/logo.png

star: true sticky: true

Vue3集成md-editor-v3富文本

目录展示

特别记录目录导航功能

仅预览模式

<template>
	<div>
    	<MdPreview :style="{ width: '85%' }" previewTheme="cyanosis"
                    :mdHeadingId="mdHeadingId" editorId="content" :modelValue="props.goodsDetail" />
        <!--目录展示 -->
        <MdCatalog @on-click="handlerOnClick" editorId="content" :scrollElement="scrollElement" />
    </div>
</template>

<script setup>
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

//重要：自定义生成标题的id
const mdHeadingId = (_text, _level, index) => `heading-${index}`;
    
//目录导航事件
const handlerOnClick = (event, tocItem) => {
    const element = document.getElementById("heading-" + tocItem.index);
    if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
    }
}
</script>