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

文章主要介绍了vue集成一个支持图片缩放拖拽的富文本编辑器，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下  

需求：  

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

效果图：  

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

安装插件  

npmiwangeditor--save  

//or  

yarnaddwangeditor  

编辑器配置  

<template>  

<divclass="w_editor">  

<!--富文本编辑器-->  

<divid="w_view"></div>  

</div>  

</template>  

<script>  

//引入富文本  

importWEfrom"wangeditor";  

//引入elementUIMessage模块（用于提示信息）  

import{Message}from"element-ui";  

exportdefault{  

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节点  

consteditor=newWE("#w_view");  

//配置编辑器  

editor.config.showlinkImg=false;  

editor.config.onchangeTimeout=400;  

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)=>{  

  

//此方法为自己封赚改写的阿里云图片OSS直传插件。  

this.$oss(resultFiles[0],resultFiles[0]["name"]).then(url=>{  

!!url&&insertImgFn(url);  

});  

};  

//创建编辑器  

editor.create();  

this.editor=editor;  

}  

},  

beforeDestroy(){  

//销毁编辑器  

this.editor.destroy();  

this.editor=null;  

}  

};  

</script>  

注：具体参数配置请参考编辑器文档使用说明。  

组件中使用抽离的编辑器：  

<template>  

<divclass="editor">  

<el-cardshadow="never">  

<divslot="header"class="clearfix">  

<span>富文本编辑器</span>  

</div>  

<divclass="card_center">  

<WEditor:defaultText="defaultText":richText.sync="richText"/>  

</div>  

</el-card>  

</div>  

</template>  

<script>  

//引入封装好的编辑器  

importWEditorfrom"@/components/WEditor";  

exportdefault{  

name:"Editor",  

components:{WEditor},  

data(){  

return{  

//默认值  

defaultText:"",  

//富文本更新的值  

richText:""  

};  

},  

created(){  

//等待组件加载完毕赋值  

this.$nextTick(()=>{  

this.defaultText=`<pstyle="text-align:center;"><imgsrc=https://a5img.pncdn.cn/2021/0310/1615366398251.pngwidth="30%"style="text-align:center;max-width:100%;"></p>`;  

});  

}  

};  

</script>  

以上就是vue集成一个支持图片缩放拖拽的富文本编辑器的详细内容