vue2editor富文本编辑器（图片拖拽）

最新推荐文章于 2025-12-03 10:18:34 发布

原创

最新推荐文章于 2025-12-03 10:18:34 发布 · 2.3k 阅读

8 ·

CC 4.0 BY-SA版权

在后台管理系统开发中，富文本编辑器vue2editor因其特性被选用。本文介绍如何结合vue2editor、quill-image-drop-module和quill-image-resize-module实现图片拖拽和大小调整功能。在使用过程中遇到webpack找不到Quill.js的问题，解决方案是针对高版本webpack（vue-cli>4.x）修改vue.config.js文件。

富文本编辑器vue2editor

在后台管理系统开发的过程中，富文本编辑器是经常会用到的一种文本编辑工具。目前主流的富文本编辑器有很多，但总有一款是符合自己需求的。在周末花费了大约半天的时间，尝试了许多富文本编辑器，大体上功能都相差无几。主要是对富文本中图片的处理，各个种类的富文本对图片的处理差异还是挺大的。此处的所说的图片处理指的是图片的大小调整、位置调整、是否可以拖拽等。此次我使用的富文本编辑器是vue2editor ,并结合实际情况进行了相应调整。
vue2editor 富文本编辑器是基于 vue-quill-editor 富文本编辑器进行改造的，如果有问题可以访问文档进行问题的查找。

插件安装

vue2editor：富文本编辑器

yarn add vue2-editor

quill-image-drop-module：图片拖拽
quill-image-resize-module：图片大小调整

yarn add quill-image-drop-module --dev
yarn add quill-image-resize-module --dev

封装Editor组件

<template>
	<div class="editor">
		<vue-editor
			:customModules="customModulesForEditor"
			:editorOptions="editorSettings"
			:editorToolbar="customToolbar"
			useCustomImageHandler
			@image-added="handleImageAdded"
			@blur="onEditorBlur"
			v-model="editorHtml"
		/>
	</div>
</template>

<script>
// 引入vue2wditor
import {
    
     VueEditor } from "vue2-editor";
// 导入图片操作相关插件
import {
    
     ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";

export default {
    
    
	name: "Vue2Editor",
	components: {
    
     VueEditor },
	props: {
    
    
		defaultT