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 03 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue详细的入门笔记
May 10 Vue.js
详解Vue的options
May 15 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
JSON 数据格式介绍
2012/01/13 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
React Native时间转换格式工具类分享
2017/10/24 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
JS实现简易图片自动轮播
2020/10/16 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
利用Python实现Windows定时关机功能
2017/03/21 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python列表(List)知识点总结
2019/02/18 Python
浅析python内置模块collections
2019/11/15 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
C语言面试题
2015/10/30 面试题
找工作最新求职信
2013/12/22 职场文书
化学教师自荐信范文
2013/12/28 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
2014年公司工作总结
2014/11/22 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
班级班风口号大全
2015/12/25 职场文书
如何书写授权委托书?
2019/06/25 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python