vue使用vue-markdown编辑框,实现简单保存文本和html内容

时间:2024-03-23 07:03:54

安装vue-markdown

npm install vue-markdown --save

在main.js文件中全局引用

//编辑框
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

vue文件使用

@save: 按下 ctrl + s 时触发,@change: 当值发生改变时 触发
<mavon-editor style="min-height: 600px" v-model="value"  @save="saveDoc"
              @change="updateDoc"/>
methods:{
  updateDoc(markdown, html) {
    // 此时会自动将 markdown 和 html 传递到这个方法中
    console.log("markdown内容: " + markdown);
    console.log("html内容:" + html);
  },
  saveDoc(markdown, html) {
    // 此时会自动将 markdown 和 html 传递到这个方法中
    console.log("markdown内容:" + markdown);
    console.log("html内容:" + html);
  }
}

测试结果:

vue使用vue-markdown编辑框,实现简单保存文本和html内容