Vue使用markdown編輯器
1.安裝
npm install mavon-editor -S
2.main.js全局注冊
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
//use
Vue.use(mavonEditor)
3.vue頁面使用
<el-form-item label="文章內(nèi)容">
<mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
</el-form-item>
imgAdd(pos, $file) {
let $vm = this.$refs.md
// 第一步.將圖片上傳到服務(wù)器.
const formData = new FormData();
formData.append('file', $file);
axios({
url: 'http://127.0.0.1:9090/files/editor/upload',
method: 'post',
data: formData,
headers: {'Content-Type': 'multipart/form-data'},
}).then((res) => {
// 在Markdown文本中插入圖片
var url = res.data.data[0].url
// console.log(url)
// const markdownText = `http://127.0.0.1:9090/files/1705996022610-頭像.jpg`;
$vm.$img2Url(pos, url);
})
},
4.文章預(yù)覽
<mavon-editor
class="md"
:value="content"
:subfield="false"
:defaultOpen="'preview'"
:toolbarsFlag="false"
:editable="false"
:scrollStyle="true"
:ishljs="true"
/>
文章來源地址http://www.zghlxwxcb.cn/news/detail-823140.html
文章來源：http://www.zghlxwxcb.cn/news/detail-823140.html
到了這里，關(guān)于Vue使用markdown編輯器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
