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

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

时间:2023-11-28 11:03:50浏览次数:33  
标签:返回 截图 CKEditor 上传 粘贴 图片

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

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

记录下,欢迎交流。

1.下载CKEditor 包。

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

 

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

2.初始化CKEditor。

html:

注意ID

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

 

js:

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

 

3.配置config。

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

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

 

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

使用 CKEditor 上传图片, 粘贴屏幕截图_保存图片_05

 

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

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

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

 

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

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

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

 

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

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

 

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

使用 CKEditor 上传图片, 粘贴屏幕截图_保存图片_09

 

因为要返回一个匿名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"  }

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

 

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

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

 

使用 CKEditor 上传图片, 粘贴屏幕截图_保存图片_12

 

最后editor的存取值:

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

 

使用 CKEditor 上传图片, 粘贴屏幕截图_保存图片_14

 

 

参考文章:http://blog.ncmem.com/wordpress/2023/11/02/使用-ckeditor-上传图片,-粘贴屏幕截图/


标签:返回,截图,CKEditor,上传,粘贴,图片
From: https://blog.51cto.com/u_14023400/8597147

相关文章

  • CKEDITOR图片上传实现详细步骤
    CKEditor的编辑器工具栏中有一项“图片域”,该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传。  “预览”中有一大堆鸟语,看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”就能找到这段鸟语了,(b.config.image......
  • NX二次开发 截图、向excel表格中插入图片 UF_DISP_create_framed_image
    简介:    NX二次开发截图、向excel表格中插入图片UF_DISP_create_framed_image截图:UF_DISP_create_framed_image插入图片intid=book->addPicture(L"F:\\ActionButton\\post_temp.bmp");sheet->setPicture(10,11,id);me.hpp内容:文章作者:里海......
  • vue前端截图
    <template><divclass="bigbox"> <divclass="box"ref="imageTest"> <divclass="boxTop"> 13653197159邀请您注册 <spanstyle="color:#5FFFB7;">金猫矿池</span> </div>......
  • mac下,利用chrome浏览器长截图(滚动截图)
    1、打开需要截图的网页,随便选一个,然后「右键」「检查」,如下图。 2、点击「检查」,出现控制台窗口后,按「command+shift+p」键,如下图所示。 3、在「Run」的后面,输入「capturefullsizescreenshot」,或者单独输入某个单词,也能在列表中找到,如下图。4、点击之后,就可以完......
  • 14:苏格拉底问答、实践过程截图、遇到问题解决问题截图,代码链接、
    ......
  • 苏格拉底问答、实践过程截图、遇到问题解决问题截图,代码链接
    include<stdio.h>include<stdlib.h>include<sys/types.h>include<sys/socket.h>include<netinet/in.h>include<arpa/inet.h>include<time.h>include<string.h>include<unistd.h>defineMAXLINE256......
  • Airtest结合Poco对控件实施精准截图,学起来!
    此文章来源于项目官方公众号:“AirtestProject”版权声明:允许转载,但转载必须保留原链接;请勿用作商业或者非法用途1.前言最近在Q群内发现有个小伙伴提出了一个很有趣的脚本需求,想要实现“通过选择器获取到了控件,然后截图这个控件范围”,根据我们的Airtest的局部截图接口以及poco......
  • Tainted canvases may not be exported,视频帧截图跨域
    做原生相机拍照的时候遇见的有趣问题,视频流是上传到云服务器的在线链接,赋值到video的src上,然后使用canvas的drawImg方法去截取视频帧做照片,结果canvas报错视频跨域。解决方案:<videocrossorigin="anonymous"src="在线地址"ref="video"id="video"class="video"autoplay></v......
  • DX后台截图C++实现代码
    DX后台截图C++实现代码文章仅发布于https://www.cnblogs.com/Icys/p/DXGI.html和知乎上。传统的GDIAPI(BitBlt)虽然可以完美的完成后台截图的任务,但是归根结底效率还是太低。直接使用DXGI方法截图只能完成前台窗口的截图,而DXHOOK的截图方法平添风险,以及很多场景不现实。......
  • 建设招商农业邮政工商一体化模拟器,回执单转账余额截图都可以,JAVA模拟代码!
    闲着用JAVA研究了一个模拟器,但是我加了水印的,这个你做不了啥坏事,主要就是学习一下我写的代码和代码的实现逻辑,包括“主类和模块”还有“截图生成模块”以及“信息的输入和处理”三大模块,说复杂不复杂,说简单也不简单,下面框架图是网上找的,需要和代码相互结合才能实现具体的效果。UI......