wangEditor customBrowseAndUpload自定义选择图片

如果你不想使用 wangEditor 自带的选择文件功能,例如你有自己的图床,或者图片选择器。
可以通过 customBrowseAndUpload 来自己实现选择图片、上传图片,并插入图片。

 以下是官方的使用方法,但是获取图片与url这一系列操作都还是需要在这里面进行操作,这个与

customUpload

 他的区别就是可以自定义点击事件,弹出自己的图床等。

    // 自定义选择图片
    customBrowseAndUpload(insertFn: InsertFnType) {   // TS 语法
    // customBrowseAndUpload(insertFn) {              // JS 语法
        // 自己选择文件
        // 自己上传文件,并得到图片 url alt href
        // 最后插入图片
        insertFn(url, alt, href)
    }

 若想插入图片就需要用到另外一个api

insertNode

以下是官方的参考代码,即模糊又清晰的

const node = { type: 'paragraph', children: [{ text: 'simple text' }] }// 需要相关的参数
editor.insertNode(node) // 需要获取节点

### WangEditor 自定义图片上传实现方法 在 WangEditor 中实现自定义图片上传功能可以通过配置 `customUploadImg` 属性来完成。此属性允许开发者指定一个用于处理图片上传逻辑的函数,在该函数内可以调用接口将图片发送至服务器并最终通过回调函数把返回的结果插入到编辑器中。 对于 Vue 项目而言,可以在初始化编辑器实例前设置上述提到的配置项: ```javascript import { Editor, Toolbar } from '@wangeditor/editor-for-vue'; // 定义上传图片的方法 const customUploadImage = async (resultFiles, insertFn) => { const formData = new FormData(); // 假设只上传单张图片的情况 formData.append('file', resultFiles[0]); try { let res = await axios.post('/api/upload/image', formData); if(res.data.code === 200){ // 成功后调用insertFn() 将url 插入到编辑区 insertFn([res.data.url]); } } catch(error){ console.error("Failed to upload image", error); } }; export default { components: { Editor, Toolbar }, data(){ return{ editorConfig:{ placeholder:'请输入内容...', // 设置自定义上传图片的方式 customUploadImg:[customUploadImage], }, html:'', }; }, }; ``` 这段代码展示了如何利用 Axios 库向特定 API 发送 POST 请求以提交表单数据形式的文件对象,并依据响应结果执行相应的操作[^1]。 当涉及到更复杂的场景比如多图上传或是需要额外参数时,则可以根据实际需求调整 `formData` 的构建方式以及请求的具体细节部分。 另外值得注意的是,为了确保良好的用户体验,在开发过程中还应该考虑加入进度条显示、错误提示等功能模块以便更好地反馈给用户当前的操作状态。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值