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 标签

 <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 = '<h2><a id="CSS_0"></a>CSS入门属性</h2> <h3><a id="1css__1"></a>1.css 是什么</h3>'

 <template>
 <article class="markdown-body" style="text-align:left" v-html="content"></article>
 </template> 

??显示效果如下：

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

 <style>
 .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;
 }
 }
 </style>

 //主体展示内容部分
 <template>
 <article class="markdown-body" style="text-align:left" v-html="content"></article>
 </template>

 //导入 样式，
 <script>
 import 'github-markdown-css/github-markdown.css' //导入
 export default {
 name : 'MainContent',
 props:['content' ],
 data() {
 return {

 };
 },
 }
 </script>

??显示效果如下：

总结：

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

本文由博客一文多发平台 https://openwrite.cn?from=article_bottom 发布！