当前位置: 首页 > 工具软件 > Vditor > 使用案例 >

Vue使用Vditor编辑器

耿招
2023-12-01

目录

1、安装

2、使用

3、获取编辑内容


1、安装

npm install vditor --save

2、使用

<template>
    <div id="vditor" name="description" ></div>
</template>
<script>
import Vditor from "vditor";
import "vditor/src/assets/scss/index.scss";
export default {
    data(){
        return{
            editor:""
        }
    },
    mounted(){
        this.contentEditor = new Vditor("vditor",{
            height:360,
            toolbarConfig:{
                pin:true
            },
            cache:{
                enable:false
            },
            after:()=>{
                this.editor.setValue("hello,Vditor")
            }
        })
    }  
}
</script>

3、获取编辑内容

this.editor.getValue();     //获取 Markdown 内容
this.editor.getHTML();      //获取 HTML 内容

 类似资料: