vue集成一个支持图片缩放拖拽的富文本编辑器

需求：

根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了wangEditor富文本编辑器。 最初使用的是vue2Editor富文本编辑器，vue2EdITor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助Quill.js来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果不是很理想。 此次编辑器主要是上传的富文本需要在移动端进行展示，为了达到理想效果，需要能修改图片百分比，当设置img标签的width属性为100% 时，就可以满足需求。最近发新版本（第四版 v4）的wangeditor可以满足需求，最终选择了它用于实际开发中。

效果图：

代码案例及相关配置如下：

安装插件

npm i wangeditor --save// oryarn 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 style="text-align: center;
     ">
    img src="https://tr-mba.oss-cn-beijing.aliyuncs.COM/picture/202010/20_222430_8011.png" width="30%" style="text-align: center;
     max-width: 100%;
    ">
    /p>
    `;
		}
    );
	}
}
    ;
    /script>
    

以上就是vue集成一个支持图片缩放拖拽的富文本编辑器的详细内容，更多关于vue 富文本编辑器的资料请关注其它相关文章！

• Vue实现图片预览效果实例（放大、缩小、拖拽）
• vue实现拖拽或点击上传图片
• vue实现图片拖拽功能
• vue实现图片按比例缩放问题操作
• 利用vue组件实现图片的拖拽和缩放功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！