VUE中使用markdown

GitHub地址mavonEditor
安装

npm install mavon-editor --save

vue2中使用

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

组件中使用

<div id="main">
    <mavon-editor v-model="markValue"/>
</div>

文本内容就是v-model绑定的markValue值，不过获取的只是文本内容，并没有HTML标签
如果想获取HTML标签，可以安装另一个插件 showdown

安装

npm install showdown --save

如果项目使用TS，还需要安装一个showdown类型

npm i --save-dev @types/showdown

main.js中注册

import showdown from 'showdown';
Vue.prototype.converter = new showdown.Converter();

组件中使用

 methods: {
        sendBolg () {
            console.log(this.markValue)
            var htmlContent = this.converter.makeHtml(this.markValue)
            console.log(htmlContent)
        }
    },

这样 htmlContent 输出的就是带HTML标签的文本了。