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 

 

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liming10101010

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值