ckeditor 实现ctrl+v粘贴图片并上传、word粘贴带图片

12 篇文章 0 订阅
9 篇文章 0 订阅

1、只粘贴图片并上传到服务器

https://ckeditor.com/cke4/addon/uploadimage

config.extraPlugins = 'uploadimage';
//config.uploadUrl = '上传路径';config.imageUploadUrl= '上传路径';
请求

文件上传的默认请求是一个文件,作为具有“upload”字段的表单数据。

响应:文件已成功上传

当文件成功上传时的JSON响应:

  • uploaded- 设置为1
  • fileName - 上传文件的名称。
  • url - 上传文件的URL。
响应:文件无法上传
  • uploaded- 设置为0
  • error.message - 要显示给用户的错误消息。

2、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持

目前项目是用了一种变通的方式:

先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示

(富文本显示有个坑:没找到直接给富文本赋值的方法 要先销毁 记录下

success : function(data) {
	 $('#content').attr('value',data.imagePath);
	 var editor = CKEDITOR.instances["content"]; //你的编辑器的"name"属性的值
	 if (editor) { 
	   editor.destroy(true);//销毁编辑器
	  }       
	 CKEDITOR.replace('content'); //替换编辑器,editorID为ckeditor的"id"属性的值
	 $("#content").val(result);    //对editor赋值
	 //CKEDITOR.instances.contentCkeditor.setData($("#content").text());
 }


3、官方刚发表新版本说已经添加功能:

https://ckeditor.com/blog/CKEditor-4.8-released/

找了半天也没找到具体的配置案例~~

有时间再试(有大佬搞定也请求教一下)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
要在 CKEditor实现自定义图片上传并获取返回值,需要进行以下步骤: 1. 创建一个实现了 UploadAdapter 接口的自定义上传适配器类,并在其中实现 upload() 方法。在 upload() 方法中,可以使用 AJAX 或其他方式将图片上传至服务器,并返回一个 Promise 对象,该对象的 resolve() 方法中包含一个包含图片 URL 的对象。 ```javascript class MyCustomUploadAdapter { constructor(loader) { this.loader = loader; } upload() { return this.loader.file.then(file => { return new Promise((resolve, reject) => { // 使用 AJAX 将图片上传至服务器 // 并在上传成功后调用 resolve() 方法 // 并将包含图片 URL 的对象作为参数传入 resolve({ default: 'http://example.com/image.jpg' }); }); }); } abort() { // 取消上传 } } ``` 2. 在 CKEditor 的配置文件中,使用 config.filebrowserUploadAdapter 属性将自定义上传适配器类与 CKEditor 关联起来。 ```javascript ClassicEditor.create(document.querySelector('#editor'), { // ... filebrowserUploadAdapter: MyCustomUploadAdapter }).then(editor => { console.log('Editor was initialized', editor); }).catch(error => { console.error(error.stack); }); ``` 3. 在需要使用图片的地方,使用 CKEditor 提供的图片插入功能,插入上传图片即可获取返回值。 ```javascript editor.model.change(writer => { const imageElement = writer.createElement('image', { src: 'http://example.com/image.jpg' }); editor.model.insertContent(imageElement); }); ``` 注意:在实际使用中,需要根据具体的需求和服务器端的实现来进行适配器类的编写。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值