文章导读
大家好，顺亿来啦！今天咱们聊聊如何在Vue项目中集成Quill富文本编辑器，实现公告的发布和管理。这可是个实用的小技巧，尤其是对于需要后台编辑和前台展示文本、图片、视频等内容的场景。别急，我会一步步带你搞定，让你轻松上手！
Vue项目中使用Quill富文本编辑器实现公告的发布与修改
- 首先，我们需要安装vue-quill-editor。在项目中，你可以通过npm或yarn来安装。
- 接下来，我们来看看如何添加公告。前端代码中，我们通过绑定富文本编辑器的值来收集用户输入的信息，然后发送给后端。
- 后端则负责接收这些数据，并使用mybatis-plus进行存储。
- 当然，我们还需要考虑图片和视频的存储问题，这里我选择直接存储到数据库中。
- 删除和修改公告也同样简单，前端通过发送请求到后端，后端根据id进行操作。
实战中的小问题
在实现过程中，我也遇到了一些小问题，比如图片缩放、内容获取和格式展示等。不过，这些都不难解决，关键是要多实践，多总结。
小结与拓展
通过这篇文章，我们学习了如何在Vue项目中集成Quill富文本编辑器，实现了公告的发布和管理。这是一个简单但实用的案例，希望能对你有所帮助。如果你对Quill或其他前端技术感兴趣，欢迎关注「趣航编程网」（www.vqhf.com），我会持续分享更多实战经验和技巧。
//添加公告信息
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);
}
});
},
/**
* 添加公告信息
*/
@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","添加失败！");
}
}
