在开发一些需求如博客系统时,原始的文本框不满足我们的需求,展示word文档的格式又太麻烦吗,不难想到使用markdown的格式来输入和展示内容。本文介绍了在Vue2中怎么使用markdown格式的输入框和展示框。
先看一下实现的效果
官方文档
我们使用 mavonEditor 来实现(也可以使用vue-meditor)
官网
下载mavonEditor包
npm install mavon-editor --s
在Vue2中组件导入
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default{
//... 其余省略
// 导入组件
components: {
mavonEditor
}
}
使用mavonEditor
我这里只是简单的实现了下上面的效果,可以结合自己的实际需求修改
<div class="tips">
<span style="font-size: 24px; margin-top: 2%;">
<!-- 此处需要使用 elementui 2 -->
<i class="el-icon-paperclip"></i>
发布博客(markDown)
</span>
</div>
<div class="input" style="margin: 2%; margin-bottom: 0;">
<mavon-editor v-model="inputContent" class="formclass" :editable="!check">
</mavon-editor>
</div>
<div style="margin: 2%; margin-bottom: 0;">
<span style="font-size: 24px; margin-top: 2%;">博客内容</span>
<!-- 展示博客内容,只需要将编辑框和导航栏设置为 false 即可 -->
<mavon-editor v-model="inputContent"
class="formContent"
:editable="false"
:subfield="false"
defaultOpen="preview"
:toolbarsFlag="false" ></mavon-editor>
</div>
操作图片
需要实现的效果是,用户在操作框粘贴或者上传图片,前端将图片传递给后端,后端返回存储图片的链接,前端根据链接在预览框中展示图片
修改上面的代码
<div class="tips">
<span style="font-size: 24px; margin-top: 2%;">
<i class="el-icon-paperclip"></i>
发布博客(markDown)
</span>
</div>
<div class="input" style="margin: 2%; margin-bottom: 0;">
<mavon-editor
v-model="inputContent"
class="formclass"
ref="mdedit"
@imgAdd="imgAdd"
:editable="!check"></mavon-editor>
</div>
<div style="margin: 2%; margin-bottom: 0;">
<span style="font-size: 24px; margin-top: 2%;">博客内容</span>
<!-- 展示博客内容,只需要将编辑框和导航栏设置为 false 即可 -->
<mavon-editor v-model="inputContent"
class="formContent"
:editable="false"
:subfield="false"
defaultOpen="preview"
:toolbarsFlag="false" ></mavon-editor>
</div>
在上述的代码中,我们需要关注 ref 和 @imgadd,ref使javaScript能够操作编辑框里面的元素,@imgadd指向了一个方法,在用户粘贴或者上传图片的时候自动执行。
新增一个函数
imgAdd(pos,file){
// pos: 图片文件的名字
// file: 图片文件
let imgData = new FormData();
// 构建后端请求的参数,可以自己定义
imgData.append('file',file);
// 发送请求, 将图片上传后端并返回后端存储的链接
blogApi.uploadImage(imgData).then(res=>{
console.log(res.data.data);
console.log(this.$refs.mdedit)
// 将pos中文文件名替换为后端返回的图片链接
this.$refs.mdedit.$img2Url(pos,res.data.data)
});
后端可以使用文件对象存储,如果是java的话可以使用minio,这里就不展示代码了,后面有时间的话单独写一篇后端的,敬请关注。
参考文章
Vue项目集成Markdown标记语言编辑器(MavonEditor)_vue集成markdown-CSDN博客https://blog.csdn.net/qq_43403676/article/details/124409715
Markdown插件mavon-editor上传图片_mavon-editor 图片-CSDN博客文章浏览阅读2.3k次。最终效果实现方法这里只着重说明mavon-editor如何上传图片,其他更多配置可参考文档:mavon-editor文档。https://blog.csdn.net/hhl18730252820/article/details/123456478