目錄

概述

Install Mavon-editor 安裝

Use(如何引入)

重點(diǎn)在這里

---

概述

mavon-editor是一款基于vue的markdown編輯器，比較適合博客系統(tǒng)。由于官網(wǎng)對(duì)于一些細(xì)節(jié)的說(shuō)明不夠詳細(xì)，這里對(duì)這里對(duì)該編輯器的使用做一個(gè)總結(jié)。

Install Mavon-editor 安裝

通過(guò)如下命令安裝：

npm install mavon-editor --save

Use(如何引入)

main.js

import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css'

組件中引用 editor.vue

<template> <div id="editor"><mavon-editor:codeStyle="codeStyle"v-model="content" :subfield = "subfield":ishljs="true":externalLink="externalLink"ref=md@imgAdd="$imgAdd"@imgDel="$imgDel"@change="changeModel":stripIgnoreTag= "false":xssOptions="xssOptions"></mavon-editor></div> </template> import axios from 'axios' export default {data() {return {html_content:undefined,md_content:undefined,content: '',toolbars: {bold: true, // 粗體italic: true, // 斜體header: true, // 標(biāo)題underline: true, // 下劃線(xiàn)strikethrough: true, // 中劃線(xiàn)mark: true, // 標(biāo)記superscript: true, // 上角標(biāo)subscript: true, // 下角標(biāo)quote: true, // 引用ol: true, // 有序列表ul: true, // 無(wú)序列表link: true, // 鏈接imagelink: true, // 圖片鏈接code: true, // codetable: true, // 表格fullscreen: true, // 全屏編輯readmodel: true, // 沉浸式閱讀htmlcode: true, // 展示html源碼help: true, // 幫助undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true, // 保存（觸發(fā)events中的save事件）navigation: true, // 導(dǎo)航目錄alignleft: true, // 左對(duì)齊aligncenter: true, // 居中alignright: true, // 右對(duì)齊subfield: true, // 單雙欄模式preview: true // 預(yù)覽},codeStyle:'',//主題//參數(shù)subfield: true,externalLink: {markdown_css: function() {// 這是你的markdown css文件路徑return '/markdown/github-markdown.min.css';},hljs_js: function() {// 這是你的hljs文件路徑return '/highlightjs/highlight.min.js';},hljs_css: function(css) {// 這是你的代碼高亮配色文件路徑return '/highlightjs/styles/' + css + '.min.css';},hljs_lang: function(lang) {// 這是你的代碼高亮語(yǔ)言解析路徑return '/highlightjs/languages/' + lang + '.min.js';},katex_css: function() {// 這是你的katex配色方案路徑路徑return '/katex/katex.min.css';},katex_js: function() {// 這是你的katex.js路徑return '/katex/katex.min.js';},},xssOptions: {whiteList: {img: ['src']},},}; }, mounted(){let that = this;that.codeStyle = "darcula"; }, methods: { changeModel(value, render){// render 為 markdown 解析后的結(jié)果this.md_content = valuethis.html_content = render;},async $imgAdd(filename, file) {var formData = new FormData();formData.append("upload", file);// formData.append("typeKey", "article_app");formData.append("withCredentials", true);formData.append("emulateJSON", true);let that = this;await axios.post("http://192.168.1.164:8000/api/picUpload/",formData,{ "Content-Type": "multipart/form-data" }).then(function(response) {if (response.status==200) {file.miniurl = response.data.url;that.$refs.md.$img2Url(filename, response.data.url);} else {that.$message.error('圖片上傳失敗！')}},function(response) {this.$message.warning("抱歉!圖片上傳失敗!請(qǐng)來(lái)聯(lián)系管理員");});},$imgDel(pos) {delete this.img_file[pos];} }

圖片上傳可參考官網(wǎng)

重點(diǎn)在這里

:stripIgnoreTag= "false" :xssOptions="xssOptions"

這兩個(gè)屬性，支持在markdown中，如果輸入<p></p>? <div></div>? <span></span>就會(huì)被解析掉不顯示，加上這兩屬性可以讓標(biāo)簽進(jìn)行轉(zhuǎn)譯。具體見(jiàn)官網(wǎng)，找到xssOptions屬性，查看相關(guān)鏈接。

由于自己親身經(jīng)歷，所以揮淚下此片，希望對(duì)大家有所幫助！

總結(jié)

以上是生活随笔為你收集整理的mavon-editor的使用 图片上传 标签转译的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。