富文本编辑器vue2-editor

Z时代
2024-01-10
分类：综合

vue

富文本编辑器vue2-editor">富文本编辑器vue2-editor

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

vue2-editor 富文本编辑器是基于 vue-quill-editor 富文本编辑器进行改造的，如果有问题可以访问文档进行问题的查找。

插件安装

vue2-editor：富文本编辑器

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"
			}
		]);
	}
};