使用vue怎么實現一個支持圖片縮放拖拽的富文本編輯器

使用vue怎么實現一個支持圖片縮放拖拽的富文本編輯器？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

安裝插件

npm i wangeditor --save
// or
yarn add wangeditor

編輯器配置

<template>
	<div class="w_editor">
		<!-- 富文本編輯器 -->
		<div id="w_view"></div>
	</div>
</template>

<script>
// 引入富文本
import WE from "wangeditor";
// 引入elementUI Message模塊（用于提示信息）
import { Message } from "element-ui";

export default {
	name: "WEditor",
	props: {
		// 默認值
		defaultText: { type: String, default: "" },
		// 富文本更新的值
		richText: { type: String, default: "" }
	},
	data() {
		return {
			// 編輯器實例
			editor: null,
			// 富文本菜單選項配置
			menuItem: [
				"head",
				"bold",
				"fontSize",
				"fontName",
				"italic",
				"underline",
				"indent",
				"lineHeight",
				"foreColor",
				"backColor",
				"link",
				"list",
				"justify",
				"image",
				"video"
			]
		};
	},
	watch: {
		// 監聽默認值
		defaultText(nv, ov) {
			if (nv != "") {
				this.editor.txt.html(nv);
				this.$emit("update:rich-text", nv);
			}
		}
	},
	mounted() {
		this.initEditor();
	},
	methods: {
		// 初始化編輯器
		initEditor() {
			// 獲取編輯器dom節點
			const editor = new WE("#w_view");
			// 配置編輯器
			editor.config.showLinkImg = false; /* 隱藏插入網絡圖片的功能 */
			editor.config.onchangeTimeout = 400; /* 配置觸發 onchange 的時間頻率，默認為 200ms */
			editor.config.uploadImgMaxLength = 1; /* 限制一次最多能傳幾張圖片 */
			// editor.config.showFullScreen = false; /* 配置全屏功能按鈕是否展示 */
			editor.config.menus = [...this.menuItem]; /* 自定義系統菜單 */
			// editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制圖片大小 */;
			editor.config.customAlert = err => {
				Message.error(err);
			};
			// 監控變化，同步更新數據
			editor.config.onchange = newHtml => {
				// 異步更新組件富文本值的變化
				this.$emit("update:rich-text", newHtml);
			};
			// 自定義上傳圖片
			editor.config.customUploadImg = (resultFiles, insertImgFn) => {
				/**
				 * resultFiles：圖片上傳文件流
				 * insertImgFn：插入圖片到富文本
				 * 返回結果為生成的圖片URL地址
				 * */
				// 此方法為自己封賺改寫的阿里云圖片OSS直傳插件。
				this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => {
					!!url && insertImgFn(url); /* oss圖片上傳，將圖片插入到編輯器中 */
				});
			};
			// 創建編輯器
			editor.create();
			this.editor = editor;
		}
	},
	beforeDestroy() {
		// 銷毀編輯器
		this.editor.destroy();
		this.editor = null;
	}
};
</script>

注： 具體參數配置請參考編輯器文檔使用說明。

組件中使用抽離的編輯器：

<template>
	<div class="editor">
		<el-card shadow="never">
			<div slot="header" class="clearfix">
				<span>富文本編輯器</span>
			</div>
			<div class="card_center">
				<WEditor :defaultText="defaultText" :richText.sync="richText" />
			</div>
		</el-card>
	</div>
</template>

<script>
// 引入封裝好的編輯器
import WEditor from "@/components/WEditor";

export default {
	name: "Editor",
	components: { WEditor },
	data() {
		return {
			// 默認值
			defaultText: "",
			// 富文本更新的值
			richText: ""
		};
	},
	created() {
		// 等待組件加載完畢賦值
		this.$nextTick(() => {
			this.defaultText = `<p ><img src="https://tr-mba.oss-cn-beijing.aliyuncs.com/picture/202010/20_222430_8011.png" width="30%" ></p>`;
		});
	}
};
</script>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。