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

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

时间: 2024-10-10 10:25:14

使用 CKEditor 上传图片, 粘贴屏幕截图的相关文章

CKeditor上传图片的实现

原文:CKeditor上传图片的实现 源代码下载地址:http://www.zuidaima.com/share/1551734815624192.htm CKeditor上传图片的实现.很简单的一个例子.貌似是大二的时候写的吧- 浏览已上传的图片 选择已上传的图片 项目截图 java build path需要设置为自己的jdk

CKEditor上传图片—配置CKFinder(from www.sysoft.cc www.sysoft.net.cn)

CKEditor上传图片—配置CKFinder在网站开发中,如果有发布类似新闻的图文混排需求时,CKEditor不失为一个很好的选择,下载地址如下: http://ckeditor.com/download 它的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码,还有一种方法是使用CKFinder,下载地址如下: http://ckfinder.com/download 下面详细描述一下使用它们的时候如何配置. CKEditor我下载的是

ckeditor上传图片

ckeditor版本4.4.7 CKEditor的编辑器工具栏中有一项"图片域",该工具可以贴上图片地址来在文本编辑器中加入图片,但是没有图片上传功能. 去掉预览中的英文 ,在ckeditor/config.js中加上一个配置项: config.image_previewText = ' '; 注意引号里面一定要有个空格,不能是空字符串. 图片上传实现 第一步: 要开启图片上传功能. 找到ckeditor/plugins/image/dialogs/image.js这个文件,CTRL+

【CKeditor】使用SpringMVC处理CKeditor上传图片

0.了解CKeditor的相关文件 1.开启CKeditor上传图片功能 官方说明 简明的说,就是只需要在创建CKeditor时,添加以下两个配置: 在用CKEDITOR.replace()中配置 filebrowserBrowseUrl: '自定义的请求', filebrowserUploadUrl: '自定义的请求' 或,在config.js添加如下配置 config.filebrowserBrowseUrl='自定义的请求', config.filebrowserUploadUrl='自定

Ckeditor 中粘贴图片

我们在ckeditor 中有上传图片,但是实际使用中这种手动上传图片方式并不是很方便,而是复制或者截图粘贴图片. 这里我们实现主要是获取对应的粘贴事件. CKEDITOR.instances["editor1"].on('instanceReady', function(e) { this.document.on("paste", function(e) { var items = e.data.$.clipboardData.items; for(var i =

CKEditor上传图片—配置CKFinder

在网站开发中,如果有发布类似新闻的图文混排需求时,CKEditor不失为一个很好的选择,下载地址如下: http://ckeditor.com/download 它的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码,还有一种方法是使用CKFinder,下载地址如下: http://ckfinder.com/download 下面详细描述一下使用它们的时候如何配置. CKEditor我下载的是3.6.4,CKFinder下载的是2.3 f

CKEditor 上传图片 MVC

1.点击上传图片,会看到如下图1,在预览中出现一段文字,在image.js中会找到该段文字,删掉即可.即可看到预览框中没有了这段文字.                    (1)                                                          (2)                                          (3) 2.好,现在准备开始添加上传功能,在“图像信息”与“链接”tab后还有一个上传Tab,同样在image.j

如何去除 ckeditor 上传图片后在原码中留下的 style="width: 100%;height:100px"之类的代码呢?

ckeditor编辑器在上传图片的时候,会神奇的加上一段诡异的代码: 这导致上传的小图也是被拉伸到100%,我根本就没有定义它,找来找去也找不到element.style,原来这是在system.css这东西 最后, 加上这句: .cnt_text .text img {width :auto !important; max-width:660px;} 就可以了,优先级的问题

记一次ckeditor上传图片到服务器问题

package com.util;import java.io.IOException; import java.io.PrintWriter; import java.util.List; import java.io.File; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import ja