苏州网站建设学费/百度输入法

mavon-editor是一款基于vue的markdown编辑器，比较适合博客系统。由于官网对于一些细节的说明不够详细，这里对这里对该编辑器的使用做一个总结。

安装

npm install mavon-editor --save

基本使用
在vue-cli构建的脚手架离得main.js可以像这样引用：

// 全局注册import Vue from 'vue'import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'// useVue.use(mavonEditor)new Vue({'el': '#main'})

在具体的组件里html里定义挂载点

<div id="main"><mavon-editor v-model="value"/>
</div>

效果如下

图片上传：
先将挂在点里的方法写好，就像这样

 <mavon-editorv-model="form.content"ref="md"@imgAdd="handleEditorImgAdd"@imgDel="handleEditorImgDel"/>

@imgAdd @imgDel 分别是添加图片和删除图片

具体代码如下

        handleEditorImgAdd (pos, $file) {let formdata = new FormData()formdata.append('file', $file)this.imgFile[pos] = $filelet instance = this.$axios.create({withCredentials: true,headers: {Authorization: token   // 我上传的时候请求头需要带上token 验证，不需要的删除就好}})instance.post('/api/upload/fileds', formdata).then(res => {if (res.data.code === 200) {this.$Message.success('上传成功')let url = res.data.datalet name = $file.nameif (name.includes('-')) {name = name.replace(/-/g, '')}let content = this.form.content// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)  这里是必须要有的if (content.includes(name)) {let oStr = `(${pos})`let nStr = `(${url})`let index = content.indexOf(oStr)let str = content.replace(oStr, '')let insertStr = (soure, start, newStr) => {return soure.slice(0, start) + newStr + soure.slice(start)}this.form.content = insertStr(str, index, nStr)}} else {this.$Message.error(res.data.msg)}})},handleEditorImgDel (pos) {delete this.imgFile[pos]},

这里需要注意
this.$axios 其实就是 axios 对象，

下边是其他配置

//mavon-editor菜单栏的相关配置
把toolbars 对象绑定到 mavon-editor组件上

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, // 帮助/* 1.3.5 */undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: false, // 保存（触发events中的save事件）/* 1.4.2 */navigation: true, // 导航目录/* 2.1.8 */alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐/* 2.2.1 */subfield: true, // 单双栏模式preview: true, // 预览
},

二我选择的是直接将md格式的文本保存到数据库中，然后再将其从数据库中取出来解析。
md格式的文本的解析

使用marked框架来解析。

方法步骤：

npm install marked --save

在组件中引用：

import marked from ‘marked‘

相应的标签：

<div v-html="readmeContent" ></div>

js方法：

//这里的newDate[0].content就是取出来的md格式的文本内容  
this.readmeContent=marked(newData[0].content||‘‘,{sanitize:true
})

存在问题：现在纯粹的只是将其解析成了html文件，相应的样式查了下，可以用highlight.js，但折腾了好久都没引用成功，最后为了应急，只能自己手写样式了。等之后再仔细看看marked的官方文档再说…

参考地址
http://www.mamicode.com/info-detail-2644873.html
https://www.jianshu.com/p/78ea4f94a3d0