目錄

概述

Install Mavon-editor 安裝

Use(如何引入)

重點在這里

---

概述

mavon-editor是一款基于vue的markdown編輯器，比較適合博客系統。由于官網對于一些細節的說明不夠詳細，這里對這里對該編輯器的使用做一個總結。

Install Mavon-editor 安裝

通過如下命令安裝：

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, // 標題underline: true, // 下劃線strikethrough: true, // 中劃線mark: true, // 標記superscript: true, // 上角標subscript: true, // 下角標quote: true, // 引用ol: true, // 有序列表ul: true, // 無序列表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, // 保存（觸發events中的save事件）navigation: true, // 導航目錄alignleft: true, // 左對齊aligncenter: true, // 居中alignright: true, // 右對齊subfield: true, // 單雙欄模式preview: true // 預覽},codeStyle:'',//主題//參數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) {// 這是你的代碼高亮語言解析路徑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 解析后的結果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("抱歉!圖片上傳失敗!請來聯系管理員");});},$imgDel(pos) {delete this.img_file[pos];} }

圖片上傳可參考官網

重點在這里

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

這兩個屬性，支持在markdown中，如果輸入<p></p>? <div></div>? <span></span>就會被解析掉不顯示，加上這兩屬性可以讓標簽進行轉譯。具體見官網，找到xssOptions屬性，查看相關鏈接。

由于自己親身經歷，所以揮淚下此片，希望對大家有所幫助！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。