ckEditor在jsp中的使用

sunliyings17

浏览: 56276 次
性别:
来自: 杭州

最近访客更多访客>>

u013196437

极个别2913471133

e4077wf

xjsimon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JSP JavaScript HTML C C++

要使用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属性:属性值,......});

上面的蓝色代码显示我将editor的皮肤风格设置为kama,在ckeditor的skins文件夹下默认还有office2003和vi两种皮肤风格

将ckeditor的语言设置为zh-cn(简体中文).当然你也可以根据个人需要设置更多的属性。这里不过多介绍，大家可以通过样例中

和压缩包中提供的文档进行学习

要想提取我们在编辑器中编辑的内容并在页面上显示也和我们提取表单数据一样

<%
    String content=request.getParameter("editor1");
    if(content!=null&&!content.equals("")){
     out.println(content);
    }
   %>

这段代码显示了如何提取编辑器中内容。这里我将表单提交到页面本身。

通过上面的介绍，大家应该可以看出使用ckeditor的方便快捷。大家不需要任何的改变就可以在项目中引用在线编辑器了。

当然要想根据自己的需求进行定制就需要进行一些更深入的学习，不过也并不难。

我们可以在项目中新建一个ckconfig.js文件专门用来定制自己的ckeditor，下面贴出一个本人自己的配置

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?
/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

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']
    ];
    };
/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

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']
    ];
    };