Vue中使用Markdown
本篇主要讲解了在Vue项目里如何集成和使用Markdown （mavonEditor）编辑器的，以及如何接入一款非常简洁强大的 Markdown的样式 （github-markdown-css），本博客系统就是使用了 mavonEditor 和 github-markdown-css 下面我将分别讲解它们是如何集成到Vue项目中
1.Vue项目中安装和使用mavonEditor
1.1 安装mavonEditor
首先在Vue项目所在的终端输入一下命令 安装 mavon-editor
npm install mavon-editor --save
1.2 Vue项目中引入mavonEditor
接着在Vue项目的 main.js 引入 mavon-editor
import Vue from 'vue'
import App from './App'
import mavonEditor from 'mavon-editor' //引入mavon-editor 就是上面所安装的
Vue.use(mavonEditor) //让Vue使用mavonEditor
1.3 在页面中使用mavonEditor
直接在页面中使用 mavon-editor 标签
:toolbars="toolbars" //指定工具栏
@imgAdd="handleEditorImgAdd" //指定图片上传调用的方法，该方法主要将图片上传后台，并且返回地址，替换到markdown中
@imgDel="handleEditorImgDel" //删除图片调用的方法，该方法主要调用后台删除图片
style="height:600px" //
v-model="value" //绑定 value 值 必须的
@change="change" //监听markdown输入 ，可以实时保存等等。。
ref=md //指定一个用来引用markdown的 可以是任意字符串
/>
贴上上面所用到的方法和toolbars 主要是图片上传接口
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: false, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/* 1.3.5 */
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
/* 1.4.2 */
navigation: true, // 导航目录
/* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/* 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
},
methods: {
//监听markdown变化
change(value, render) {
this.html = render;
this.blogInfo.blogMdContent = value;
this.blogInfo.blogContent = render;
},
//上传图片接口pos 表示第几个图片
handleEditorImgAdd(pos , $file){
var formdata = new FormData();
formdata.append('file' , $file);
this.$axios
.post("http://localhost:8000/blogs/image/upload/", formdata)
.then(res => {
var url = res.data.data;
this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
});
},
handleEditorImgDel(){
console.log('handleEditorImgDel'); //我这里没做什么操作，后续我要写上接口，从七牛云CDN删除相应的图片
}
}显示效果如下：
1.4 博客展示Markdown的html
展示博客效果的使用 article 标签指定 v-html 既markdown所编写html格式的内容
如 content = 'CSS入门属性
1.css 是什么
'
显示效果如下：
2.Vue项目中安装和使用 github-markdown-css
2.1 安装github-markdown-css
首先在Vue项目所在的终端输入一下命令 安装github-markdown-css
npm install github-markdown-css
2.2 导入github-markdown-css
在所需展示markdown的页面 **import 'github-markdown-css/github-markdown.css'并且在article 标签添class="markdown-body"**
//主体展示内容部分
//导入 样式，
显示效果如下：
总结：
整体来说还是很简单的只是用到了 mavonEditor 和 github-markdown-css 都是自己探索出来的，整体效果还是不错的
本文由博客一文多发平台 https://openwrite.cn?from=article_bottom 发布！