Vue-Quill-Editor富文本编辑器

小星星o

已于 2023-08-27 15:31:05 修改

阅读量364

点赞数

文章标签： vue.js javascript ecmascript

于 2023-08-24 12:17:17 首次发布

本文链接：https://blog.csdn.net/m0_74608954/article/details/132471683

版权

安装

npm install vue-quill-editor

<template>
  <div>
    <quill-editor v-model="content" ref="myEditor"></quill-editor>
    <button @click="saveData">保存</button>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor';

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      content: '', // 绑定的富文本内容
    };
  },
  methods: {
    saveData() {
      // 获取编辑器的内容
      const editor = this.$refs.myEditor.quill;
      const html = editor.root.innerHTML;

      // 执行保存操作，可以将数据发送到后端或者进行其他处理
      // 以下为示例，将数据打印到控制台
      console.log(html);
    },
  },
};
</script>



##  使用自定义图片上传（需要搭建好后台的上传接口，上传完了之后返回的链接写进去）

<template>
  <div class="form-container">
    <el-button  @click="upPage" type="info" v-if="limitsAuthority !== 0">返回上一级</el-button>
    <div  v-if="limitsAuthority === 0">
      <div class="bcun">
        <div v-if="judgment === 0" class="xinzengandbianji">活动新增</div>
        <div v-else class="xinzengandbianji">活动编辑</div>
        <el-button class="bcun_1" type="success" @click="saveData">暂存</el-button>
        <el-button class="bcun_2" type="primary" @click="publishActivity">发布活动</el-button>
        <el-button class="bcun_3" type="danger" @click="closingActivity">关闭活动</el-button>
        <el-button class="bcun_3" type="info" @click="upPage">返回上一级</el-button>
      </div>
      <div class="zhuti">
        <label>主题<span class="required">*</span></label>
        <el-input type="text" v-model="form.subject" placeholder="请输入主题信息"/>
      </div>

      <quillEditor v-model="content"
      :options="editorOption"
      ref="myEditor"></quillEditor>

      <div class="xia">
        <div class="fuwen">
          <label>附文</label><br/>
          <!--        <el-input type="text" v-model="form.sidebar" placeholder="请输入附文"/>-->
          <textarea class="fuwen_1" v-model="form.sidebar" placeholder="请输入附文"></textarea>
        </div>

        <div class="xia_1">
          <div class="xia_1_1">
            <label>上限人数<span class="required">*</span></label>
            <el-input type="number" size="mini" v-model="form.maximum" placeholder="请输入上限人数"/>
          </div>

          <div class="xia_1_2">
            <label>活动地点<span class="required">*</span></label>
            <el-input v-model="form.eventLocation" placeholder="请输入活动地点"/>
          </div>

          <div class="xia_1_3">
            <label>活动开始时间<span class="required">*</span></label><br/>
            <el-date-picker clearable v-model="form.activeTime" type="datetime"
                            value-format="yyyy-MM-dd HH:mm"
                            placeholder="请选择活动时间">
            </el-date-picker>
          </div>

          <div class="xia_1_3">
            <label>活动结束时间<span class="required">*</span></label><br/>
            <el-date-picker clearable v-model="form.activeTimeEnd" type="datetime"
                            value-format="yyyy-MM-dd HH:mm"
                            placeholder="请选择活动时间">
            </el-date-picker>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import {quillEditor} from 'vue-quill-editor';
import {addEvents, getEvents, getEventsJudgment, updateEvents} from "../../../api/my/events";
import {uploadFile} from "../../../api/my/app";

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],               // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  [{'direction': 'rtl'}],                         // text direction

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                                         // remove formatting button
]

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
            handlers: {
              'image': function (value) {
                if (value) {

                  const range = this.quill.getSelection(true);
                  const input = document.createElement('input');
                  input.setAttribute('type', 'file');
                  input.click();

                  input.onchange = () => {
                    const file = input.files[0];
                    const formData = new FormData();
                    formData.append('file', file);

                    // 调用上传图片接口，并获取返回的图片链接
                    uploadFile(formData)
                      .then((response) => {
                        console.log("response"+JSON.stringify(response))
                        //const imageUrl = response.data.url;
                        const imageUrl = response
                        // 将图片链接插入到编辑器中
                        this.quill.insertEmbed(range.index, 'image', imageUrl);
                      })
                      .catch((error) => {
                        console.error(error);
                      });
                  };
                  /*const range = this.quill.getSelection(true);
                  this.quill.insertEmbed(range.index, 'image', 'http://192.168.2.22:9000/test/Snipaste_2023-08-10_15-39-16_1693039084377.jpg');*/
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      },
      limitsAuthority: 0,
      judgment: 0,
      form: {

      },
      content: '', // 绑定的富文本内容
    };
  },
  methods: {

    upPage() {
      this.$router.go(-1);  // 后退一步记录，等同于 history.back()
    },

    //发布活动
    publishActivity() {
      // 获取编辑器的内容
      const editor = this.$refs.myEditor.quill;
      const html = editor.root.innerHTML;
      this.form.main = html

      //主题、上限人数、活动地点、活动时间
      if (this.verify()) {
        this.$message({
          message: '必填项不能为空',
          type: 'warning'
        });
        return
      }
      if (this.form.activeTime > this.form.activeTimeEnd){
        this.$message({
          message: '活动开始时间不能大于活动结束时间',
          type: 'warning'
        });
        return
      }
      //保存，状态是 1 0发布中，1暂停报名，2关闭活动
      this.form.status = 0
      if (this.form.id != null) {
        updateEvents(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.$router.go(-1);  // 后退一步记录，等同于 history.back()
        });
      } else {
        addEvents(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.$router.go(-1);  // 后退一步记录，等同于 history.back()
        });
      }
    },
    //关闭活动
    closingActivity() {

      this.$confirm('确定关闭活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 获取编辑器的内容
        const editor = this.$refs.myEditor.quill;
        const html = editor.root.innerHTML;
        this.form.main = html

        //主题、上限人数、活动地点、活动时间
        if (this.verify()) {
          this.$message({
            message: '必填项不能为空',
            type: 'warning'
          });
          return
        }
        if (this.form.activeTime > this.form.activeTimeEnd){
          this.$message({
            message: '活动开始时间不能大于活动结束时间',
            type: 'warning'
          });
          return
        }
        //保存，状态是 1 0发布中，1暂停报名，2关闭活动
        this.form.status = 2
        if (this.form.id != null) {
          updateEvents(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.$router.go(-1);  // 后退一步记录，等同于 history.back()
          });
        } else {
          addEvents(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$router.go(-1);  // 后退一步记录，等同于 history.back()
          });
        }
      }).catch(() => {

      });
    },
    //校验
    verify() {
      //主题、上限人数、活动地点、活动时间
      if (!this.form.subject || !this.form.maximum ||
        !this.form.eventLocation || !this.form.activeTime
        ||!this.form.activeTimeEnd) {
        return true
      } else {
        return false
      }
    },
    //保存
    saveData() {
      // 获取编辑器的内容
      const editor = this.$refs.myEditor.quill;
      const html = editor.root.innerHTML;
      this.form.main = html

      //主题、上限人数、活动地点、活动时间
      if (this.verify()) {
        this.$message({
          message: '必填项不能为空',
          type: 'warning'
        });
        return
      }
      if (this.form.activeTime > this.form.activeTimeEnd){
        this.$message({
          message: '活动开始时间不能大于活动结束时间',
          type: 'warning'
        });
        return
      }
      console.log("准备发送的数据" + JSON.stringify(this.form))
      //保存，状态是 1 0发布中，1暂停报名，2关闭活动
      this.form.status = 1
      //console.log("this.form"+JSON.stringify(this.form))
      if (this.form.id != null) {
        updateEvents(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.$router.go(-1);  // 后退一步记录，等同于 history.back()
        });
      } else {
        addEvents(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.$router.go(-1);  // 后退一步记录，等同于 history.back()
        });
      }
    },
    getList(id) {
      getEvents(id).then(response => {
        this.form = response.data;
        this.content = response.data.main
      });
    }
  },
  async mounted() {
    const id = this.$route.query.id;
    console.log("路由的参数" + id); // 输出传递的参数值
    //通过id查找该用户的数据
    if (id) {

      let a = 1
      //通过活动id查询这个活动是不是自己的，查询活动主表详情
      await getEventsJudgment(id).then(async (res) => {
        if (res.data.length <= 0) {
          a = 2;
          console.log("进入了为空");
        }
      })

      if (a === 2) {
        this.$modal.msgError("链接错误!");
        this.limitsAuthority = 1
      } else {
        this.judgment = 1
        this.getList(id)
      }
    }
  }
};
</script>

<style>
.form-container {
  /* 添加自定义样式 */
}

.fuwen {
  margin: 20px;
}

.fuwen_1 {
  width: 500px;
  height: 150px;
}

.bcun {
  height: 70px;
  width: 100%;
  float: right;
}

.bcun_1, .bcun_2, .bcun_3 {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}

.xinzengandbianji {
  float: left;
  font-size: 23px;
  color: #00afff;
  margin-left: 20px;
  border: solid 3px silver;
  border-radius: 3px;
}

.form-item {
  margin-bottom: 25px;
}

.xia {
  margin-top: 50px;
}

.xia_1 {
  display: flex;
}

.xia_1_1, .xia_1_2, .xia_1_3 {
  flex: 1;
  margin: 20px;
}

.zhuti {
  margin: 20px;
}

.required {
  color: red;
  margin-left: 5px;
}

/* 可以根据需要为其他元素添加自定义样式 */
</style>