vue3使用v-md-editor：vue3的markdown编辑器

官方网址:

安装：

# use npm
npm i @kangc/v-md-editor -S

main.ts引入 :

import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';



import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
    Prism,
    config: {
        toc: {
          includeLevel: [3, 4],
        },
      },

});

app.use(VueMarkdownEditor);

 编辑:

<template>
    <v-md-editor v-model="text" height="400px" :include-level="[1, 2, 3, 4]" :disabled-menus="[]"
        @upload-image="handleUploadImage" />

<span>{{ text }}</span>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const text = ref('# sssss')

const handleUploadImage = (event, insertImage, files) => {
    // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
    console.log(files);
    // 此处只做示例
    insertImage({
        url:
            'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
        desc: '七龙珠',
        // width: 'auto',
        // height: 'auto',
    });
}


onMounted(() => {

})
</script>

纯渲染：

<template>
    <div style="height: 500px;">
        <span style="width: 80% !important;display: block;float: left;height: 500px">
            <v-md-editor :model-value="text" mode="preview" ref="preview"></v-md-editor>
        </span>
        
        <span style="position: fixed;height: 500px">
            <div v-for="anchor in titles" :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
                @click="handleAnchorClick(anchor)">
                <a style="cursor: pointer">{{ anchor.title }}</a>
            </div>
        </span>
    </div>
    
    
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'


const preview = ref(null)
const text = ref(`
# 1 
sdssd
sdcsdcsd 
**sdsdsdsdsds** 
## 11 
# 2 
sdssd 
sdcsdcsd 
**sdsdsdsdsds** 
## 22 
# 3 
sdssd 
sdcsdcsd 
**sdsdsdsdsds** 
## 33 
# 4 
sdssd sdcsdcsd 
**sdsdsdsdsds** 
## 44 
# 5 
sdssd 
sdcsdcsd 
**sdsdsdsdsds** 
## 55
# 6 
sdssd 
sdcsdcsd 
**sdsdsdsdsds** 
## 66
# 8 
sdssd 
sdcsdcsd 
**sdsdsdsdsds** 
## 88
# 7 
sdssd 
sdcsdcsd 
**sdsdsdsdsds** 
## 77
`)
const titles = ref([])


const handleAnchorClick = (anchor) => {
    const { lineIndex } = anchor;

    const heading = preview.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);

    console.log(heading)
    if (heading) {
        console.log(preview.value)
        preview.value.$el.scrollTo({
            top: 100, options: 'smooth'
        })
        // 注意：如果你使用的是编辑组件的预览模式,则这里的方法名改为 previewScrollToTarget
        /* preview.value.scrollToTarget({
            target: heading,
            scrollContainer: window,
            top: 60,
        }); */
    }
}

onMounted(() => {

    const anchors = preview.value.$el.querySelectorAll('h1,h2,h3,h4,h5,h6')
    const titleInner = Array.from(anchors).filter((title: any) => !!title.innerText.trim());

    if (!titleInner.length) {
        titles.value = [];
        return;
    }

    const hTags = Array.from(new Set(titleInner.map((title: any) => title.tagName))).sort();

    titles.value = titleInner.map((el: any) => ({
        title: el.innerText,
        lineIndex: el.getAttribute('data-v-md-line'),
        indent: hTags.indexOf(el.tagName),
    }));
})
</script>

over