wangeditor vue 图片上传并返回结果,但图片插入错误时触发

第一步:npm i wangeditor --save
第二步:import E from 'wangeditor';
第三步:` mounted(){
this.editor = new E(’#div1’);
this.editor.config.showLinkImg = false;
this.editor.config.uploadImgServer = ‘上传图片的url’ // 配置上传图片的接口
this.editor.config.uploadImgHooks = {
before: function(xhr) {
console.log(xhr)
// 可阻止图片上传
return {
prevent: true,
msg: ‘需要提示给用户的错误信息’
}
},
success: function (xhr, editor, result) {
console.log(‘成功’)
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
console.log(result)
console.log(‘失败1’)
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
error: function (xhr, editor) {
console.log(‘错误1’)
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
// 上传图片超时
timeout: function(xhr) {
console.log(‘timeout’)
},
// 返回的图片不能直接使用时,在这里重写
customInsert: function(insertImgFn, result) {
// result 即服务端返回的接口
console.log(‘customInsert’, result)

            // insertImgFn 可把图片插入到编辑器,传入图片 src ,执行函数即可
            var tempImg = '你的图片地址'
            insertImgFn(tempImg)
        }
    }
    this.editor.create(); // 创建富文本
},`
附:仔细看api上面都有,有疑问欢迎留言,大家一起讨论
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于wangeditor vue粘贴图片的问题,你可以按照以下步骤来实现: 1. 首先,确保已经安装了wangeditor vue插件,可以通过npm或yarn进行安装。 2. 在你的Vue组件中导入wangeditorwangeditor的样式文件: ```javascript import 'wangeditor/dist/css/wangEditor.css'; import { createEditor } from 'wangeditor'; ``` 3. 在Vue组件的mounted钩子函数中初始化wangeditor编辑器: ```javascript mounted() { const editor = createEditor(this.$refs.editor); editor.config.uploadImgServer = '/your-upload-img-server'; // 设置图片上传的服务器地址 editor.config.uploadImgHeaders = { 'Authorization': 'Bearer ' + localStorage.getItem('token') // 设置图片上传的请求头 }; editor.config.uploadImgHooks = { before: (xhr, editor, files) => { // 在上传图片之前执行的逻辑,可以进行一些校验或者预处理操作 }, success: (xhr, editor, result) => { // 图片上传成功后的回调函数 }, fail: (xhr, editor, error) => { // 图片上传失败后的回调函数 }, error: (xhr, editor) => { // 图片上传出错的回调函数 }, timeout: (xhr, editor) => { // 图片上传的回调函数 }, customInsert: (insertImgFn, result, editor) => { // 自定义插入图片的方式,可以根据result中的图片url来自定义插入图片的逻辑 // 示例代码: const url = result.data.url; insertImgFn(url); } }; editor.create(); } ``` 4. 在Vue模板中添加一个容器元素来显示wangeditor编辑器: ```html <template> <div> <div ref="editor"></div> </div> </template> ``` 注意:上述代码中的`/your-upload-img-server`需要替换为你自己的图片上传服务器地址,同你还需要根据实际情况进行配置和处理上传图片的逻辑。 通过以上步骤,你就可以在wangeditor vue中实现粘贴图片的功能了。希望对你有所帮助!如有其他问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值