Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】

前言

       闲的无聊、给原有的系统添加一个公告的功能。就是后台可以写一些公告信息，然后前台可以看到发布的信息。一般来说一个公告就是一些文字描述+图片+视频等。还有排版样式啥的。使用文本编辑器就可以实现。然后正好用到了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中拿到的数据

1.2 后端代码

       后端就是存储从前端获取的数据，这里用实体类接收前端传来的参数，具体的保存，我这里用的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","添加失败！");}}

        这里我将公告的信息用一个实体类表示。

1.3 数据库存储

       这里将图片存储直接存储到数据库了，你可以选择在上传图片的时候，将图片上传到服务器，然后数据库中保存访问该图片的地址。视频也同理。

3、删除公告

1.1 前端代码

       删除就是获取对应公告的id，然后传给后端。后端根据这个id进行对应公告的删除。

//html<el-popconfirmconfirm-button-text="好的"cancel-button-text="不用了"icon="el-icon-info"icon-color="red"title="确定删除吗？"@confirm="handleDelete(scope.$index, scope.row)"><el-buttontype="danger"icon="el-icon-delete"slot="reference"></el-button></el-popconfirm>//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<String,Object> maps) {String id = (String) maps.get("id");HashMap<String, Object> 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.identity.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<AdvertiserInfo> 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中使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！