系统需求

请注意，你至少需要JRE 1.4和Servlet的2.5/JSP 2.1使用整合。

安装

将CKEditor添加到您的应用程序，有两步的过程：

下载独立CKEditor和放置在Web应用程序目录。

下载并安装服务器端集成(用于Java CKEditor)。

添加客户端CKEditor

去的下载CKEditor的最新版本。将它放置在你的web应用程序的目录里。

添加标签库(ckeditor-java-core)

当你想添加CKEditor库，你可以选择使用Maven或手动添加。

使用Maven2

如果您的应用程序使用Maven，你可以添加以下的依赖在你的pom.xml文件里：

com.ckeditor

ckeditor-java-core

3.x.y

请注意，3.xy表示版本，例如 3.6。当CKEditor版本添加到Maven中，将自动下载指定版本。

没有Maven

如果你不使用Maven，你必须手动添加CKEditorjar库。在CKEditor下载网站，下载的ckeditor-java-core- 3.xy* .jar文件，并把它放在在你的/ WEB-INF/lib目录。

*请注意，3.xy表示一个CKEditor发布的版本。

在页面上使用标签

要在JSP页面中使用标签，你需要在页面中声明CKEditor标记库：

在以下的实例中CKEditor取代HTML中textarea的元素。除非你正在使用的标签(将在后面介绍)，你首先需要的是一个带有HTMLtextarea的元素的JSP页面。

更换所选择的textarea元素

我们的目的是这样的：让我们假设有个页面看起来像这样：

Editor 1:

正如在上面的代码中所看到的，该页面的table元素的属性包含sample_posteddata.jsp这个值，这是一个在样例中应用的web.xml映射，当页面被提交，链接到servlet，输出出CKEditor的内容。

接下来，你必须在页面中添加CKEditor标签(在这种情况下)。建议添加在底部 BODY>标记之前：

请注意，上面的CKEditor标签包含两个属性：

replace-一个CKEditor实例映射到将取代的HTML textarea元素的name或ID的

basePath-CKEditor主目录的路径。

本文件的目的：假设CKEditor是在/ ckeditor /目录(http://example.com/ckeditor/)。

请注意，也可用其他标记属性。请参阅第一个完整的描述通用标签属性的。

下面是我们的示例页面的完整的源代码：

Editor 1:

更换所有的textarea元素

标签用Editor实例取代文件中的所有textarea的元素。它可以选择只更换一个CSS Class的值与CKEditor的className属性的值相等的textarea元素。

这个标签用CKEditor实例替换所有的Class为MyClass的textarea元素。

创建一个CKEditor实例

标签创建一个CKEditor实例。

"basePath="/ckeditor/"editor="editor1"value="Type here" />

对于这个么有HTMLtextarea元素的标签，必须在当前页面上创建并立即用CKEditor实例取代。上面的代码包含以下元素：

basePath-包含到CKEditor主目录的路径。

editor-是内部的textarea元素的名称。

value-是默认的textarea元素值。

textareaAttributes-是一个java.util.Map 存储在Map keys里面的textarea的属性名，而属性值则存为Map values。例如：

attr = new HashMap();

attr.put("rows", "8");

attr.put("cols", "50");%>

常见的标记属性

下面的列表列出一些常用的标签属性。

basePath

basePath-包含CKEditor主目录的路径。

例如，如果在CKEdito下r的http://example.com/3rdparty/ckeditor/中，basePath属性应设置为/ 3rdparty/ckeditor /。

config

config -此参数包含CKEditor配置对象。有关该属性可用选项的列表，请参阅JavaScript的

将配置选项存储在CKEditorConfig对象的。他们使用添加addConfigValue方法：

settings.addConfigValue("width","500");%>

" />

这种方法的第一个参数始终是一个字符串形式的配置选项的名称。第二个可以使用String，Boolean，Number，List，或Map对象其中一个。无论使用何种类型，CKEditor将尝试将每个值映射到一个可以接受的形式。例如，下面的代码：

settings.addConfigValue("toolbar","[[ 'Source', '-', 'Bold', 'Italic' ]]");%>

等同于

List>list= newArrayList>();

ListsubList= newArrayList();

subList.add("Source");

subList.add("-");

subList.add("Bold");

subList.add("Italic");

list.add(subList);

settings.addConfigValue("toolbar", list);%>

新的CKEditor 3.6工具栏语法

在CKEditor 3.6中，工具栏按钮可以组织成组。每个组都有自己的名字和它包含的一组按钮。这个新的定义可以表现在两个方面。

下面的代码：

settings.addConfigValue("toolbar","[{name: 'document', items: ['Source', '-', 'NewPage']},

'/', {name: 'styles', items: ['Styles','Format']} ]");

%>

等同于：

ListmainList= newArrayList();

HashMaptoolbarSectionMap= newHashMap();

ListsubList= newArrayList();

subList.add("Source");

subList.add("-");

subList.add("NewPage");

toolbarSectionMap.put("name","document");

toolbarSectionMap.put("items", subList);

mainList.add(toolbarSectionMap);

mainList.add("/");

toolbarSectionMap= newHashMap();

subList= newArrayList();

subList.add("Styles");

subList.add("Format");

toolbarSectionMap.put("name","styles");

toolbarSectionMap.put("items", subList);

mainList.add(toolbarSectionMap);

settings.addConfigValue("toolbar", mainList);%>

timestamp

timestamp-此参数存储一个特定的CKEditor的发行的值，这有助于避免浏览器缓存的问题，当一个新的客户端CKEditor版本上传到服务器时，它的价值就体现了。

initialized

initialized  - 设置这个值为true意味着ckeditor.js脚本已经包含在页面里面了，有没有必要再次添加。另一方面，将它设置为false，意味着，ckeditor.js脚本应该被添加到页面中。

Event

Event-此参数存储客户端的事件监听器列表这是com.ckeditor.EventHandler类型。

例如：

首先，创建一个EventHandler实例。然后，您可以通过使用事件的addEvent方法，其中第一个参数是CKEditor事件关键字，第二个是JavaScript函数中的一个连接字符串。

eventHandler.addEvent("instanceReady","function (ev) { alert(\"Loaded:\"+ ev.editor.name); }");%>

为了使用页面上的事件，可以添加以下表达式：

"/>

globalEvents

globalEvents-此参数存储着可被所有CKEditor实例使用的是客户端事件监听器列表，是个GlobalEventHandler类型。

globalEventHandler.addEvent("dialogDefinition","function (ev) { alert(\"Loading dialog window:\"+ ev.data.name); }");%>

在一个Java类中设置配置选项

configuration, events和global events可以被创建在一个scriptlet实例，或在一个独立的Java类。下面是一个例子：

package com.ckeditor.samples;

import java.util.ArrayList;

import java.util.List;

import com.ckeditor.CKEditorConfig;

import com.ckeditor.EventHandler;

import com.ckeditor.GlobalEventHandler;

public class ConfigurationHelper {

public static CKEditorConfig createConfig() {

CKEditorConfig config = new CKEditorConfig();

List> list = new ArrayList>();

List subList = new ArrayList();

subList.add("Source");

subList.add("-");

subList.add("Bold");

subList.add("Italic");

list.add(subList);

config.addConfigValue("toolbar", list);

config.addConfigValue("width","500");

return config;

}

public static EventHandler createEventHandlers() {

EventHandler handler = new EventHandler();

handler.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }");

return handler;

}

public static GlobalEventHandler createGlobalEventHandlers() {

GlobalEventHandler handler = new GlobalEventHandler();

handler.addEvent("dialogDefinition","function (ev) { alert(\"Loading dialog window: \" + ev.data.name); }");

return handler;

}

}

要在JSP页面上访问这个类，你可以使用以下表达式：

"events="" />