#「富文本编辑器」图片拖拽缩放
预计阅读时间: 2 分钟#需求：
根据业务要求，需要能够上传图片，且上传的图片能在移动端中占满屏幕宽度，故需要能等比缩放上传的图片，还需要能拖拽、缩放、改变图片大小。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了wangEditor 富文本编辑器。
最初使用的是vue2Editor 富文本编辑器，vue2Editor本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助 Quill.js 来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果不是很理想。
此次编辑器主要是上传的富文本需要在移动端进行展示，为了达到理想效果，需要能修改图片百分比，当设置 img 标签 的 width 属性 为 100% 时，就可以满足需求。最近发新版本（第四版 v4）的 wangEditor 可以满足需求，最终选择了它用于实际开发中。
#效果图：
#代码案例及相关配置如下：
- 安装插件
npm
yarn
pnpm
bun
1npm install wangeditor -S- 编辑器配置
示例代码
1<template>
2 <div class="w_editor">
3 <!-- 富文本编辑器 -->
4 <div id="w_view"></div>
5 </div>
6</template>
7
8<script>
9// 引入富文本
10import WE from "wangeditor";
11// 引入elementUI Message模块（用于提示信息）
12import { Message } from "element-ui";
13
14export default {
15 name: "WEditor",
16 props: {
17 // 默认值
18 defaultText: { type: String, default: "" },
19 // 富文本更新的值
20 richText: { type: String, default: "" }
21 },
22 data() {
23 return {
24 // 编辑器实例
25 editor: null,
26 // 富文本菜单选项配置
27 menuItem: [
28 "head",
29 "bold",
30 "fontSize",
31 "fontName",
32 "italic",
33 "underline",
34 "indent",
35 "lineHeight",
36 "foreColor",
37 "backColor",
38 "link",
39 "list",
40 "justify",
41 "image",
42 "video"
43 ]
44 };
45 },
46 watch: {
47 // 监听默认值
48 defaultText(nv, ov) {
49 if (nv != "") {
50 this.editor.txt.html(nv);
51 this.$emit("update:rich-text", nv);
52 }
53 }
54 },
55 mounted() {
56 this.initEditor();
57 },
58 methods: {
59 // 初始化编辑器
60 initEditor() {
61 // 获取编辑器dom节点
62 const editor = new WE("#w_view");
63 // 配置编辑器
64 editor.config.showLinkImg = false; /* 隐藏插入网络图片的功能 */
65 editor.config.onchangeTimeout = 400; /* 配置触发 onchange 的时间频率，默认为 200ms */
66 editor.config.uploadImgMaxLength = 1; /* 限制一次最多能传几张图片 */
67 // editor.config.showFullScreen = false; /* 配置全屏功能按钮是否展示 */
68 editor.config.menus = [...this.menuItem]; /* 自定义系统菜单 */
69 // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;
70 editor.config.customAlert = err => {
71 Message.error(err);
72 };
73 // 监控变化，同步更新数据
74 editor.config.onchange = newHtml => {
75 // 异步更新组件富文本值的变化
76 this.$emit("update:rich-text", newHtml);
77 };
78 // 自定义上传图片
79 editor.config.customUploadImg = (resultFiles, insertImgFn) => {
80 /**
81 * resultFiles：图片上传文件流
82 * insertImgFn：插入图片到富文本
83 * 返回结果为生成的图片URL地址
84 * */
85 // 此方法为自己封赚改写的阿里云图片OSS直传插件。
86 this.$oss(resultFiles[0], resultFiles[0]["name"]).then(url => {
87 !!url && insertImgFn(url); /* oss图片上传，将图片插入到编辑器中 */
88 });
89 };
90 // 创建编辑器
91 editor.create();
92 this.editor = editor;
93 }
94 },
95 beforeDestroy() {
96 // 销毁编辑器
97 this.editor.destroy();
98 this.editor = null;
99 }
100};
101</script>参考文档
具体参数配置请参考编辑器文档使用说明「👈 点击访问」。
#组件中使用抽离的编辑器：
示例代码
1<template>
2 <div class="editor">
3 <el-card shadow="never">
4 <div slot="header" class="clearfix">
5 <span>富文本编辑器</span>
6 </div>
7 <div class="card_center">
8 <WEditor :defaultText="defaultText" :richText.sync="richText" />
9 </div>
10 </el-card>
11 </div>
12</template>
13
14<script>
15// 引入封装好的编辑器
16import WEditor from "@/components/WEditor";
17
18export default {
19 name: "Editor",
20 components: { WEditor },
21 data() {
22 return {
23 // 默认值
24 defaultText: "",
25 // 富文本更新的值
26 richText: ""
27 };
28 },
29 created() {
30 // 等待组件加载完毕赋值
31 this.$nextTick(() => {
32 this.defaultText = `<p style="text-align: center; "><img src="https://img.zcool.cn/community/01d89d556899f60000012716e4364f.jpg" width="30%" style="text-align: center; max-width: 100%;"></p>`;
33 });
34 }
35};
36</script>目 录