需求：
根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方 富文本编辑器 ，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了 wangEditor富文本编辑器 。 最初使用的是 vue2Editor富文本编辑器 ， vue 2Editor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助Quill.js来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果不是很理想。 此次编辑器主要是上传的富文本需要在移动端进行展示，为了达到理想效果，需要能修改图片百分比，当设置img标签的width属性为100% 时，就可以满足需求。最近发新版本（第四版 v4）的wangEditor可以满足需求，最终选择了它用于实际开发中。
效果图：
代码案例及相关配置如下：
安装插件
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 富文本编辑器的资料请关注服务器之家其它相关文章！
原文链接：https://juejin.cn/post/6922365402106462216
查看更多关于vue集成一个支持图片缩放拖拽的富文本编辑器的详细内容...