最近使用ckeditor做上传图片的功能,做成功后在本地运行正常。部署到linux服务器之后,图片上传成功了,但是没有跳转到到预览框里去,却在原先的页面显示出这段js代码:
<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(2,'http://img.shangshangw.com/upload/commodity/20120406/201204061740421341.jpg', '');</script>
并没有执行。
我百思不得其解,后来通过火狐我发现返回的代码被转义了:
<pre><script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(2,'http://img.shangshangw.com/upload/commodity/20120406/201204061740421341.jpg', '');</script></pre>
问题虽是找到了,但一直不知如何解决,又经过几番琢磨,发现了问题,原来是在后台向前台输出脚本时,没有指定contentType格式,这样写就木有问题了:
HttpServletResponse response = ServletActionContext.getResponse();
// 设置headers参数
String fullContentType = "text/html;charset=UTF-8";
response.setContentType(fullContentType);
out = response.getWriter();
out.write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" + this.CKEditorFuncNum
+ ",'" + getUploadRootPath() + path + "/"
+ this.newImageFileNames[0] + "');</script>");
我勒个去,网上也没有相关资料,忧郁了我一个星期。分享给大家,能否给大家带来些帮助。
分享到:
相关推荐
在这个文件中,可以看到HTML和JavaScript代码,它们创建了一个CKEditor实例,并配置了图片上传的相关设置,如上传URL、请求参数等。`<script>`标签内可能包含了CKEditor的初始化代码,比如设置上传图片的URL为后端的...
- "CKEditor上传文件Servlet版本1.0"这个压缩包可能包含了CKEditor的示例配置、Servlet的Java源代码、HTML页面和可能的web.xml配置文件。解压并根据这些文件进行部署和测试。 通过以上步骤,你可以成功地在...
在实际应用中,我们还需要编写JavaScript代码来监听上传按钮的点击事件,触发上传过程,并处理服务器返回的结果,例如成功上传后的图片预览或错误提示。 总结来说,实现CKEditor中的图片和文件上传功能涉及了前端和...
以上代码仅作为示例,实际应用中可能需要进一步完善错误处理和返回结果。至此,CKEditor已经实现了本地视频和图片的上传功能。用户可以在编辑器中点击“插入图片”或“插入视频”按钮,选择本地文件,然后通过服务器...
同时,返回保存成功的消息给ckeditor,这样ckeditor就能在编辑器中插入新上传的图片的URL。 在提供的文件列表中,我们可以看到`CKEditor.NETwithSamples.sln`和`CKEditor.NET.sln`这两个解决方案文件,这表明包含了...
2. **配置插件**:在CKEditor 4的配置文件(config.js)中,设置`filebrowserVideoUploadUrl`为后端的视频上传API地址。 3. **自定义UI**:可以通过CKEditor 4的API创建一个按钮或菜单项,触发视频选择和上传操作。...
若要启用此功能,你需要在页面底部添加额外的JavaScript代码来配置CKEditor实例,并指定图片上传的URL: ```javascript CKEDITOR.replace('myText', { filebrowserImageUploadUrl: '/Home/UploadPicture' }); ```...
CKFinder的PHP connector会处理文件的上传、重命名、删除等操作,并将结果返回给CKEditor。 对于前端用户界面,CKFinder提供了一个直观的文件浏览器,用户可以在这里浏览本地文件系统,选择图片并上传。上传过程中...
2. **编写上传逻辑**:接下来,你需要编写处理图片上传的JavaScript代码。这通常涉及创建一个表单,用于选择文件,然后使用`FormData`对象和`XMLHttpRequest`进行异步提交。例如: ```javascript CKEDITOR....
在ASP.NET环境中集成CKEditor并实现图片上传功能是一项常见的需求,尤其对于内容...附带的文档“简单快捷地在ckeditor加上图片上传功能.doc”和示例代码“CKEditorWithUpload”应该能帮助你更好地理解和实施这一过程。
3. 返回上传结果,包括文件URL、状态码等信息,供CKEditor显示。 `pasteDemo`可能是演示如何在CKEditor中实现截图粘贴的示例代码。这个功能通常依赖浏览器的拖放和粘贴API,以及一些JavaScript库,如`clipboard.js`...
当用户在编辑器中选择图片并提交时,图片会被上传到服务器指定的路径,并返回图片URL显示在编辑器中。注意,为了安全考虑,可能还需要添加图片大小限制、文件类型检查以及错误处理等逻辑。 总结一下,本示例中我们...
1. **集成到项目**:将CKEditor库引入到自己的Web项目中,通过JavaScript代码进行初始化和配置。 2. **后端接口开发**:根据CKEditor的上传API设计并实现服务器端的接收、存储和返回响应的接口。 3. **安全考虑**:...
当用户在编辑器中选择插入图片时,CKEditor会调用一个服务器端的脚本来处理图片上传。在这个案例中,我们有`upimg.aspx`这个页面作为处理图片上传的核心部分。该页面通常负责接收图片数据,保存图片到服务器的某个...
CKEditor则是一款强大的富文本编辑器,支持多种高级特性,包括图片批量上传,这将极大地提升用户在内容编辑时的体验。 首先,我们需要了解CKEditor的基本用法。CKEditor是一个JavaScript库,可以方便地嵌入到HTML...
在这个“ASP+Ckeditor上传图片配置Demo和文档说明”的资源中,我们将探讨如何在ASP.NET环境中集成CKEditor,并实现图片上传功能。 1. **CKEditor介绍**: - CKEditor是一款开源的JavaScript富文本编辑器,支持多种...
3. 图片预览:在CKEditor中显示上传成功后的图片预览。 4. 图片插入:将预览的图片插入到编辑器内容中,生成相应的HTML代码。 三、整合步骤 1. 安装CKEditor:首先,你需要在项目中安装CKEditor,可以通过官方...
4. **响应格式**:在成功处理图片上传后,服务端需要返回一个符合CKeditor期望的响应,通常是JSON格式,包含了上传成功的信息以及新图片的URL。 5. **编码兼容性**:描述中提到的“UTF-8编码完美版本”,意味着该...
CKEditor的配置可以通过JavaScript代码或者其配置文件(config.js)进行,指定图片上传的URL为`upload.php`所在的位置。 总的来说,理解并掌握`upload.php`的工作原理对于实现CKEditor的图片上传功能至关重要,同时...
至于"multiimg-example",这可能是项目中包含的示例文件或目录名,可能包含了实现批量上传的实例代码,如HTML页面、JavaScript文件以及可能的服务器端脚本(例如PHP或Node.js)。 在实现CKEditor批量上传图片时,...