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

富文本编辑器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: {
      
		defaultText: {
       type: String, default: "" },
		richText: {
       type: String, default: "" }
	},
	watch: {
      
		// 监听默认值回调
		defaultText(nv, ov) {
      
			if (nv != "") {
      
				this.editorHtml = nv;
				this.$emit("update:rich-text", nv);
			}
		}
	},
	data() {
      
		return {
      
			editorHtml: "",
			// 菜单栏
			customToolbar: [
				[{
       header: [false, 1, 2, 3, 4, 5, 6] }],
				["bold", "underline"],
				[{
       align: "" }, {
       align: "center" }, {
       align: "right" }, {
       align: "justify" }],
				[{
       list: "ordered" }, {
       list: "bullet" }, {
       list: "check" }],
				[{
       indent: "-1" }, {
       indent: "+1" }],
				["color", "background"],
				["link", "image", "video"]
			],
			// 调整图片大小和位置
			customModulesForEditor: [
				{
       alias: "imageDrop", module: ImageDrop },
				{
       alias: "imageResize", module: ImageResize }
			],
			// 设置编辑器图片可拖拽
			editorSettings: {
      
				modules: {
       imageDrop: true, imageResize: {
      } }
			}
		};
	},
	mounted() {
      },
	methods: {
      
		// 自定义图片上传
		handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      
			// 文件上传：$oss图片文件上传插件是自己封装的阿里云oss文件直传，此处代码自定义
			this.$oss(file, file.name).then(url => {
      
				if (!!url) {
      
					Editor.insertEmbed(cursorLocation, "image", url);
					resetUploader();
				}
			});
		},
		// 失去焦点
		onEditorBlur(quill) {
      
			this.$emit("update:rich-text", this.editorHtml);
		}
	}
};
script>

<style scoped>
/* 处理添加视频链接标签位置 */
.editor >>> .ql-snow .ql-tooltip {
      
	top: 0 !important;
	left: 40% !important;
}
style>

使用Editor组件

<template>
	<div class="home">
		<el-card shadow="never">
			<div slot="header" class="clearfix">
				<h1>Editor 编辑器h1>
			div>
			
			<Editor :defaultText="defaultText" :richText.sync="richText" />
		el-card>
	div>
template>

<script>
// 导入插件
import Editor from "../components/Editor";

export default {
      
	name: "Home",
	components: {
       Editor },
	data() {
      
		return {
      
			defaultText: "",
			richText: ""
		};
	}
};
script>

参考图：

注意事项：
当引入调整的图片的两个插件时，vue控制台会报无法找到Quill.js。vue2editor官方给的解决办法是基于webpack4.x的，如果报错，说明当前项目使用的webpack版本较高，现在的解决办法就是针对高版本webpack的即vue-cli版本＞4.x。
解决办法：
修改vue.config.js文件，在文件顶部导出webpack模块，然后根据修改要求对webpack进行相应的调整和设置。代码如下：

// webpack
const webpack = require("webpack");
// gzip

module.exports = {
     
	chainWebpack: config => {
     
		// 压缩代码
		config.optimization.minimize(true);
		// 分割代码
		config.optimization.splitChunks({
      chunks: "all" });
		// 用cdn方式引入
		config.externals({
     
			//vue: "Vue"
		});
		// Quill.js文件引入失败配置
		config.plugin("provide").use(webpack.ProvidePlugin, [
			{
     
				"window.Quill": "quill/dist/quill.js",
				Quill: "quill/dist/quill.js"
			}
		]);
	}
};

^{(*￣(oo)￣)}：因为业务需要，移动端图片要100%占满全屏，所以当前使用的基于quill 的图片拖拽无法达到宽度100%的效果，拖拽后的图片大小是指定的像素宽度，若对图片宽度有特定要求，此富文本的图片上传可能适合你，若动手能力强，可自行改造。