keditor是fckeditor的下一代版本，下面就来说下ckeditor的使用吧！
要使用ckeditor，当然首先就是去http://ckeditor.com/ (ckeditor网站)下载ckeditor的压缩包，现在最新的是ckeditor_3.3.zip
下载后将压缩包解压，将解压后文件夹中的ckeditor文件夹copy到自己的web项目的WebRoot目录下。
打开ckeditor目录，可以看到文件夹结构如下
ckeditor
---_samples
---_source
---adapters
---images
---lang
---plugins
---skins
---themes
....
---ckeditor.js
---config.js
...
从每个文件夹和每个文件的名字我们就可以很容易看出它们的作用，_samples文件夹下放的自然就是供我们学习如何使用的样例程序了。
拿到一个我们以前没用过的东西，首先要看的当然就是它给的例子了，这可以让我们对这个程序有个整体的了解并快速掌握简单的使用方法。
想要在JSP页面中引用ckeditor是非常简单的一件事，前面我们只要已经将解压的ckeditor文件夹copy到WebRoot目录下了，只需要在jsp文件的代码中要加入ckeditor的位置加上如下代码，(比如我们要在一个form中使用ckeditor)。
下面在index.jsp(笔者建的一个测试页面)中引用ckeditor并测试
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
<form name="testForm" method="post" action="<%=path %>/index.jsp">
<textarea cols="80" id="editor1" name="editor1" rows="10">
在此添加内容
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
skin : 'kama',
language : 'zh-cn'
});
</script>
<input type="submit" value="提交"/>
</form>
</body>
</html>
比较关键的代码在代码中已用红色和蓝色标出，要能在页面中使用就要先将ckeditor目录下的ckeditor.js加入页面
form表单的写法还如我们未使用ckeditor时一样，只需要在页面中加入一段javascript代码，上面已经用蓝色
标出.
CKEDITOR.replace('要用ckeditor取代的textarea的name属性值或id属性值',{要设置的ckeditor属性:属性值,......});
若你不想对其属性设置，那就应改成 CKEDITOR.replace('editor1');
上面的蓝色代码显示我将editor的皮肤风格设置为kama,在ckeditor的skins文件夹下默认还有office2003和vi两种皮肤风格将ckeditor的语言设置为zh-cn(简体中文).当然你也可以根据个人需要设置更多的属性。这里不过多介绍，大家可以通过样例中和压缩包中提供的文档进行学习要想提取我们在编辑器中编辑的内容并在页面上显示也和我们提取表单数据一样
<%
String content=request.getParameter("editor1");
if(content!=null&&!content.equals("")){
out.println(content);
}
%>
这段代码显示了如何提取编辑器中内容。这里我将表单提交到页面本身。
当然也可以以js获取ckeditor提交过来的值：
直接看代码吧，在上面jsp页面中有类似这么一句
<script type="text/javascript">
CKEDITOR.replace( 'editor1',
{
skin : 'kama',
language : 'zh-cn'
});
</script>
修改为：
<script type="text/javascript">
var p_desc = CKEDITOR.replace( 'editor1', {skin : 'kama',language : 'zh-cn'});
</script>
即赋值给一个变量就OK了，然后使用下面的方式读取文本域的值：
p_desc.document.getBody().getText(); //取文本形式的值
p_desc.document.getBody().getHtml(); //取包含html代码的值
通过上面的介绍，大家应该可以看出使用ckeditor的方便快捷。大家不需要任何的改变就可以在项目中引用在线编辑器了。
当然要想根据自己的需求进行定制就需要进行一些更深入的学习，不过也并不难。
我们可以在项目中新建一个ckconfig.js文件专门用来定制自己的ckeditor，下面贴出一个本人自己的配置
view plaincopy to clipboardprint?
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置语言
config.uiColor = '#BFEFFF'; //背景颜色
config.width = 700; //宽度
config.height = 300; //高度
config.skin='kama';
//工具栏
config.toolbar =
[
['Source','Bold','Italic'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Smiley'],
['Styles','Font','FontSize'],
['TextColor'],
['Undo','Redo']
];
};
你可以根据自己的需要定制，下面贴出一个含有完整工具栏的配置文件 ,供大家参考定制自己的工具栏
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置语言
config.uiColor = '#BFEFFF'; //背景颜色
config.width = 700; //宽度
config.height = 300; //高度
config.skin='kama';
//工具栏
config.toolbar =
[
['Source','Bold','Italic'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Smiley'],
['Styles','Font','FontSize'],
['TextColor'],
['Undo','Redo']
];
};
你可以根据自己的需要定制，下面贴出一个含有完整工具栏的配置文件 ,供大家参考定制自己的工具栏
view plaincopy to clipboardprint?
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
config.width = 900;
config.height = 300;
config.skin = 'kama';
// 背景颜色
config.uiColor = '#BFEFFF';
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
};
只要在页面中将你的配置文件和ckeditor.js同时引入页面，就可以显示你自己定义的ckeditor了。
当前位置：
论坛首页 »
自由讨论区 »
Android, Python及开发编程讨论区
»
发起投票
技术讨论
加好友
发消息
2012-4-13 15:32:34 |
赞(
操作
