UsingMarkdowninVue

UsingMarkdowninVue本文主要讲解如何在Vue项目中集成使用Markdown（mavonEditor）编辑器，以及如何接入非常简单强大的Markdown样式（github-markdown-css），本博客系统使用mavonEditor和github-markdown-css。接下来，我将解释它们是如何集成到Vue项目中的。1、在Vue项目中安装并使用mavonEditor。安装mavon-editor的命令npminstallmavon-editor--save1.2在Vue项目中引入mavonEditor然后importmavon-editorimportVuefrom'vue'importAppfrom'./App'importmavonEditorfrom'mavon-inmain.jstheVueprojecteditor'//引入mavon-editor就是上面安装的Vue。use(mavonEditor)//让Vue使用mavonEditor1.3在页面上使用mavonEditor在页面上直接使用mavon-editor标签把上面用到的方法和toolbars贴上去，主要是图片上传界面toolbars:{bold:true,//bolditalic:true,//Italicheader:true,//titleunderline:true,//underlinestrikethrough:true,//middlelinemark:true,//marksuperscript:true,//superscriptsubscript:true,//subscriptquote:true,//quoteol:true,//有序列表ul:true,//无序列表link:true,//链接图片link:true,//图片链接code:false,//codetable:true,//formfullscreen:true,//全屏编辑readmodel:true,//沉浸式阅读htmlcode:true,//显示html源代码help:true,//help/*1.3.5*/undo:true,//上一步redo:true,//下一步trash:true,//空save:true,//保存（触发事件中的保存事件）/*1.4.2*/navigation:true,//导航目录/*2.1.8*/alignleft:true,//alignleftaligncenter:true,//centeralignright:true,//右对齐/*2.2.1*/subfield:true,//单双列模式preview:true,//preview},methods:{//监听markdown变化change(value,render){this.html=渲染；this.blogInfo.blogMdContent=值；this.blogInfo.blogContent=render;},//上传图片接口pos表示图片数量handleEditorImgAdd(pos,$file){varformdata=newFormData();formdata.append('文件',$文件);this.$axios.post("http://localhost:8000/blogs/image/upload/",formdata).then(res=>{varurl=res.data.data;this.$refs.md.$img2Url(pos,url);//这里是引用ref=md然后调用$img2Url方法替换地址});},handleEditorImgDel(){console.log('handleEditorImgDel');//这里我什么都没做，后面会写一个接口，把对应的图片从七牛云CDN删除}}展示效果如下：指定v-html，就是markdown写的html格式的内容，比如content='

CSS入口属性

什么是1.css

'显示效果如下：2.安装和在Vue项目中使用github-markdown-css2。1安装github-markdown-css首先在Vue项目所在终端输入命令安装github-markdown-cssnpminstallgithub-markdown-css2.2importgithub-markdown-css**import'github-markdownon需要markdown的页面-css/github-markdown.css'并在文章标签中添加class="markdown-body"**//主要显示内容部分