vue-quill-editor富文本编辑器

1、在vue中使用quill呢，我们需要npm进行安装，安装命令如下：

npm install vue-quill-editor

2、安装依赖

npm install quill

3、使用
在main.js中进行引入或者在单个.vue文件中引入使用

//main.js
import Vue from 'vue'
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)

在vue中使用：

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

<script>
export default {
  name: 'App',
  data(){
     return {
            content: `<p>hello world</p>`,
            editorOption: {}
        }
  },computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    },methods: {
        onEditorReady(editor) { // 准备编辑器
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
        saveHtml:function(event){
          alert(this.content);
        }
    }
}
</script>

4、完整案例(在.vue单个文件中引入)：

<template>
  <el-container>
    <el-form ref="form" :model="form" label-width="100px" size="small">
      <el-form-item
        label="内容位置:"
        prop="contentTypeId"
        :rules="[{required: true, message: '内容位置不能为空'}]"
      >
        <el-select v-model="form.contentTypeId" placeholder="请选择内容位置" size="small">
          <el-option :value="item.id" :label="item.name" v-for="(item,index) in contentLocationOptions" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题:" prop="title" :rules="[{required: true, message: '标题不能为空'}]">
        <el-input v-model="form.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item
        label="文案内容:"
        class="textEdit"
        prop="content"
        :rules="[{required: true, message: '文案内容不能为空'}]"
      >
        <quill-editor v-model="form.content" ref="myQuillEditor" :options="editorOption"></quill-editor>
      </el-form-item>
      <el-form-item style="text-align:center">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>
<script>
import tableMixins from "mixins/tableMixins";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import publicManage from 'api/publicManage'
export default {
  mixins: [tableMixins],
  data() {
    let row = this.$route.query.row?this.$route.query.row:false
    return {
      contentLocationOptions:[],//内容位置列表
      form: {
        id:row.id?row.id:'',//文案编号(修改使用，辨别修改还是添加)
        contentTypeId:row.contentTypeId?row.contentTypeId:'',//内容位置对应的编号
        title: row.title?row.title:'',
        content: row.content?row.content:''
      },
      editorOption: {
        placeholder: "请在此输入文本..."
      }
    };
  },
  components: { quillEditor },
  created(){
      this.getContentPositionList()
  },
  methods:{
      getContentPositionList(){//内容位置列表
        publicManage.getContentPositionList({type:this.$route.query.activeIndex}).then(res=>{
            if(res.code==200){
                this.contentLocationOptions = res.data
            }
        })
      },
      save(){//保存
         this.$refs["form"].validate(async valid => {
             if(valid){
                 publicManage.saveOrUpdateContent(this.form).then(res=>{
                     if(res.code==200) this.$message.success("操作成功")
                     this.$router.push({path:'/PublicManage/TextEdit',query:{activeIndex:this.$route.query.activeIndex}})
                 })
             }
         })
      },
      cancel(){//取消
          this.$router.push({path:'/PublicManage/TextEdit',query:{activeIndex:this.$route.query.activeIndex}})
      }
  },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/tableMixins";
/deep/ .el-form {
  margin: 20px auto;
  width: 1250px;
}
/deep/ .ql-container {
  min-height: 200px;
}
/deep/ .ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
/deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

/deep/ .ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
/deep/ .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
/deep/ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
/deep/
  .ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="monospace"]::before,
/deep/
  .ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>

附加文章链接
vue-quill-editor 图片大小控制（拖拽同理）

npm install quill-image-resize-module -S    //大小
npm install quill-image-drop-module -S     //拖拽
//使用yarn执行下面代码
yarn add quill-image-resize-module -S 
yarn add quill-image-drop-module -S 

vue-cli 2.0
在build文件夹下的webpack.dev.conf.js文件里

const webpack = require('webpack')
module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
        })
    ],
 }

在vue组件中

import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
//import { ImageDrop } from 'quill-image-drop-module'
//Quill.register('modules/imageDrop', ImageDrop)

 editorOption: {
        placeholder: "请在此输入文本...",
        modules: {
          toolbar: [
            ["bold", "italic", "underline"],
            [{ header: 1 }, { header: 2 }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ direction: "rtl" }],
            [{ size: ["small", false, "large"] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }],
            [{ font: [] }],
            [{ align: [] }],
            ["link", "image"]
          ],
          imageDrop: true,//拖拽（只是从外面把图片拖进到富文本而已，不支持图片在富文本中随意拖拽）
          imageResize: {//图片大小
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          }
        }
      },

最后：重新yarn start / npm run dev运行项目

vue-cli 3.0
在vue.config.js文件中（没有则创建，与src同级）

const webpack = require('webpack')
module.exports = {
	chainWebpack: config => {
		config.plugin('provide').use(webpack.ProvidePlugin, [{
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
	    }]);
	}
}

其他同上

图片大小配置参考：
https://blog.csdn.net/weixin_43953710/article/details/99301369
https://www.jianshu.com/p/42bc2db19fab