markdown html vue,Vue中使用Markdown

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"**

.markdown-body { 编写容器的一些css，根据需要进行调整，这里是我博客的，在github提供的.markdown-body基础上修改的

box-sizing: border-box;

min-width: 200px;

/* max-width: 980px; */

/* padding: 45px; */

max-width: 98%;

margin: 0 auto;

box-shadow: 2px 4px 6px gray;

padding-left: 20px;

padding-right: 15px;

padding-top: 40px;

padding-bottom: 45px;

margin-bottom: 100px

}

github使用的是这个 根据自己的进行调整

.markdown-body {

box-sizing: border-box;

min-width: 200px;

max-width: 980px;

margin: 0 auto;

padding: 45px;

}

//这个要配合移动端 不是很理解

@media (max-width: 767px) {

.markdown-body {

padding: 15px;

}

}

//主体展示内容部分

//导入 样式，

import 'github-markdown-css/github-markdown.css' //导入

export default {

name : 'MainContent',

props:['content' ],

data() {

return {

};

},

}

显示效果如下：

总结：

整体来说还是很简单的只是用到了 mavonEditor 和 github-markdown-css 都是自己探索出来的，整体效果还是不错的