vue項目使用markdown展示文本
下載mavon-editor
npm i mavon-editor --save
如何引入
main.js
import Vue from 'vue'
import App from './App'
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
index.vue
<template>
<mavon-editor :toolbars="toolbars" v-model="value" :subfield="prop.subfield" :defaultOpen="prop.defaultOpen" :toolbarsFlag="prop.toolbarsFlag" :editable="prop.editable" :scrollStyle="prop.scrollStyle" :boxShadow="prop.boxShadow" ref=md />
</template>
<script>
...
data() {
return {
value: "# test markdown"
};
},
computed: {
prop() {
let data = {
subfield: false,// 單雙欄模式
defaultOpen: 'preview',//edit： 默認(rèn)展示編輯區(qū)域 诽表， preview： 默認(rèn)展示預(yù)覽區(qū)域
editable: false,
toolbarsFlag: false,
scrollStyle: false,
boxShadow: false//邊框
}
return data
}
}
</script>
<p style="color: #FFB6C1">一招斃命 沃但， 打完收工，??ヽ(°▽°)ノ?</p>
