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

//添加公告信息
    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","添加失败！");
        }

    }

//html
                      <el-popconfirm
                        confirm-button-text="好的"
                        cancel-button-text="不用了"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确定删除吗？"
                        @confirm="handleDelete(scope.$index, scope.row)"
                      >
                        <el-button
                          type="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);
        }
      });
    },

/**
     * 删除公告信息
     *
     * @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", "删除失败");
        }

    }

//修改公告信息
    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);
        }
      });
    },

/**
     * 修改公告信息
     *
     * @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", "信息修改失败");
        }


    }