Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue |
您所在的位置：网站首页 › 通知公告背景图怎么弄的 › Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue |
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue
|
前言
闲的无聊、给原有的系统添加一个公告的功能。就是后台可以写一些公告信息，然后前台可以看到发布的信息。一般来说一个公告就是一些文字描述+图片+视频等。还有排版样式啥的。使用文本编辑器就可以实现。然后正好用到了Quill，通过Quill富文本编辑器集成到Vue中，就可以实现这个效果。具体实现过程中遇到的几个小问题：1、如何将插入的图片进行缩放？ 2、如何获取文本中的内容？3、如何将保存到数据库中的内容，重新按照原格式展示出来？ 真正弄出来，发现也不难 提示本篇博客是在下方博客的基础上进行的。建议先看一下基础版本的，然后再回过头来看这个实战的。 在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】 1、具体实现的效果在Vue项目中使用Quill富文本编辑器实现公告的发布与修改 提示：在修改的时候，重新上传的图片是可以调整大小的。不知道是不是录制视频的软件影响。导致修改公告信息的时候，重新上传的图片缩放不好用了。 2、添加公告 1.1 前端代码这里只给出方法，具体的页面设计，建议看上一篇博客介绍。这里遇到的问题，就是如何将用户输入的公告信息收集起来，然后传给后端。富文本的内容在content里边，直接获取就行。然后把数据组合一下发送给后端。 //添加公告信息 addAnnounceInfo() { const _this = this; let entity = this.entity; entity.content = this.content; entity.name = this.name; console.error("entity:" + JSON.stringify(entity)); this.$axios.addAnnounceInfo(this.entity).then(function (resp) { if (resp.code == 200) { _this.$alert("《" + _this.entity.name + "》添加成功", "消息", { confirmButtonText: "确定", callback: (action) => { _this.adddialogVisible = false; //dialog对话窗口关闭 _this.showAllAnnounceMentInfo(); }, }); _this.showAllAnnounceMentInfo(); } else { _this.$message.error(resp.data.errMessage); } }); },看这里调用富文本的组件，然后双向绑定的值是content，然后你在编辑器里边做的操作，数据都在这里。你直接拿这个数据就行了。
这里是测试从content中拿到的数据
后端就是存储从前端获取的数据，这里用实体类接收前端传来的参数，具体的保存，我这里用的mybatis-plus。 /** * 添加公告信息 */ @RequestMapping(value = "/announce/addAnnounceInfo", method = RequestMethod.POST) public Result addAnnounceInfo(@RequestBody AdvertiserInfo advertiserInfo){ int result = 0; if(advertiserInfo == null){ return Result.error().data("errMessage","信息不能为空！"); } String createTime = CurrentTime.getCurrentTime(); advertiserInfo.setTime(createTime); result = advertiserInfoMapper.insert(advertiserInfo); if(result > 0){ return Result.ok(); }else{ return Result.error().data("errMessage","添加失败！"); } }这里我将公告的信息用一个实体类表示。
这里将图片存储直接存储到数据库了，你可以选择在上传图片的时候，将图片上传到服务器，然后数据库中保存访问该图片的地址。视频也同理。 删除就是获取对应公告的id，然后传给后端。后端根据这个id进行对应公告的删除。 //html //methods //删除公告信息 handleDelete(index, row) { const _this = this; const params = { id: row.id, }; this.$axios.handleDeleteAnnounceInfo(params).then((resp) => { if (resp.code == 200) { _this.$alert("删除成功", "消息", { confirmButtonText: "确定", callback: (action) => { _this.showAllAnnounceMentInfo(); }, }); } else { _this.$message.error(resp.data.errMessage); } }); }, 1.2 后端代码拿到id删除就行了，没啥好说的 /** * 删除公告信息 * * @param * @return */ @RequestMapping(value = "/announce/deleteAnnounceInfo", method = RequestMethod.DELETE) public Result deletelAnnounceInfo(@RequestParam Map maps) { String id = (String) maps.get("id"); HashMap map = new HashMap(); map.put("id", id); int rs = advertiserInfoMapper.deleteByMap(map); if (rs > 0) { return Result.ok(); } else { return Result.error().data("errMessage", "删除失败"); } } 4、修改公告 1.1 前端代码要修改哪个公告，就先获取到哪个公告的相关信息。然后修改后，提交数据到后端进行数据修改。这里有一点，就是保存到数据库中的文本，再次展示的富文本框的时候，样式是不变的。 //修改公告信息 UpdateAnnounceInfo(index, row) { console.error("====:" + index, +"-----:" + row); this.updateDialogVisible = true; this.content = row.content; this.name = row.name; this.id = row.id }, updateAnnounceInfo1() { const _this = this; let entity = this.entity; entity.id = this.id entity.content = this.content; entity.name = this.name; console.error("entity:" + JSON.stringify(entity)); this.$axios.submitUpdateAnnounce(this.entity).then(function (resp) { if (resp.code == 200) { _this.$alert("《" + _this.entity.name + "》信息修改成功", "消息", { confirmButtonText: "确定", callback: (action) => { _this.updateDialogVisible = false; _this.showAllAnnounceMentInfo(); }, }); } else { _this.$message.error(resp.data.errMessage); } }); }, 1.2 后端代码就是一个修改操作，没啥好说的 /** * 修改公告信息 * * @param advertiserInfo * @return */ @RequestMapping(value = "/announce/updateAnnounceInfo", method = RequestMethod.PUT) public Result updateAnnounceInfo(@RequestBody AdvertiserInfo advertiserInfo) { if (advertiserInfo == null) { return Result.error().data("errMessage", "信息不能为空"); } UpdateWrapper updateUserWrapper = new UpdateWrapper(); updateUserWrapper.like("id", advertiserInfo.getId()); int rs = advertiserInfoMapper.update(advertiserInfo, updateUserWrapper); if (rs > 0) { return Result.ok(); } else { return Result.error().data("errMessage", "信息修改失败"); } } 5、后语这是一个简单的小案例，可以借鉴看看。主要目的是练习Quill富文本的使用。以及如何在Vue中使用 |
【本文地址】