使用ckeditor上传图片,粘贴屏幕截图

肖恩部落 肖恩部落     2022-09-01     317

关键词:

 

2017.08.16更新:园友没有找到相关插件,先将整个CKEditor的包上传至百度云,

链接: https://pan.baidu.com/s/1bpaqwIr 密码: tibx

 

之前写过wangEditor,那真是好用,文档也清晰,半天就搞定了,无奈没有对应license,只好选择别的。

 

外语一般,阅读理解都靠蒙。CKEditor官方文档看的我云里雾里,国内的博客比较少,经过一天的调试,终于成功了。

 

记录下,欢迎交流。

 

1.下载CKEditor 包。

打开 samples 文件夹下的 index.html,确认ckeditor资源没有丢失。

 

2.初始化CKEditor。

html:

注意ID

js:

3.配置config。

打开CKEditor文件夹下的config.js,基本菜单配置:

添加插件,以支持图片上传和粘贴截图:

第一行语句:添加三个插件,imagepaste,uploadimage,image2(如何对应不清楚,但这么做成功了,如果园友知晓请赐教。),这些插件添加到CKEditor下的plugins下,提供依赖。

第二行语句:浏览本地图片上传时调用后台服务方法名称。这个参数也是网上看到的,回调函数会使用这个参数。

这里做保存图片的操作,但是要返回图片存储地址,即url。

返回类型是 void,但是要写一条response:

第三行语句:粘贴截图时调用后台服务的方法。

返回类型是string,官网上要求返回一个 json格式。http://docs.ckeditor.com/#!/guide/dev_file_upload  正确的和错误的:

因为要返回一个匿名json,我定义了好多结果都格式错误,硬生生拼接一个:

string jsonResult = "{\"uploaded\" : uploadedNum, \"fileName\" : \"fileNameStr\", \"url\":\"urlStr\" , \"error\" : { \"message\":\"errorMsg\" } }";

同理保存图片,返回json。

{"uploaded" : 1, "fileName" : "image.png", "url":"http://localhost:15593/UploadImages/RickEditorFiles/Content/2017-05-23 10_39_54.png"  }

如果返回值出错,editor会抛出异常,undefined type。

 

 最后editor的存取值:

 

 

 

ckeditor在iechrome下无法粘贴图片

在ff下ckeditor控件可以用QQ切图ctrl+alt+a切图,然后copy到ckeditor富文本框中(是base64文件),但是copy到ie与chrome浏览器下就不能copy成功,很是纳闷,求正解。我想问的是,ckeditor相关技术,怎么解决这个问题,不是切图的问题。最... 查看详情

ckeditor粘贴图片上传功能

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

如何删除使用 django-ckeditor 上传的图像?

】如何删除使用django-ckeditor上传的图像?【英文标题】:Howtoremoveimagesuploadedwithdjango-ckeditor?【发布时间】:2014-11-2919:53:44【问题描述】:我已经在Django管理界面的CKEditor中上传了一些图像。我可以通过单击编辑器中的“图像”按... 查看详情

网页截图粘贴上传

...接截图然后粘贴在编辑框中。然后提交。在开发前端时我使用的uikit,但uikit里面的htmleditor插件对图片上传支持太差,仅仅好放弃。又去看了其它网页编辑控件,但发现这些控件处理图片的方式都是选择网络上图片或者从本地上... 查看详情

在jsp中使用ckeditor时无法显示从word中粘贴过来的图片,

请问各位大虾:在jsp中使用ckeditor时无法显示从word中粘贴过来的图片,有什么方法呢?谢谢~~~参考技术Afckeditor吧?这个编辑器要先上传到服务器,然后读取服务器中图片的路径才可以。你直接粘肯定不行了。本回答被提问者采... 查看详情

ckeditor4.6粘贴图片转换为base64

参考技术A以下为粘贴上传配置 查看详情

ckeditor粘贴有图片不显示

使用ckeditor粘贴word文档,应为文档里面有图片,图片不显示。怎么让它显示出来?参考技术A可以用图片导入的方式你的图片先保存到JPG然后在word选择添加剪贴画-选择来自文件找到你的图片就得了 查看详情

ckeditor无法上传图片

】ckeditor无法上传图片【英文标题】:Can\'tuploadimageinckeditor【发布时间】:2020-11-2709:28:46【问题描述】:我正在使用CKEDITOR5,并希望能够允许用户上传图像。我正在使用官方网站上描述的自定义上传适配器,但我不能使用XMLHttpReq... 查看详情

CKEditor, 图片上传 (filebrowserUploadUrl)

】CKEditor,图片上传(filebrowserUploadUrl)【英文标题】:CKEditor,ImageUpload(filebrowserUploadUrl)【发布时间】:2011-01-0802:07:28【问题描述】:我正在使用CKEditor,并希望能够允许用户在文本编辑器中上传和嵌入图像...以下JS是加载CKEditor的内... 查看详情

CKEditor 图片上传

】CKEditor图片上传【英文标题】:CKEditorImageUpload【发布时间】:2010-11-3011:33:59【问题描述】:我希望将CKEditor包含在我正在处理的项目中,并且我需要CKFinder插件提供的图像上传支持,但是我并不特别需要CKFinder工具的其余部分,... 查看详情

CKEditor 和 C# Web API,使用简单的上传插件上传图片

】CKEditor和C#WebAPI,使用简单的上传插件上传图片【英文标题】:CKEditorandC#WebAPI,uploadimagewithsimpleuploadplugin【发布时间】:2021-12-0112:44:27【问题描述】:在我的项目中,我使用CKEditorWYSWYG包为我的网站制作HTML内容。可以插入图片并... 查看详情

django-ckeditor 上传的图片的绝对路径

】django-ckeditor上传的图片的绝对路径【英文标题】:Absolutepathsonimagesuploadedbydjango-ckeditor【发布时间】:2020-08-0302:32:18【问题描述】:我将django-rest-framework与django-ckeditor结合使用。我正在使用绝对url-s提供一些图像,没有任何问题... 查看详情

如何在 selenium 中截取屏幕截图并粘贴为 HTML 页面?

...布时间】:2022-01-2318:40:23【问题描述】:我知道我们可以使用Selenium截取屏幕截图。但是是否可以将屏幕截图保存为HTML页面?有人可以帮忙吗?【问题讨论】:“保存截图”是什么意思?您想创建一个包含图像的HTML页面吗?或... 查看详情

批量上传ios应用程序截图的实用技巧

...者们,现在有一个工具可以帮助你批量上传,方便快捷。使用AppUploader工具可以快速简便地上传应用程序屏幕截图。你只需要创建截图图像并替换模板文件夹,然后AppUploader可以一次性上传所有截图。模板文件夹是在AppUploader中选... 查看详情

错误:仍在上传屏幕截图。关于 Apple App 提交

】错误:仍在上传屏幕截图。关于AppleApp提交【英文标题】:Error:Therearestillscreenshotuploadsinprogress.OnAppleAppSubmission【发布时间】:2021-04-2419:33:42【问题描述】:首先我为iPhone上传图片5.5英寸显示屏和iPadPro(第二代)12.9"显示截图图... 查看详情

Django-CKEditor 图片上传

】Django-CKEditor图片上传【英文标题】:Django-CKEditorImageUpload【发布时间】:2013-06-0517:38:48【问题描述】:我目前已经安装了Django-CKEditor并拥有自己的自定义工具栏。我正在努力寻找如何启用图片上传。单击图像按钮时,我只能通... 查看详情

ckeditor-ckfinder 上传图片的默认属性(宽度和高度)

】ckeditor-ckfinder上传图片的默认属性(宽度和高度)【英文标题】:ckeditor-ckfinderdefaultattributes(widthandheight)touploadedimages【发布时间】:2010-06-1523:00:11【问题描述】:当我在ckeditor中使用ckfinder上传图像时,图像使用css宽度和高度很... 查看详情

如何进行 CKEditor 5 图片上传?

】如何进行CKEditor5图片上传?【英文标题】:HowtodoCKEditor5ImageUploading?【发布时间】:2018-08-2908:39:07【问题描述】:ClassicEditor.create(editorElement,ckfinder:uploadUrl:\'my_server_url\').then(...).catch(...);我的服务器响应应该是什么?我在后端使... 查看详情