内容 |
系统需求
http://www.cnblogs.com/jse7en/archive/2012/04/14/2447433.html
请注意,你至少需要JRE 1.4和Servlet的2.5/JSP 2.1使用整合。
安装
将CKEditor添加到您的应用程序,有两步的过程:
- 下载独立CKEditor和放置在Web应用程序目录。
- 下载并安装服务器端集成(用于Java CKEditor)。
添加客户端CKEditor
去官方的CKEditor下载页面下载CKEditor的最新版本。将它放置在你的web应用程序的目录里。
添加标签库(ckeditor-java-core)
当你想添加CKEditor库,你可以选择使用Maven或手动添加。
使用Maven2
如果您的应用程序使用Maven,你可以添加以下的依赖在你的pom.xml
文件里:
<dependency> <groupId>com.ckeditor</groupId> <artifactId>ckeditor-java-core</artifactId> <version>3.x.y</version> </dependency>
请注意,3.xy
表示版本,例如<version> 3.6</version>
。当CKEditor版本添加到Maven中,将自动下载指定版本。
没有Maven
如果你不使用Maven,你必须手动添加CKEditor jar
库。在CKEditor下载网站,下载的ckeditor-java-core- 3.xy* .jar文件,并把它放在在你的/ WEB-INF/lib
目录。
*
请注意,3.xy
表示一个CKEditor发布的版本。
在页面上使用标签
要在JSP页面中使用<ckeditor>
标签,你需要在页面中声明CKEditor标记库:
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
在以下的实例中CKEditor取代HTML中textarea的
元素。除非你正在使用的<ckeditor:editor>
标签(将在后面介绍),你首先需要的是一个带有HTMLtextarea的
元素的JSP页面。
更换所选择的textarea元素
我们的目的是这样的:让我们假设有个页面看起来像这样:
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <html> <body> <form action="sample_posteddata.jsp" method="get"> <p> <label for="editor1">Editor 1:</label> <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea> </p> <p> <input type="submit" value="Submit" /> </p> </form> </body> </html>
正如在上面的代码中所看到的,该页面的table
元素的属性包含sample_posteddata.jsp
这个值,这是一个在样例中应用的
web.xml映射,当页面被提交,链接到servlet,输出出CKEditor的内容。
接下来,你必须在页面中添加CKEditor标签(<ckeditor:replace>
在这种情况下)。建议添加在底部</ BODY>
标记之前:
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
请注意,上面的CKEditor标签包含两个属性:
-
replace-一个CKEditor实例映射到将取代的HTML textarea元素的name或ID的
basePath
-CKEditor主目录的路径。
本文件的目的:假设CKEditor是在/ ckeditor /
目录(http://example.com/ckeditor/
)。
请注意,也可用其他标记属性。请参阅第一个完整的描述通用标签属性的。
下面是我们的示例页面的完整的源代码:
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %> <html> <body> <form action="sample_posteddata.jsp" method="get"> <p> <label for="editor1">Editor 1:</label> <textarea cols="80" id="editor1" name="editor1" rows="10"></textarea> </p> <p> <input type="submit" value="Submit" /> </p> </form> <ckeditor:replace replace="editor1" basePath="/ckeditor/" /> </body> </html>
更换所有的textarea元素
<ckeditor:replaceAll>
标签用Editor实例取代文件中的所有textarea的
元素。它可以选择只更换一个CSS Class的值与CKEditor 的className
属性的值相等的textarea
元素。
<ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>
这个标签用CKEditor实例替换所有的Class为
元素。MyClass的
textarea
创建一个CKEditor实例
<ckeditor:editor>
标签创建一个CKEditor实例。
<ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />
对于这个么有HTML textarea
元素的标签,必须在当前页面上创建并立即用CKEditor实例取代。上面的代码包含以下元素:
basePath
-包含到CKEditor主目录的路径。-
editor-是内部
的textarea
元素的名称。 -
value -是默认
的textarea
元素值。 textareaAttributes
-是一个
java.util.Map 存储在Map keys里面的textarea的属性名,而属性值则存为Map values。例如:
<% Map<String, String> attr = new HashMap<String, String>(); 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的API。
将配置选项存储在CKEditorConfig
对象的。他们使用添加addConfigValue
方法:
<% CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue("width","500"); %> <ckeditor:replace replace="editor1" basePath="/ckeditor/" config="<%=settings %>" />
这种方法的第一个参数始终是一个字符串形式的配置选项的名称。第二个可以使用String,Boolean,Number,List,或Map对象其中一个。无论使用何种类型,CKEditor将尝试将每个值映射到一个可以接受的形式。例如,下面的代码:
<% CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue("toolbar","[[ 'Source', '-', 'Bold', 'Italic' ]]"); %>
等同于
<% CKEditorConfig settings = new CKEditorConfig(); List<List<String>> list = new ArrayList<List<String>>(); List<String> subList = new ArrayList<String>(); subList.add("Source"); subList.add("-"); subList.add("Bold"); subList.add("Italic"); list.add(subList); settings.addConfigValue("toolbar", list); %>
新的CKEditor 3.6工具栏语法
在CKEditor 3.6中,工具栏按钮可以组织成组。每个组都有自己的名字和它包含的一组按钮。这个新的定义可以表现在两个方面。
下面的代码:
<% CKEditorConfig settings = new CKEditorConfig(); settings.addConfigValue("toolbar","[{name: 'document', items: ['Source', '-', 'NewPage']}, '/', {name: 'styles', items: ['Styles','Format']} ]"); %>
等同于:
<% CKEditorConfig settings = new CKEditorConfig(); List<Object> mainList = new ArrayList<Object>(); HashMap<String, Object> toolbarSectionMap = new HashMap<String, Object>(); List<String> subList = new ArrayList<String>(); subList.add("Source"); subList.add("-"); subList.add("NewPage"); toolbarSectionMap.put("name", "document"); toolbarSectionMap.put("items", subList); mainList.add(toolbarSectionMap); mainList.add("/"); toolbarSectionMap = new HashMap<String, Object>(); subList = new ArrayList<String>(); 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 eventHandler = new EventHandler(); eventHandler.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }"); %>
为了使用页面上的事件,可以添加以下表达式:
<ckeditor:editor basePath="/ckeditor/" editor="editor1" events="<%=eventHandler %>"/>
globalEvents
globalEvents
-此参数存储着可被所有CKEditor实例使用的是客户端事件监听器列表,是个GlobalEventHandler
类型。
<% GlobalEventHandler globalEventHandler = new 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<String>> list = new ArrayList<List<String>>(); List<String> subList = new ArrayList<String>(); 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页面上访问这个类,你可以使用以下表达式:
<ckeditor:replace replace="editor1" basePath="ckeditor/" config="<%= ConfigurationHelper.createConfig() %>" events="<%= ConfigurationHelper.createEventHandlers() %>" />
另外一个见面找到的:
第一步:载入 CKEditor
http://ckeditor.com/download 下载ckeditor的最新版本(我下了个5月9号发布的3.6),解压后将 ckeditor 文件夹复制到web工程的根目录下。在要使用CKEditor的页面<head>块中插入以下代码,将其引入:
- <head>
- ...
- <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
- </head>
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
第二部:创建 CKEditor 实例
首先,在页面中插入
一个<textarea>节点:
- <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
如果你想让编辑器在初始化时,显示诸如从数据库等处查出的数据,只需要将他们插入
<textarea>节点中,如上面<p>节点中的内容。
创建好
<textarea>后,用
CKEditor API 替换原来的HTML节点,如下:
- <script type="text/javascript">
- CKEDITOR.replace( 'editor1' );
- </script>
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
或者在
window.onload 中:
- <script type="text/javascript">
- window.onload = function()
- {
- CKEDITOR.replace( 'editor1' );
- };
- </script>
<script type="text/javascript"> window.onload = function() { CKEDITOR.replace( 'editor1' ); }; </script>
第三步:更改config.js
config.js是 CKEditor 的主配置文件,更改config.js来定制自己的 CKEditor 样式:
- /*
- Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
- For licensing, see LICENSE.html or http://ckeditor.com/license
- */
- CKEDITOR.editorConfig = function( config )
- {
- // Define changes to default configuration here. For example:
- // config.language = 'fr';
- // config.uiColor = '#AADC6E';
- config.language = 'zh-cn'; // 配置语言
- config.uiColor = '#FFF'; // 背景颜色
- config.width = 'auto'; // 宽度
- config.height = '300px'; // 高度
- config.skin = 'office2003';// 界面v2,kama,office2003
- config.toolbar = 'MyToolbar';// 工具栏风格(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js
- config.toolbarCanCollapse = false;// 工具栏是否可以被收缩
- config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
- //自定义的工具栏
- config.toolbar_MyToolbar =
- [
- ['Source','-','Save','Preview','Print'],
- ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
- '/',
- ['Styles','Format'],
- ['Bold','Italic','Strike'],
- ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
- ['Link','Unlink','Anchor'],
- ['Maximize','-','About']
- ];
- };
/* Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.language = 'zh-cn'; // 配置语言 config.uiColor = '#FFF'; // 背景颜色 config.width = 'auto'; // 宽度 config.height = '300px'; // 高度 config.skin = 'office2003';// 界面v2,kama,office2003 config.toolbar = 'MyToolbar';// 工具栏风格(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js config.toolbarCanCollapse = false;// 工具栏是否可以被收缩 config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js //自定义的工具栏 config.toolbar_MyToolbar = [ ['Source','-','Save','Preview','Print'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'], '/', ['Styles','Format'], ['Bold','Italic','Strike'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['Link','Unlink','Anchor'], ['Maximize','-','About'] ]; };
第四步:提交编辑器内容
可以将 CKEditor 实例看作一个
<textarea>处理,在表单提交时,
CKEditor 实例中的内容被提交到服务器,可以通过<textarea> 的名称获得其内容。
如果需要在客户端获得 CKEditor 实例的内容,可以通过调用 CKEditor API,在表单提交前对其进行处理,如下:
- <script type="text/javascript">
- var editor_data = CKEDITOR.instances.editor1.getData();
- </script>
<script type="text/javascript"> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
一个完整的例子:
- <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>CKEditor</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <!--
- <link rel="stylesheet" type="text/css" href="styles.css">
- -->
- <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
- </head>
- <body>
- <form id="form1" name="form1" method="post" action="display.jsp">
- <table width="650" height="400" border="0" align="center">
- <tr>
- <td valign="top">
- 内容:
- </td>
- <td>
- <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
- <script type="text/javascript">
- CKEDITOR.replace( 'editor1' );
- </script>
- </td>
- </tr>
- <tr>
- <td></td>
- <td>
- <input type="submit" name="Submit" value="提交" />
- <input type="reset" name="Reset" value="重置" />
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>
- http://wuhongyu.iteye.com/blog/1051419#