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文件中使用它:
<mavon-editor/>
此时界面如图所示:
然后我们需要对它进行一些配置,比如说图片的上传,删除,文章的保存和配置他的显示,首先,我们配置它显示的按钮,其中我们可以看到非常多的按钮,但有些并不是我们想要的,比如右边的那个显示HTML源代码.所以现在,我们可以通过一些配置设定每个按钮的显示.首先,在标签中配置:
<mavon-editor :toolbars="toolbars"/>
注意这里的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部分:
<mavon-editor
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:
<mavon-editor
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,希望能和大家一起学习.
最后,都看到这了,赞赏一下呗!(^ ~ ^||).
