文章主要介绍了vue集成一个支持图片缩放拖拽的富文本编辑器，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
需求：
根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了wangEdiTor富文本编辑器。 最初使用的是vue2EdiTor富文本编辑器，vue2EdiTor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助Quill.js来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果不是很理想。 此次编辑器主要是上传的富文本需要在移动端进行展示，为了达到理想效果，需要能修改图片百分比，当设置iMg标签的width属性为100% 时，就可以满足需求。最近发新版本（第四版 v4）的wangEdiTor可以满足需求，最终选择了它用于实际开发中。
效果图：
代码案例及相关配置如下：
安装插件
NPM i wangediTor –save
或
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 &aMp;&aMp; 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” />
&
