将CKEditor集成到Java开发环境中
Posted 如风105
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将CKEditor集成到Java开发环境中相关的知识，希望对你有一定的参考价值。
本文主要介绍如何将CKEditor集成到Java开发环境中，CKEditor是FCKEditor的升级版，使用很方便。下面是基本使用方法：
第一步：下载必要的库
1、到CKEditor官网http://www.fckeditor.net/download/下载Ckeditor4.0.2，这是目前最新的版本，4.1马上就出来了。
2、找到CKEditor 3.6.4 for Java，download.jar按钮，下载ckeditor-java-core-3.5.3.zip，这是java集成的jar包，可以用来配置CKEditor，其中还有Ckeditor的标签，比较重要。
第二步：将ckeditor-java-core-3.5.3.jar及Ckeditor库放到工程相应目录下，jar包放到lib下，库文件(js等资源文件)放到存放页面资源的目录下，根据自己的情况
3、在需要使用编辑器的jsp页面中加入CKeditor标签库，这样可以使用<ckeditor>标签
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
4、如果让CKeditor自动创建实例，则只需在</body>标签之前添加一个<ckeditor:replace>（官方推荐这样做，在其他地方添加也可以）
<!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>
注意：<ckeditor:replace>中replace对应的是要替换的<textarea>标签的id，basePath对应的是CKeditor资源文件的存放路径。如果需要替换多个<textarea>，则可以使用 <ckeditor:replaceAll>标签，
<ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>
其中className是<textarea>的class样式，只要<textarea>的class样式为myclass，则都会被CKeditor实例替换。
5、如果想手动创建CKeditor实例，则可以通过<ckeditor:editor>标签创建。
<ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />
其中basePath是CKeditor存放目录，editor是全局<textarea>元素的name，value则是该<textarea>的默认值，textareaAttributes则对应<textarea>的配置信息，是一个java.util.HashMap类型的对象，key对应的是<textarea>中的属性名称name,value对应<textarea>中的属性值value。
<%
Map<String, String> attr = new HashMap<String, String>();
attr.put("rows", "8");
attr.put("cols", "50");
%>
6、提交编辑内容
后台获取编辑内容和平时使用<textarea>没区别，CKEditor只是对<textarea>进行了增强，所以数据获取仍然是通过<textarea>的name属性。
如果想在js中获取CKEditor实例中的内容，则可以通过CKEditor API获取，
var data = CKEDITOR.instances.editor1.getData();
基本流程就是这样，如果想修改CKeditor样式的话，可以修改CKeditor资源文件中的config.js，
/*
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‘]
];
};
也可以直接在jsp里设置：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.ckeditor.CKEditorConfig"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新闻中心</title>
</head>
<body>
<center>
<form action="${pageContext.request.contextPath}/news/add">
标题:<input name="title" type="text"/><p/>
内容:<textarea name="content" id="editor" rows="5" cols="20"></textarea>
<label>公告</label>:<input type="radio" name="ntype" value="1"/>
<label>新闻</label>:<input type="radio" name="ntype" value="2"/>
<input type="submit" value="添加">
</form>
</center>
<%
CKEditorConfig settings = new CKEditorConfig();
settings.addConfigValue("height","300");
settings.addConfigValue("width","600");
%>
<ckeditor:replace replace="editor" basePath="${pageContext.request.contextPath}/ckeditor/" config="<%=settings %>"/>
</body>
</html>
想进一步了解的话，可以参考CKEditor官网的指导说明，http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration
编辑器一般使用都很简单，能满足一般需求就行。当然，这款编辑器是国外研发的，国内也有比较好的在线编辑器，比如kindeditor，中文显示，貌似使用起来比这个还简单，有兴趣大家可以尝试一下，KindEditor官网:http://www.kindsoft.net/
以上是关于将CKEditor集成到Java开发环境中的主要内容，如果未能解决你的问题，请参考以下文章