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解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue router 动态路由清除方式
May 25 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
javascript与webservice的通信实现代码
2010/12/25 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
javascript编写简易计算器
2017/05/06 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python通过socket查询whois的方法
2015/07/18 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Django组件content-type使用方法详解
2019/07/19 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
小学英语教学反思案例
2014/02/04 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
公司晚会主持词
2019/04/17 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript