【前端系列】- 富文本组件(mavon-editor)

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。

Vue - 富文本组件(mavon-editor)

😄生命不息,写作不止

🔥 继续踏上学习之路,学之分享笔记

👊 总有一天我也能像各位大佬一样

🏆一个有梦有戏的人怒放吧德德

🌝分享学习心得,欢迎指正,大家一起学习成长!

vue-elementui.jpg

简介

mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。

官方地址:http://www.mavoneditor.com/

github:https://github.com/hinesboy/mavonEditor

安装 mavon-editor

npm install mavon-editor --save

安装好了之后就需要在全局进行注册

// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

安装、注册后就要来使用富文本编辑器这个组件,以下我将使用我之前做的毕业设计的一部分来作为案例。

使用 mavon-editor

首先,注册好了就能够直接使用标签进行引用

<mavon-editorref="mdedit"v-model="ruleForm.content"style="height: 80vh"@imgAdd="$imgAdd"></mavon-editor>

整体的形成就如下图

这是带有预览模式,在上面的工具栏部分是组件已经完成的功能,其中有些需要自己的实现,比如是图片的上传,这个组件也能够支持扩展,可以去扩展更多的便捷式功能,具体详情在官网上都有。

图片上传

接下来介绍图片上传功能,图片上传包括两种,一种是直接添加就到服务器上(这里采用阿里云OSS存储),还有一种是每次添加图片都保存起来,然后一同上传到服务器,这样的作法是能够确保在不想要发布的时候,图片不会被上传到服务器中,但是最常见的还是直接上传的那种。

单图上传

就是放置图片的同时直接将图片上传到阿里云OSS

<mavon-editorref="mdedit"v-model="ruleForm.content"style="height: 80vh"@imgAdd="$imgAdd"></mavon-editor>

在组件标签中引入@imagAdd事件,这是组件的时间绑定。

$imgAdd(pos, file){ //只要放上去就上传到oss//单图上传// 第一步.将图片上传到服务器.letimgData=newFormData();
imgData.append('file',file);
this.$axios.post("/files/image/upload", imgData).then(res=> {
// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)/**     * $vm 指为mavonEditor实例,可以通过如下两种方式获取     * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`     * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`     */this.$refs.mdedit.$img2Url(pos, res.data.data);
  })
}

整体的逻辑就是将文件保存到服务器中,在将返回的url替换到文档的原位置,this.$refs.mdedit.$img2Url(pos, res.data.data)进行回显保存路径。默认大小样式为 min-height: 300px , min-width: 300px,并且是可自行覆盖。

结果如下

多图上传

多图上传简单理解就是循环所有文件,一一上传保存,适合可以将不要的图片经行去除,就不会全部都上传。

<mavon-editorref="mdedit"v-model="ruleForm.content"style="height: 80vh"@imgAdd="$imgAdd"@imgDel="$imgDel"></mavon-editor>

通过定义一个变量来存储文件,也需要删事件,图片删除之后就需要去除。

$imgAdd(pos, $file){
// 缓存图片信息this.img_file[pos] =$file;
},
$imgDel(pos){
deletethis.img_file[pos];
},

上传,也就是循环将保存好的图片一一上传保存,在回显替换到原来的位置。

uploadimg($e){
vari=1for(var_imginthis.img_file) {
letimgData=newFormData();
// 第一步.将图片上传到服务器.imgData.append('file', this.img_file[_img]);
this.$axios.post("/files/image/upload", imgData).then(res=> {
/**             * 例如:返回数据为 res = [[pos, url], [pos, url]...]             * pos 为原图片标志(0)             * url 为上传后图片的url地址             */// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)this.$refs.mdedit.$img2Url(i, res.data.data);
i++;
        })
    }
},

这里粘贴一个后端代码,本次是使用阿里云OSS存储,需要做一些配置,详情可以去看一下阿里云官网关于OSS这一块的内容。后端方法的各种逻辑也都加了注释,这里就不在赘述。

@PostMapping("/image/upload")
publicResultuploadImage(MultipartFilefile) throwsIOException {
StringoriginalFilename=file.getOriginalFilename();
Stringtype=FileUtil.extName(originalFilename); //文件类型doublesize=file.getSize(); //文件大小//定义一个唯一文件识别码 ---Stringuuid=IdUtil.fastSimpleUUID();
StringuploadFile=uuid+StrUtil.DOT+type;
//获取文件的urlStringurl;
//创建文件的MD5Stringmd5=SecureUtil.md5(file.getInputStream());
//从数据库里查询是否存在相同的记录...通过文件的md5查询文件FilesdbFile=filesService.getFileByMd5(md5);
if (dbFile!=null) { //存在url=dbFile.getUrl();
    } else { //不存在,就存到oss中,并获取路径//OSS上传ossUtil.upload(file.getInputStream(), "images/"+uploadFile); //路径肯定有,故不需要判定,oss只能存一个名字相同的url=ossUtil.getURL("images/"+uploadFile); //返回url    }
//存储到数据库 -- 还需设置是谁上传的,要传来参数,后面搞FilessaveFile=newFiles();
saveFile.setName(originalFilename);
saveFile.setType(type);
saveFile.setSize(size/1024);//这是b要装成k就除以1024saveFile.setUrl(url);
saveFile.setMd5(md5);
saveFile.setCreateTime(LocalDateTime.now());
filesService.save(saveFile);
returnResult.succ(url);
}

OSSUtil: 参照阿里云官网

@ComponentpublicclassOSSUtil {
/*上传*/publicvoidupload(InputStreaminputStream, Stringtarget){
// 创建OSSClient实例。OSSossClient=newOSSClientBuilder().build(Const.ENDPOINT, Const.ACCESS_KEYID, Const.ACCESSKEY_SECRET);
ossClient.putObject(Const.BUCKET_NAME, target, inputStream);
// 关闭OSSClient。ossClient.shutdown();
    }
/*获取url*/publicStringgetURL(StringobjectName){
// 创建OSSClient实例。OSSossClient=newOSSClientBuilder().build(Const.ENDPOINT, Const.ACCESS_KEYID, Const.ACCESSKEY_SECRET);
// 设置URL过期时间为100天。LocalDateTimetime=LocalDateTime.now().plusDays(100);
Dateexpiration=Date.from(time.atZone( ZoneId.systemDefault()).toInstant());
// 生成以GET方法访问的签名URL,访客可以直接通过浏览器访问相关内容。URLurl=ossClient.generatePresignedUrl(Const.BUCKET_NAME, objectName, expiration);
// 关闭OSSClient。ossClient.shutdown();
returnurl.toString();
    }
}

更多上传相关可以查看:https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/upload-images.md

其他功能

mavon-editor提供了许多的API,就包括语言选择、工具栏、工具栏背景等等。

toolbars

默认工具栏按钮全部开启, 传入自定义对象,可以选择启用部分按钮,功能如下

/*例如: {bold: true, // 粗体italic: true,// 斜体header: true,// 标题}此时, 仅仅显示此三个功能键*/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: true, // 保存(触发events中的save事件)/* 1.4.2 */navigation: true, // 导航目录/* 2.1.8 */alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐/* 2.2.1 */subfield: true, // 单双栏模式preview: true, // 预览}

并且还能通过自定义工具

<mavon-editor><!-- 左工具栏前加入自定义按钮 --><templateslot="left-toolbar-before"><buttontype="button"@click="$click('test')"class="op-icon fa fa-mavon-align-left"aria-hidden="true"title="自定义"></button></template><!-- 左工具栏后加入自定义按钮  --><templateslot="left-toolbar-after"><buttontype="button"@click="$click('test')"class="op-icon fa fa-mavon-align-left"aria-hidden="true"title="自定义"></button></template><!-- 右工具栏前加入自定义按钮  --><templateslot="right-toolbar-before"><buttontype="button"@click="$click('test')"class="op-icon fa fa-mavon-align-left"aria-hidden="true"title="自定义"></button></template><!-- 右工具栏后加入自定义按钮  --><templateslot="right-toolbar-after"><buttontype="button"@click="$click('test')"class="op-icon fa fa-mavon-align-left"aria-hidden="true"title="自定义"></button></template></mavon-editor>

事件绑定

组件也提供了许多的事件绑定,这里不加以赘述,官网都有。可以看一下下图


相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
4月前
|
数据采集 前端开发 JavaScript
《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
本文档详细介绍了从零开始搭建一个包含前后端交互的热搜展示项目的全过程。通过本教程,读者不仅能学习到完整的项目开发流程,还能掌握爬虫技术和前后端交互的具体实践。适合有一定编程基础并对项目实战感兴趣的开发者参考。
93 1
|
1月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
106 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
4月前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
174 0
|
1月前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
43 1
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
3月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
251 1
|
2月前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
68 2
|
2月前
|
前端开发 JavaScript Go
前端开发趋势:从响应式设计到Web组件的探索
【10月更文挑战第1天】前端开发趋势:从响应式设计到Web组件的探索
43 3
|
3月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架