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

安装vue-markdownnpm install vue-markdown --save在main.js文件中全局引用//编辑框import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'Vue.use(mavonEditor)vue文件使用@save: 按下 ctrl ...

ljq18115

4874人浏览 · 2019-10-04 20:06:52

ljq18115 · 2019-10-04 20:06:52 发布

安装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);
  }
}

测试结果：