wangEditor3 调用customUpload自定义上传图片成功以后,设置图片的宽高
时间: 2024-12-20 19:19:12 浏览: 28
WangEditor3是一个富文本编辑器,它支持通过`customUpload`自定义上传图片功能。当图片上传成功后,你可以通过编辑器提供的API来操作插入的图片,包括设置其宽度和高度。
首先,确保你在插件配置中设置了`customUpload`回调函数,这个函数通常会返回一个Promise,解决后包含图片信息,例如URL和原始尺寸。这里假设你已经有了图片的URL `imgUrl` 和原始大小信息 `originalSize`:
```javascript
editor.customUpload.then(response => {
const imgEle = editor.insertImg({
src: imgUrl,
title: '图片标题', // 可选,图片描述
});
// 获取图片节点
const imgNode = imgEle.find('img');
// 根据需要设置宽高,比如设置为原图的50%
const width = originalSize.width * 0.5;
const height = originalSize.height * 0.5;
imgNode.attr('width', width);
imgNode.attr('height', height); // 设置图片宽高
// 如果你想动态调整而不是直接设定固定值,可以监听浏览器窗口大小改变事件
window.addEventListener('resize', () => {
imgNode.attr('width', imgNode.width());
imgNode.attr('height', imgNode.height());
});
});
```
记得在实际使用时替换上述示例中的变量名,并确保在编辑器实例化并初始化完毕后再调用这些操作。
阅读全文