vue3最简单的在线md编辑器

1、下载依赖marked
yarn add marked
2、使用原理
marked会将字符串解析成一个md格式的html字符串，然后我们渲染他就可以了。

这里是简单示例，额外功能需要自行添加

<template>
    <div class="left">
        <p>在线转换html</p>
        <textarea class="edit" v-model="mdtext" @input="mdchage"></textarea>
    </div>
    <div class="right">
        <p>md文档编辑器</p>
        <div id="show" ref="show"></div>
    </div>
</template>


<script setup>
import { marked } from 'marked'
import { onMounted, ref, computed } from 'vue'
let mdtext = ref('')
let show = ref(null)

let mdchage = () => {
    //将字符串中的内容编译成md语法
    let html_md = marked.parse(mdtext.value)
    console.log(html_md);

    //将md语法渲染到盒子中
    show.value.innerHTML = html_md
}
</script>

<style lang="scss" scoped>
.left {
    height: 80%;
    width: 40%;

    .edit {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }
}

.right {
    height: 80%;
    width: 40%;

    #show {
        width: 100%;
        height: 100%;
        border-radius: 1%;
        border: 1px solid;
    }
}
</style>