使用vue-quill-editor

最新推荐文章于 2025-05-15 18:12:05 发布

归属i

最新推荐文章于 2025-05-15 18:12:05 发布

阅读量454

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43877725/article/details/108278691

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-quill-editor，包括安装步骤、配置main.js、模板、脚本和样式设置，最后展示了实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装vue-quill-editor

 npm install vue-quill-editor --save

main.js

import VueQuillEditor  from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);
//全局定义文本框的功能和文字提示
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  [{ header: 1 }, { header: 2 }], // custom button values
  [{ list: "ordered" }, { list: "bullet" }],
  [{ 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: [] }],
  ["image"],
  ["clean"]
];
const titleConfig = [
  { Choice: ".ql-bold", title: "加粗" },
  { Choice: ".ql-italic", title: "斜体" },
  { Choice: ".ql-underline", title: "下划线" },
  { Choice: ".ql-header", title: "段落格式" },
  { Choice: ".ql-strike", title: "删除线" },
  { Choice: ".ql-blockquote", title: "块引用" },
  { Choice: ".ql-code", title: "插入代码" },
  { Choice: ".ql-code-block", title: "插入代码段" },
  { Choice: ".ql-font", title: "字体" },
  { Choice: ".ql-size", title: "字体大小" },
  { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
  { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
  { Choice: ".ql-direction", title: "文本方向" },
  { Choice: '.ql-header[value="1"]', title: "h1" },
  { Choice: '.ql-header[value="2"]', title: "h2" },
  { Choice: ".ql-align", title: "对齐方式" },
  { Choice: ".ql-color", title: "字体颜色" },
  { Choice: ".ql-background", title: "背景颜色" },
  { Choice: ".ql-image", title: "图像" },
  { Choice: ".ql-video", title: "视频" },
  { Choice: ".ql-link", title: "添加链接" },
  { Choice: ".ql-formula", title: "插入公式" },
  { Choice: ".ql-clean", title: "清除字体格式" },
  { Choice: '.ql-script[value="sub"]', title: "下标" },
  { Choice: '.ql-script[value="super"]', title: "上标" },
  { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
  { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
  { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
  { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
  { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
  { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
  {
    Choice: '.ql-align .ql-picker-item[data-value="center"]',
    title: "居中对齐"
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="right"]',
    title: "居右对齐"
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="justify"]',
    title: "两端对齐"
  }
];
Vue.prototype.$toolbarOptions = toolbarOptions; //全局注册，使用方法为:this.$toolbarOptions
Vue.prototype.$titleConfig = titleConfig; //全局注册，使用方法为:this.$titleConfig

template

 <div>
    <div class="edit_container">
      <el-upload class="avatar-uploader"
       :action="serverUrl"
       name="editorFile"
        :headers="header"
        :show-file-list="false"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :before-upload="beforeUpload">
        </el-upload>

      <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
      <el-button v-on:click="saveHtml" class="button">保存</el-button>
    </div>
  </div>

script

export default {
    name: "districtActive",
    components: {},
    data() {
      return {
        quillUpdateImg: false,
        content: null,
        editorOption: {
          placeholder: "",
          theme: "snow", // or 'bubble'
          modules: {
            toolbar: {
              container: this.$toolbarOptions,
              handlers: {
                'image': function(value) {
                  if (value) {
                    // 触发input框选择图片文件
                    document.querySelector('.avatar-uploader input').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },
        //serverUrl: '',
        serverUrl: process.env.VUE_APP_BASE_API + '/test/user/upload', // 这里写你要上传的图片服务器地址
        header: {
          // token: sessionStorage.token
        } // 有的图片服务器要求请求头需要有token
      }
    },
    mounted() {
      //初始化编辑器文字提示
      autotip: {
        document.getElementsByClassName("ql-editor")[0].dataset.placeholder = "";
        for (let item of this.$titleConfig) {
          let tip = document.querySelector(".quill-editor " + item.Choice);
          if (!tip) continue;
          tip.setAttribute("title", item.title);
        }
      }
    },

   methods: {
      onEditorChange({ editor, html, text }) {
        //内容改变事件
        console.log("---内容改变事件---");
        this.content = html;
        console.log(html);
      },
      // 富文本图片上传前
      beforeUpload() {
        // 显示loading动画
        this.quillUpdateImg = true;
      },

      uploadSuccess(res, file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        console.log(res);
        let quill = this.$refs.myQuillEditor.quill;
        // 如果上传成功
        if (res.code == "200") {
          let length = quill.getSelection().index;
          // 插入图片  res.url为服务器返回的图片地址
       	  // quill.insertEmbed(length, "image", res.result.path);
       	  // 换取网络路径然后发送给后端和回显
          quill.insertEmbed(length, 'image', "http://localhost:8080/pudodoMini" + res.url)
          // 调整光标到最后
          quill.setSelection(length + 1);
        } else {
          this.$message.error("图片插入失败");
        }
        // loading动画消失
        this.quillUpdateImg = false;
      },
      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false;
        this.$message.error("图片插入失败");
      },

      //保存
      saveHtml: function(event) {
        alert(this.content);
      }
    }
 };

style

.edit_container {
  width: 1300px;
  margin: 0px auto;
}
.edit_container >>> .ql-toolbar.ql-snow + .ql-container.ql-snow {
  width: 1300px;
  height: 800px;
  background-color: #fff;
}
.button {
  margin: 10px 0px 0px;
}

效果图

在这里插入图片描述