> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.
# 富文本图片拖拽缩放
## 需求：
根据业务要求，需要能够上传图片，且上传的图片能**在移动端中占满屏幕宽度**，故需要能等比缩放上传的图片，还需要能**拖拽**、**缩放**、**改变图片大小**。尝试多个第三方富文本编辑器，很难找到一个完美符合自己要求的编辑器。经过多次尝试，最终选择了[**wangEditor 富文本编辑器**](http://www.wangeditor.com/)。
最初使用的是[**vue2Editor 富文本编辑器**](https://www.vue2editor.com/)，**vue2Editor**本身是不支持图片拖拽的，但是提供了可配置图片拖拽的方法，需要借助 **Quill.js** 来实现图片拖拽。虽然满足了业务需求，但是在移动端展示的效果不是很理想。
此次编辑器主要是上传的富文本需要在移动端进行展示，为了达到理想效果，需要能修改图片百分比，当设置 **img 标签** 的 **width 属性** 为 **100%** 时，就可以满足需求。最近发新版本（第四版 **v4**）的 **wangEditor** 可以满足需求，最终选择了它用于实际开发中。
## 效果图：
## 代码案例及相关配置如下：
```sh [npm]
npm install wangeditor -S
```
```sh [yarn]
yarn add wangeditor -S
```
```sh [pnpm]
pnpm add wangeditor -S
```
```sh [bun]
bun add wangeditor -S
```
```sh [deno]
deno add npm:wangeditor -S
```
```javascript title="代码示例"
```
:::tip 参考文档
具体参数配置请参考[**编辑器文档使用说明**](http://www.wangeditor.com/doc/)「👈 点击访问」。
:::
## 组件中使用抽离的编辑器：
```javascript title="代码示例"
```