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


Posted in Vue.js onJanuary 29, 2021

需求:

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

效果图:

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 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.js 相关文章推荐
vue实现广告栏上下滚动效果
Nov 26 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 #Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 #Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 #Vue.js
vue穿梭框实现上下移动
Jan 29 #Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 #Vue.js
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
You might like
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php常用正则函数实例小结
2016/12/29 PHP
php-msf源码详解
2017/12/25 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
python os用法总结
2018/06/08 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
python如何随机生成高强度密码
2020/08/19 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
企业后勤岗位职责
2014/02/28 职场文书
干部选拔任用方案
2014/05/26 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
辩护词范文大全
2015/05/21 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
海弦WR-800F
2022/04/05 无线电
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL