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

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

需求：

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

效果图：

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

安装插件

npm i wangeditor --save
// or
yarn add wangeditor

编辑器配置

<template>
<div class="w_editor">
<!-- 富文本编辑器 -->
<div id='w_view'></div>
</div>
</template>

<script>
// 引入富文(wen)本
import WE from "wangeditor";
// 引入elementUI Message模块（用于提(ti)示信息）
import { Message } from "element-ui";

export default {
name: "WEditor",
props: {
// 默认值
defaultText: { type: String, default: "" },
// 富文本更(geng)新的值
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: {
// 监听默认(ren)值
defaultText(nv, ov) {
if (nv != "") {
this.editor.txt.html(nv);
this.$emit("update:rich-text", nv);
}
}
},
mounted() {
this.initEditor();
},
methods: {
// 初始化编辑器
initEditor() {
// 获取编辑器dom节(jie)点
const editor = new WE("#w_view");
// 配置编辑器(qi)
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 => {
// 异步更新组件富文(wen)本值的变化
this.$emit("update:rich-text", newHtml);
};
// 自定义上(shang)传图片
editor.config.customUploadImg = (resultFiles, insertImgFn) => {
/**
* resultFiles：图片(pian)上传文件流
* insertImgFn：插入图片到富文本
* 返回结果为生成的图片URL地址
* */
// 此(ci)方法为自己封赚改写的阿里云图片OSS直(zhi)传插件。
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>

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

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

<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>
// 引入封装(zhuang)好的编辑器
import WEditor from "@/components/WEditor";

export default {
name: "Editor",
components: { WEditor },
data() {
return {
// 默认(ren)值
defaultText: "",
// 富文本更新(xin)的值
richText: ""
};
},
created() {
// 等待组件加载完毕赋值
this.$nextTick(() => {
this.defaultText = `<p style="text-align: center; "><img src=https://a5img.pncdn.cn/2021/0310/1615366398251.pngwidth="30%" style='text-align: center; max-width: 100%;'></p>`;
});
}
};
</script>

以上就是vue集成一个支持图片缩放拖拽的富文本编辑器的详细内容，更多关于vue 富文本编辑器的资(zi)料请关注脚本之(zhi)家其它相关文(wen)章！

链接：https://www.jb51.net/article/205012.htm