ckeditor编辑器在java项目中配置

一、基本使用：

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的根目录

三、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();

}

四、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"; //为图片上传处理Servlet在web.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的根目录

五、CKEditor中config.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(使用许可).

ckeditor编辑器在java项目中配置,布布扣,bubuko.com

时间： 2024-10-07 04:17:49

ckeditor编辑器在java项目中配置的相关文章

在MyEclipse的web项目/java项目中，使用Hibernate-tools中的hbm2java和hbm2ddl工具，根据hbm文件自动生成pojo和数据库脚本

     首先,我一定要吐槽下,这个Ant管理部署项目的工具,以及hibernate刚刚学习,导入我这一个简单的问题整了一天多,实在效率有点低下.在这两天中,①了解了Ant,知道了在Ant中很灵活的步骤项目的情况,知道了build.xml文件的一些基本写法.②还学习了在MyEclipse这样的集成工具中完成项目部署.③以及在这两种情况中,利用hibernateTools中的hbm2java和hbm2ddl工具,根据对象关系映射文件,自动生成POJO以及SQL文件(就是数据表). 一,在web项目

在MyEclipse的web项目/java项目中，使用Hibernate-tools中的hbm2java和hbm2ddl工具，依据hbm文件自己主动生成pojo和数据库脚本

     首先.我一定要吐槽下,这个Ant管理部署项目的工具.以及hibernate刚刚学习,导入我这一个简单的问题整了一天多.实在效率有点低下. 在这两天中,①了解了Ant.知道了在Ant中非常灵活的步骤项目的情况,知道了build.xml文件的一些基本写法.②还学习了在MyEclipse这种集成工具中完毕项目部署. ③以及在这两种情况中.利用hibernateTools中的hbm2java和hbm2ddl工具,依据对象关系映射文件,自己主动生成POJO以及SQL文件(就是数据表). 一,在w

log4j在java项目中使用

   Log4j.properties的路径为    src/config/log4j Log4j.properties文件的内容下面定义日志输出级别是 INFO,并且配置了2个输出目的地,一个是A3,一个是console log4j.rootLogger = INFO,A3,CONSOLE //日志最低的输出级别 log4j.appender.A3.Threshold=INFO log4j.appender.A3.encoding=UTF-8 //每天产生一个文件DailyRollingFil

Ant在Java项目中的使用（一眼就看会）

参考:http://www.cnblogs.com/zhengqiang/p/5557155.html Ant是跨平台的构建工具,它可以实现项目的自动构建和部署等功能.在本文中,主要让读者熟悉怎样将Ant应用到Java项目中,让它简化构建和部署操作. 一.安装与部署 1.1 下载 下载地址:https://archive.apache.org/dist/ant/binaries/ 我下载的是1.7.1版本.解压到某个目录(例如D:\ant-1.7.1),即可使用. 1.1 配置环境变量 1.添加

关于JAVA项目中CLASSPATH路径详解

自己看完总结:配置中"classpath: " 相当于输出目录,即编译后的class文件 所在目录:而 "file:" 是 启动目录而言,14 上服务器就是WEB-INF 下目录,本地项目就是项目根目录. 关于JAVA项目中CLASSPATH路径详解 分类: Java 2013-03-14 10:52 6845人阅读 评论(1) 收藏 举报 在dos下编译java程序,就要用到classpath这个概念,尤其是在没有设置环境变量的时候.classpath就是存放.c

Java项目中如何使用log4j和slf4j实现日志打印

什么是log4j? Log4j是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.NT的事件记录器.UNIX Syslog守护进程等:我们也可以控制每一条日志的输出格式:通过定义每一条日志信息的级别,我们能够更加细致地控制日志的生成过程.最令人感兴趣的就是,这些可以通过一个配置文件来灵活地进行配置,而不需要修改应用的代码. 什么是slf4j? SLF4J,即简单日志门面(Simple Logging Facade fo

java项目中可能会使用到的jar包解释

一．Struts2 用的版本是struts2.3.1.1 一个简单的Struts项目所需的jar包有如下8个 1. struts2-core-2.3.1.1.jar: Struts2的核心类库. 2. xwork-core-2.3.1.1.jar: XWork核心类,XWork是一个标准的command模式实现,并且完全从web层剥离出来.WebWork被构建在Xwork上,而Struts2由Struts1和WebWork两个经典的MVC框架发展而来. 3. ognl-3.0.3.jar: 支持

JAVA项目中公布WebService服务——简单实例

1.在Java项目中公布一个WebService服务: 怎样公布? --JDK1.6中JAX-WS规范定义了怎样公布一个WebService服务. (1)用jdk1.6.0_21以后的版本号公布. (2)与Web服务相关的类,都位于Javax.jws.*包中 @WebService--此注解用在类上指定将此类公布成一个WebService: EndPoint--此类为端点服务类,当中publish()方法用于将一个已经加入了@WebService注解对象绑定到一个地址的port上,用于公布. 2

JAVA项目中发布WebService服务——简单实例

1,在Java项目中发布一个WebService服务: 如何发布? --JDK1.6中JAX-WS规范定义了如何发布一个WebService服务: (1)用jdk1.6.0_21以后的版本发布: (2)与Web服务相关的类,都位于Javax.jws.*包中 @WebService--此注解用在类上指定将此类发布成一个WebService: EndPoint--此类为端点服务类,其中publish()方法用于将一个已经添加了@WebService注解对象绑定到一个地址的端口上,用于发布. 2,例子