mavoneditor 显示html,使用MavonEditor编辑Markdown

MavonEditor是一个用于编辑markdown的JavaScript库,搭配Vue.js,非常适合博客网站,界面也很漂亮.可以使用npm安装,今天就让我们来了解一下,这个库的使用.

首先,我们安装它:

npm install mavon-editor --save

我们需要在程序的main.js中引入并注册:

import 'mavon-editor/dist/css/index.css';

import mavonEditor from "mavon-editor";

Vue.use(mavonEditor);

然后可以从我们的vue文件中使用它:

此时界面如图所示:

然后我们需要对它进行一些配置,比如说图片的上传,删除,文章的保存和配置他的显示,首先,我们配置它显示的按钮,其中我们可以看到非常多的按钮,但有些并不是我们想要的,比如右边的那个显示HTML源代码.所以现在,我们可以通过一些配置设定每个按钮的显示.首先,在标签中配置:

注意这里的toolbars是我们要在视图函数中定义的一个变量.

视图函数:

data(){

return {

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, // code

table: true, // 表格

fullscreen: true, // 全屏编辑

readmodel: true, // 沉浸式阅读

htmlcode: true, // 展示html源码

help: true, // 帮助

undo: true, // 上一步

redo: true, // 下一步

trash: true, // 清空

save: true, // 保存(触发events中的save事件)

navigation: true, // 导航目录

alignleft: true, // 左对齐

aligncenter: true, // 居中

alignright: true, // 右对齐

subfield: true, // 单双栏模式

preview: true // 预览

}

}

}

我们只需要调整其中的属性就可以控制按钮的显示和隐藏,设置为true的显示,为false的隐藏,注意不能只设置false的,必须设置每个是true的,否则没设置的一样不显示.

现在,我们只需要将htmlcode的按钮改为false,就不会有这个按钮了.效果如图所示,可以看到,原来那个HTML按钮不见了:

接下来我们需要设置上传图片的事件,否则本地的图片是无法上传到服务器的.由于各个服务器的接口不一样,所以我这里只是讲一下上传图片的接口,展示一下我的代码.

我们可以在mavon-editor里直接配置事件,这里我要实现的功能是,上传图片时将图片同步上传到服务器,并用服务器的地址替换掉这里的地址,删除图片时同步删除服务器里的图片,我的代码:

html部分:

v-model="value"

:toolbars="toolbars"

@imgAdd="addImg"

@imgDel="delImg"

ref="md"

/>

接口解释:

imgAdd:图片上传事件,接受参数pos图片路径,file图片文件

imgDel:图片删除事件,接受一个数组,格式为(pos,file).

import Axios from "axios";

addImg(pos, file) {

var formData=new FormData(); //新建一个表单数据,用于提交文件

formData.append("img",file); //添加文件,参数分别是表单参数的名字和值.

Axios.post("/api/edit/uploadImg",formData,{ //使用Axios进行上传图片

headers:{

"Content-Type":"multipart/form-data" //设置请求头,更换内容类型为表单数据

}

}).then((response)=>{ //传输之后将url替换

var data=response.data; //data为响应返回的数据

if(data.message=="no signIn"){ //如果还没有登陆

this.$router.push("/user/signIn") //路由跳转

}else{ //否则

this.$refs.md.$img2Url(pos,data.url); //将原来的图片url替换成data.url,注意$img2Url是自带的函数.

}

});

this.imgs[pos] = file; //记录图片.

},

delImg(pos) {

pos=pos[0]; //首先获取到图片的原来的url

Axios.post("/api/edit/deleteImg?imgId="+pos); //通过Axios删除图片

delete this.imgs[pos]; //删除之前记录的图像字典中的数据

}

效果如图所示:

最后就是保存工作了,我们仍然通过事件进行保存.

html:

v-model="value"

:toolbars="toolbars"

@imgAdd="addImg"

@imgDel="delImg"

@save="save"

ref="md"

/>

js:

save(md, html) {

Axios.post("/api/blog/edit",{

inner:this.value,

title:this.title

})

}

最后,展示一下项目完整的效果.

以上是这篇文章的全部,错误的地方恳请指正.

QQ:8955859,希望能和大家一起学习.

最后,都看到这了,赞赏一下呗!(^ ~ ^||).