目录
安装
命令
npm install @kangc/v-md-editor@next
引入
main.js
// md 相关
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// highlightjs
import hljs from 'highlight.js';
VMdEditor.use(githubTheme, {
Hljs: hljs,
});
var app = createApp(App);
app.use(MyRouter).use(VMdEditor).use(ArcoVue)
使用
简单使用
<template>
<v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script>
export default {
data() {
return {
text: '',
};
},
};
</script>
预览模式(当作展示组件使用)
<VMdTextareaEditor style="width: 800px" :mode="`preview`"
v-model="text"></VMdTextareaEditor>
<script setup>
import VMdTextareaEditor from "@kangc/v-md-editor"
const text = ref("## hello baby! \n" +
"ds " +
"是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo" +
"是收到v草莓怕你发订单你的id的发使得fpo" +
"是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo" +
"是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo" +
"是收到v草莓怕你发订单你的id的发使得fpo" +
"是收到v草莓d怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpov是收到v草莓怕你发订单你的id的发使得fpo" +
"是收到v草莓怕你发订单你的id的发使得fpo是收到v草莓怕你发订单你的id的发使得fpo" +
"" +
"" +
"" +
"" +
"");
<script>
效果
编辑模式
<v-md-textarea-editor height="800px"></v-md-textarea-editor>
<script setup>
import VMdTextareaEditor from "@kangc/v-md-editor"
// 文章标题
const handleChange=(title)=>{
}
</script>
效果