mavon-editor将md文本转化成html

项目场景

通过markwodn编辑器mavon-editor获取用户输入内容,并用md格式(其实是html)渲染到其他页面上.

---

原理

mavon-editor可以将我们输入的文本实时地转化成html并进行渲染,我们通过@change方法拿到编辑文本的html,在其他地方进行渲染成md格式的效果

---

方法

1.下载,引入marvon-editor

gitee:
https://gitee.com/dsnull/mavonEditor/
下载:

npm install mavon-editor --save

引入:
全局引入,在main.js中:

  import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
       router,
    store,
    render: h => h(App)
}).$mount('#app')

2.使用mavon-editor把md文本转换成html

HTML:

 <mavon-editor v-model="text" @change="changeData"/>

js:

  export default{
      data() {
        return {
          text: "",
          render:""
        }
      },
      methods: {
        changeData(value, render) {
        	// value中是文本值,render是渲染出的html文本
          this.render = render;
        },
        onSubmit(){
        this.$ajax({
          method: 'POST',
          url: "http://localhost:3000/question",
          // 发送请求,存到数据库里,这里使用jsonserver模拟后端
          data: {
          	//this.text就是changeData方法里的value
          	text:this.text
          	//this.render是渲染后的数据,是changeData方法里的render
            render: this.render,
          }
          // eslint-disable-next-line no-unused-vars
        }).then((res) => {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
		}
      }
    }

可以看到这里text是原文本,render是渲染后的html文本,我们用它去渲染md.

3.用html文本进行渲染

前端获取html文本之后就可以再次使用mavon-editor进行渲染了

<article v-html="this.render" />

---

效果对比

编辑框框: