富文本編輯器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"
			}
		]);
	}
};

^{(*￣(oo)￣)}：因為業務需要，移動端圖片要100%占滿全屏，所以當前使用的基於quill 的圖片拖拽無法達到寬度100%的效果，拖拽后的圖片大小是指定的像素寬度，若對圖片寬度有特定要求，此富文本的圖片上傳可能適合你，若動手能力強，可自行改造。