首页 > 其他分享 >使用 CKEditor 上传图片, 粘贴屏幕截图

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

时间:2023-11-02 13:57:31浏览次数:31  
标签:返回 截图 CKEditor e5% 粘贴 图片

之前写过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的存取值:

 

 

 

参考文章:http://blog.ncmem.com/wordpress/2023/11/02/%e4%bd%bf%e7%94%a8-ckeditor-%e4%b8%8a%e4%bc%a0%e5%9b%be%e7%89%87%ef%bc%8c-%e7%b2%98%e8%b4%b4%e5%b1%8f%e5%b9%95%e6%88%aa%e5%9b%be/

欢迎入群一起讨论

 

 

标签:返回,截图,CKEditor,e5%,粘贴,图片
From: https://www.cnblogs.com/songsu/p/17805207.html

相关文章

  • ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
    项目开发需要用到在线编辑和图片上传,最终讨论使用ckeditor,原因就是其丰富的API。考虑到最新版本ckeditor5可能不够稳定,我们选择使用ckedtior4.9.2版本。官网链接:ckeditor官网特别注意:下面截图中url中的/editor/upload/1?其中的/1是根据自己需求添加不同类型数据上传时候的区分,......
  • openlayers截图之图片跨域问题
    openlayers截图之图片跨域问题报错: Errorinv-onhandler:"SecurityError:Failedtoexecute'toBlob'on'HTMLCanvasElement':Taintedcanvasesmaynotbeexported." 原因:引用图片资源如果跨域会污染canvas,导致canvas的toBlob、 toDataURL()、getImageData()方法......
  • Windows与UOS虚拟机实现互相复制粘贴文本及文件
    往期文章:麒麟KYLINOS2303版本上使用KDE桌面共享软件hello,大家好啊,今天给大家带来一篇在VMwareworkstation17Pro上安装UOS虚拟机后实现互相复制粘贴文本及文件的文章,主要通过open-vm-tools-desktop软件实现,当我们安装完UOS1060虚拟机后,想要复制里面的内容到Windows上的时候,会发......
  • 银行贷款截图生成器,易语言写的
    这是界面:下面是程序集截图:.版本2.程序集窗口程序集_启动窗口.子程序_按钮1_被单击标签1.标题=编辑框1.内容标签2.标题=编辑框2.内容标签3.标题=编辑框3.内容标签4.标题=编辑框4.内容标签5.标题=编辑框5.内容标签1.可视=真标签2.可视=真标签3.可视=真......
  • e4a开发的一款银行转账截图生成器,提供源码下载
    这个APP其实没什么意义,就是为了装逼和娱乐使用,但是这个只有一个功能就是能生成虚拟的转账截图,这个图你还能通过自己手机的截图功能去截图,保证电量和时间的实时性,软件生成的图片是固定的图片模版,提前用PS文件改好了Logo和图标信息,然后在加入到软件,设置编辑框内容启动对应的世间改变......
  • 第四章苏格拉底问答、实践过程截图、遇到问题解决问题截图,代码链接
    代码#include<stdio.h>#include<stdlib.h>#include<pthread.h>#defineN4intA[N][N],sum[N];void*func(voidarg){intj,row;pthread_ttid=pthread_self();row=(int)arg;printf("Thread%d[%lu]computessumofrow%d\n"......
  • Python自动化测试selenium指定截图文件名方法
    这篇文章主要介绍了Python自动化测试selenium指定截图文件名方法,Selenium支持Web浏览器的自动化,它提供一套测试函数,用于支持Web自动化测试,下文基于python实现指定截图文件名方法,需要的小伙伴可以参考一下前言:Selenium支持Web浏览器的自动化,它提供一套测试函数,用于支持W......
  • oCam 录屏截图软件使用教程
    功能特点:支持视频录制支持音频录制支持屏幕截图支持内置视频编码(AVI,MP4,FLV,MOV,TS,VOB)支持音频编码支持使用外部编码器屏幕录像支持录制超过4GB体积的视频格式支持录制系统音频可以调整音频录制的质量截屏格式支持(JPEG,GIF,PNG,BMP)支持区域录制以及......
  • 解决VirtualBox虚拟机与主机之间无法复制粘贴的问题
    目录1、开启共享粘贴板和拖放功能2、勾选使用主机IO缓存3、勾选*.vdi为固态驱动器4、安装virtualBox增强功能(重要)5、附加步骤1、开启共享粘贴板和拖放功能首先确保虚拟机系统关闭即没有运行,接着在虚拟机软件VirtualBox选择对应设置的虚拟机系统,然后右侧点击设置(Settings)......
  • [粘贴]github-redis-rdb-cli
    redis-rdb-cliAtoolthatcanparse,filter,split,mergerdbandanalyzememoryusageoffline.Itcanalsosync2redisdataandallowuserdefinethereownsinkservicetomigrateredisdatatosomewhere.  ChatwithauthorContracttheauthorBinaryreleas......