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

0、了解CKeditor的相关文件

1、开启CKeditor上传图片功能

官方说明

简明的说,就是只需要在创建CKeditor时,添加以下两个配置:

在用CKEDITOR.replace()中配置

filebrowserBrowseUrl: ‘自定义的请求‘,
filebrowserUploadUrl: ‘自定义的请求‘

或,在config.js添加如下配置

config.filebrowserBrowseUrl=‘自定义的请求‘,
config.filebrowserUploadUrl=‘自定义的请求‘ 

2、编写自定义的请求

问题及解决方案:

1、解决ckeditor上传,返回时显示js代码不显示图片的问题

解决ckeditor上传,返回时显示js代码不显示图片的问题

2、跨域问题

chrome console log:

Refused to display ‘http://localhost:8080/webcnmain/ifacompany/article/uploadArticleImageForCkeditor?CKEditor=articleContentZH&CKEditorFuncNum=1&langCode=zh-cn‘ in a frame because it set ‘X-Frame-Options‘ to ‘DENY‘.

response.setHeader("X-Frame-Options", "SAMEORIGIN");

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

时间: 2024-11-06 09:28:41

【CKeditor】使用SpringMVC处理CKeditor上传图片的相关文章

springMVC和ckeditor图片上传

1.下载ckeditor后将文件夹放在webroot的js目录下: 2.springmvc配置静态文件访问 在web.xml中添加: <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.css</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>d

ckeditor:复制内容到ckeditor时,只保留文本,忽略其样式解决方法

打开ckeditor 包下的config.js,在 CKEDITOR.editorConfig= function(config){...}添加一句配置: config.forcePasteAsPlainText = true; 可能JS缓存,注意刷新当前页面. 参考:http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-forcePasteAsPlainText

新版CKeditor七牛云插件修改

新版CKeditor七牛云插件修改基于,CKeditor 4.6的源码,CKeditor新版支持从word复制内容直接上传了(IE9+),所以不需要之前的imagepaste老插件了.本来打算对上传的文件名做一个修改,避免同时拖入大量文件,导致文件名相同覆盖的情况,考虑到之前使用的是:Uinx时间戳_原文件名的方式,所以默认还是不修改.很多人觉得文件名对搜索引擎排名有提权作用,其实可以说是基本没有的,所以不用纠结文件名的问题. 新版的改动 1.升级到CKeditor 4.6源码,并且保留了CKe

项目整合ckeditor实现图片上传到远程服务器

最近手头上的一个Java项目需要做一个门户网站,其中有一个模块就是用来发布最新的业界安全动态的模块,因此需要用到后台发布新闻的功能:刚开始的时候在网上搜了一下,大部分都是关于PHP和.NET的,关于Java不多,而且查到的都是说用ckeditor+ckfinder来实现,ckeditor实现文本的编辑,ckfinder实现图片的上传,刚开始我也是准备用ckeditor+ckfinder来实现的,但是后来研究ckfinder的时候不知道如何配置ckfinder的图片上传路径问题,网上可以找到好多例

CKeditor 配置使用

一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js<script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea><textarea id="TextArea1" cols="20" rows="2

MVC富文本编辑器CKEditor配置CKFinder

富文本编辑器CKEditor的使用 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin:

为ckeditor编辑器修改添加一键排版功能

1.批量去除超链接:打开 statics/js/ckeditor/ckeditor.js找到:$.execCommand('unlink',false,null); 修改为:$.execCommand('unlink',false,true); 2.上传图片自动添加ALT参数修改 statics/js/ckeditor/plugins/image/dialogs/image.js找到:accessKey:'T','default':" 替换成:accessKey:'T','default':$(

富文本编辑器 CKeditor 配置使用

作者:Tyler Ning出处:http://www.cnblogs.com/tylerdonet/本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过以下邮箱地址[email protected] 联系我,非常感谢. Ckeditor下载地址:http://ckeditor.com/download 一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js script type="

Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg

注意: 1.这里的ckeditor编辑器是独立模块,不是那个wysiwyg模块. 2.这里的图片上传仅仅为文章内图片,非字段图片. 1.下载文件(1) http://drupal.org/project/ckeditor drupal的ckeditor模块(2) http://ckeditor.com/download CKeditor源码(3) http://ckfinder.com/download CKfinder(注意,不是免费的) 将ckedit文件夹放置在/sites/all/mod