文档章节

CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)

一枚Sir
 一枚Sir
发布于 2014/05/29 20:43
字数 2234
阅读 2330
收藏 9
点赞 0
评论 0

CKEditor 3.x配置说明

一、基本使用:

 1、所需文件架包

A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip

  下载地址:http://ckeditor.com/download

 

 2、配置使用

A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;

B.在需要使用CKEditor的页面引入CKEditor的支持javascript

<head>

<script type="text/javascript" src="/commons/ckeditor/ckeditor.js"></script>

</head>

 

C.一般我们的内容是使用一个”<textarea>”来显示内容,然后使用调用脚本替换

<textarea id="editor1"name="editor1">Initial value.</textarea>

<script type="text/javascript">CKEDITOR.replace(“editor1”);</script>

D.CKEDITOR.replace(“editor1”)中的”editor1”为id或者是name搜索方式默认是先按id来搜索,没找到再按name来搜索

E.具体的图例

 


二、Java项目中配置使用:

1、所需文件架包

A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip

  下载地址:http://ckeditor.com/download

B.CKEditor for Java 架包,比如:ckeditor-java-core-3.5.3.jar

      下载地址:http://ckeditor.com/download

 2、配置使用

A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;

B.将下载下来的CKEditorfor Java 包(ckeditor-java-core-3.5.3.jar)复制进项目” /WEB-INF/lib”目录;

C.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

D.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器

<textareaid="id_1"name="id_1">Initial value.</textarea> 

<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

   * replace 只的是textarea name或者id
* basePath CKEditor的根目录

E.具体图例

            

三、Java项目中配置使用并支持简单的图片上传功能:

CKEditor在Java项目中配置使用,并支持图片的上传功能。原理是通过showModalDialog来实现的,弊端不支持Chrome浏览器,IE,FireFox支持;

1、所需文件架包

A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip

  下载地址:http://ckeditor.com/download

B.CKEditor for Java 架包,比如:ckeditor-java-core-3.5.3.jar

     下载地址:http://ckeditor.com/download

 2、配置使用

A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;

B.将下载下来的CKEditorfor Java 包(ckeditor-java-core-3.5.3.jar)复制进项目” /WEB-INF/lib”目录;

C.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

D.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器

<textareaid="id_1"name="id_1">Initial value.</textarea> 

<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

   * replace 只的是textarea name或者id
   * basePath CKEditor的根目录
 

E简单快捷的给CKEditor加上图片上传功能

 

         CKEditor非常好用,但它的图片/文件上传使用了CKFinder,虽然功能非常强大,但集成起来还是比较麻烦,而且根据应用还需要改造。如果自己的应用已经有图片/文件上传模块,能否直接拿过来用呢?答案是肯定的,而且非常简单,就是在图片链接输入框的右边加个按钮,点击事件链接到已有的上传模块,上传后把图片的url传递给左边的输入框即可。步骤如下:

  打开ckeditor\plugins\image\dialogs\image.js,在链接输入框代码结尾也就是“m.lang.image.urlMissing)},后面加上这些代码:

{type:'button',id:'myUpload',align:'center',label:'新上传',onClick:function(){varretFile = showModalDialog("/common/uploadImage.jsp","", "dialogHeight:20;dialogWidth:29;"); if(retFile !=null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},

  /common/uploadImage.jsp是应用已经有的上传模块链接,上传成功后通过模式对话框的returnValue返回图片链接,比如在上传成功页面加上如下js函数,点击确定时调用。

function Done() {

  window.returnValue = imgPath;//上传后的图片链接

  window.close();

}

F.具体图例

 

四、Java项目中配置使用并支持图片上传功能包括FTP上传,图片压缩:

CKEditor在Java项目中配置使用,并支持图片的上传功能。原理是通过commons-fileupload上传组件实现的,这里已经封装好上传处理Servlet只需要在配置文件ckeditor.properties 中配置相关FTP服务器信息,是否压缩图片,上传附件的大小格式限制等。

1、所需文件架包和配置文件

A.Ckeditor基本文件包,比如:ckeditor_3.6.2.zip

  下载地址:http://ckeditor.com/download

B.CKEditor for Java 架包,比如:ckeditor-java-core-3.5.3.jar

     下载地址:http://ckeditor.com/download

C.Apache的上传组包 commons-fileupload,比如:commons-fileupload-1.2.1.jar

   下载地址:http://commons.apache.org/

D.Apache的上传组包 commons-io,比如:commons-io-1.4.jar

   下载地址:http://commons.apache.org/

E.Apache的FTP组件包commons-net, 比如:commons-net-ftp-2.0.jar

   下载地址:http://commons.apache.org/

F.Apache的工具包 commons-lang,比如:commons-lang-2.5.jar

   下载地址:http://commons.apache.org/

G.上传处理组件包 ckeditor-upload-1.0.jar

         自己封装的基于Servlet的图片上传处理组件

H.CKEditor的图片上传配置属性文件:ckeditor.properties

I.CKEditor的配置文件 config.js


备注:点击下载以上资源包

 

 2、配置使用

A.将下载下来的CKEditor压缩解压,将解压后的文件夹(“ckeditor”)拷贝进项目里面,比如我是放在”WebContent”的”commons”文件夹下;

B.将下载下来的所需组件架包拷贝进项目” /WEB-INF/lib”目录;

         C.将图片上传配置文件ckeditor.properties拷贝到项目SRC(classes)根目录下

          属性文件内容如下:

# default allowed extensionssettings

ckeditor.resourceType.media.extensions.allowed=.aiff|.asf|.avi|.bmp|.fla|.flv|.gif|.jpeg|.jpg|.mid|.mov|.mp3|.mp4|.mpc|.mpeg|.mpg|.png|.qt|.ram|.rm|.rmi|.rmvb|.swf|.tif|.tiff|.wav|.wma|.wmv

# base directory for the userfiles relative to the context root

ckeditor.userFilesPath = /files/ckeditor/

# default encoding

ckeditor.encoding = UTF-8

# default file size threshold: 1*1024*1024 = 1048576

ckeditor.size.threshold = 1048576

# default one file size :5*1024*1024 = 52428800

ckeditor.file.size.max = 52428800

# default all files size :10*1024*1024 = 10485760

ckeditor.size.max = 10485760

# some messages

message.request.not.contain.images= Requestdoes not contain image or media file.

message.request.general.form = Request is thegeneral form.

message.request.file.max = One file is toolarge.

message.request.all.file.max = All files is toolarge.

# ftp configurations

# open ftp file upload istrue otherwise false

ftp.upload = true


ftp.server = 127.0.0.1

ftp.user_name = jjy

ftp.password = 123

ftp.port = 21

 

# image resize configurations

# open image resize is trueotherwise false

image.resize = true

#resizeByMaxSize:0,resizeByRatio:1,resizeByFixedWidth:2,resizeByFixedHeight:3

image.resize.type = 0

# resize size 100,120,240,400,640

image.resize.size = 120,240,400

 

D.CKEditor配置文件” /ckeditor/config.js”修改

 

CKEDITOR.editorConfig = function(config) {

    //获取项目的目录比如:http://www.mymyty.com

    var strFullPath = window.document.location.href;

    var strPath = window.document.location.pathname;

    var pos = strFullPath.indexOf(strPath);

    var prePath = strFullPath.substring(0,pos);

    var postPath =strPath.substring(0,strPath.substr(1).indexOf('/')+1);

    var path_url = prePath+postPath;

 

    //显示出图片上传模块 

    config.pasteFromWordRemoveStyles = true;

    config.filebrowserImageUploadUrl = path_url + "/commons/ckeditor/images/upload.html"; //为图片上传处理Servletweb.xml中配置

 

    // 去掉ckeditor保存按钮 

    config.removePlugins = 'save';

};

 图片

 

E.在web.xml中配置Servlet

  <servlet>

    <servlet-name>ckeditor</servlet-name>

    <servlet-class>com.ebiz.ssi.ckeditor.CkeditorImagesUploadServlet</servlet-class>

       <load-on-startup>1</load-on-startup>

    </servlet>

<servlet-mapping>

     <servlet-name>ckeditor</servlet-name>

     <url-pattern>/commons/ckeditor/images/upload.html</url-pattern>

</servlet-mapping>

  图片:

 

 

F.在需要使用CKEditor的jsp页面配置CKEditor的标签,以后使用通过标签使用

<%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%>

G.一般我们的内容是使用一个”<textarea>”来显示内容,然后替换成CKEditor编辑器

<textareaid="id_1"name="id_1">Initial value.</textarea> 

<ckeditor:replacereplace="id_1"basePath="/commons/ckeditor/"/>

   * replace 只的是textarea name或者id
* basePath CKEditor的根目录
 

H.具体图例

 

五、CKEditorconfig.js配置文件的说明即样式自定义调整:

Congfig.js是CKDitor的配置文件,在这个里面可以修改编辑器的样式和所需工具栏等等

 

config.language= 'zh-cn';         // 编辑器语言
config.width =600;                  //初始化时的宽度

config.height = 400;           //初始化时的高度
config.skin='kama';        //编辑器样式,有三种:’kama’(默认)、’office2003′、’v2′
config.tabSpaces =4;               
config.resize_maxWidth =600;    //如果设置了编辑器可以拖拽 这是可以移动的最大宽度
config.toolbarCanCollapse =false;             //工具栏可以隐藏
//config.toolbarLocation ='bottom';       //可选:设置工具栏在整个编辑器的底部bottom
config.resize_minWidth =600;    //如果设置了编辑器可以拖拽 这是可以移动的最小宽度
config.resize_enabled =false;            //如果设置了编辑器可以拖拽

//以下是后添加的验证非法数据
config.protectedSource.push(/<\s*iframe[\s\S]*?>/gi); //<iframe>tags.              
config.protectedSource.push(/<\s*frameset[\s\S]*?>/gi); // <frameset> tags.
config.protectedSource.push(/<\s*frame[\s\S]*?>/gi); // <frame> tags.
config.protectedSource.push(/<\s*script[\s\S]*?\/script\s*>/gi); // <SCRIPT> tags.

config.baseFloatZIndex = 10000;   // 编辑器的z-index值

config.baseHref = “”;    //设置是使用绝对目录还是相对目录,为空为相对目录

 

六、CKEditor精简说明:

下载了完整的程序之后,先要对程序中的不必要的东西进行删除。凡是文件名或文件夹名前面有"_"的文件或文件夹都可以删除,这些文件是一些说明文件或者实例文件。另外,./lang文件夹中,只保留:zh_cn.js,en.js文件即可,这个文件夹是程序的语言包,因为其它语言大家用不到,放在那里也占用空间,所以删掉。./skins文件夹是编辑器的界面,根据情况保留至少一个文件夹即可,其中kama是可自定颜色UI的文件,建议保留,当然如果不在乎空间大小的话,也可以全部上传。删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).

 

© 著作权归作者所有

共有 人打赏支持
一枚Sir
粉丝 117
博文 209
码字总数 350904
作品 0
朝阳
架构师
ImageMagick高清压缩图片-GraphicsMagick+im4java

之前有写过imageMagick压缩图片的文章,但是那篇文章中用到的是jmagick。 JMagick是一个开源API,利用JNI(Java Native Interface)技术实现了对ImageMagick API的Java访问接口,因此也将比纯J...

Gmupload
2013/09/09
0
0
【第2章 Spring快速入门】2.1 Java应用之HelloWorld

上一节:【第1章 Spring概述与结构】1.2 Spring模块与结构 注意:本系列教程不会通过工程单独依赖某个Jar包,而是通过开源中国的Maven库,来进行Jar包的依赖管理,所以后续的讲解都是以Maven...

陶邦仁
2015/05/24
0
3
Android应用如何实现换肤功能

转载请注明出处,商用请与本人联系。 本系列专题培训适用范围:初级Android程序员,即有J2SE基础和Android初级水平。J2SE基础是指掌握JAVA语法,1.5、1.6新增的语法不完全掌握也没关系。了解...

嘻哈开发者
2014/03/10
0
0
CKEditor和CKFinder整合实现上传下载功能

事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其它框架技术) 一.需要的资源: 用到的网站,文件自己下载: a) ckeditor_3.6.2 (解压) download...

jxlgzwh
2013/03/06
0
0
Apache commons ftp API 的Spike

由于公司给了我一个传FTP的任务,刚好可以学习一下,同时也进行了一些单元测试,spike了一把,哈哈。分享一下。 这里只对最简单常用的FtpClient的上传下载列表功能进行测试学习使用^-^ 创建一...

XzhiF
2013/12/13
0
9
9个基于Java的搜索引擎框架

9个基于Java的搜索引擎框架 [导读] Lucene是目前最受欢迎的Java全文搜索框架,准确地说,它是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎。Lucene为开发人员...

引鸩怼孑
2015/07/30
0
0
java图片压缩,使用ImageIO代替JPEGImageEncoder

最近做项目需要图片压缩处理,网上找的方法大都使用了 com.sun.image.codec.jpeg. 这个包中的JPEGImageEncoder类,引入这个包后一直报错,各种google百度,尝试了各种方法,包括手动引jre中的...

zqz0125
2015/07/03
0
10
Java中实现FTP上传下载文件的功能,完整代码

一个JAVA 实现FTP功能的代码,包括了服务器的设置模块,并包括有上传文件至FTP的通用方法、下载文件的通用方法以及删除文件、在ftp服务器上穿件文件夹、检测文件夹是否存在等,里面的有些代码...

Carl_
2014/11/12
0
4
使用 Grapicmagick 和 Im4java 处理图片

ImageMagick是个图片处理工具可以安装在绝大多数的平台上使用,Linux、Mac、Windows都没有问题。GraphicsMagick是在ImageMagick基础上的另一个项目,大大提高了图片处理的性能,在linux平台上...

voole
05/07
0
0
JVM性能优化, Part 5:Java的伸缩性

ImportNew注: JVM性能优化系列文章前4篇由ImportNew翻译(第一篇,第二篇,第三篇, 第四篇)。本文由新浪微博:吴杰 (@WildJay) 投稿至ImportNew。感谢吴杰! 如果你希望分享好的原创文章或...

梁杰_Jack
2014/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

与女儿谈商业模式 (5):糖果连锁店?

分类:与女儿谈商业模式 2007-08-02 15:27阅读(8394)评论(32)   与女儿谈商业模式(5):糖果连锁店?   陈志武 /文   谈过星巴克、沃尔玛、戴尔以及微软的故事后,给陈笛印象最深的莫...

祖冲之
2分钟前
0
0
Linux平台下RMAN异机恢复总结

潇湘隐者 Linux平台下RMAN异机恢复总结 2017-05-29 16:30 by 潇湘隐者, ... 阅读, ... 评论, 收藏, 编辑 下面总结、整理一下RMAN异机恢复这方面的知识点,这篇笔记在个人笔记里面躺了几年了,...

rootliu
9分钟前
0
0
Spring配置xml启动报错 Connot find 'beans'

1.我们先看一下spring的原始配置 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSc......

江湖鱼大虾
11分钟前
0
0
www.w3.org被qiang导致logback报错:Connect reset

web项目部署到tomcat后,web项目中的logback不能运行,报错信息如下: Reported exception: ch.qos.logback.core.joran.spi.JoranException: I/O error occurred while parsing xml file......

浮躁的码农
35分钟前
0
0
JDeveloper中文乱码解决

全局设置字体; 全局设置环境编码; 项目设置编译器环境编码。

wffger
今天
2
0
MySQL主从介绍 , 准备工作,配置主,配置从, 测试主从同步

MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binlog的,主上须开启bin...

TaoXu
今天
2
0
线性代数学习总结

亭子happy
今天
1
0
Java8:Lambda表达式增强版Comparator和排序

1、概述 在这篇教程里,我们将要去了解下即将到来的JDK 8(译注,现在JDK 8已经发布了)中的Lambda表达式——特别是怎样使用它来编写Comparator和对集合(Collection)进行排序。 这篇文章是...

孟飞阳
今天
0
0
从架构到组件,深挖istio如何连接、管理和保护微服务2.0?

近几年我一直从事于微服务系统的设计以及实现方面的工作,属于微服务架构一线实践者。之前做过一些单体系统的微服务改造,在微服务拆分、治理等方面都有一定的经验。 本人比较特殊一点的经历...

xiaomin0322
今天
1
0
基于vue的h5文件切片上传(获取文件md5,实现秒传、进度条实现)

template <button @click="file"></button><label ref="upload" style="position: relative;"> <input type="file" @change="selectFile" style="position: abs......

hkaikai
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部