Ckeditor编辑器在JAVA中的使用与配置

来源：互联网发布：linux 网卡驱动编辑：程序博客网时间：2024/04/30 00:16

一、下载ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个压缩文件，去http://ckeditor.com/官网上下载。

二、解压缩文件ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个文件，在ckeditor_3.6.2文件中有ckeditor文件夹；ckeditor-java-core-3.5.3中有ckeditor-java-core-3.5.3.jar、 ckeditor-java-core-3.5.3-javadoc.jar和ckeditor-java-core-3.5.3-sources.jar三个jar包。

三、我使用的是Myeclipse开发工具，新建工程，接着把ckeditor_3.6.2文件夹下的ckeditor整个复制到工程WebRoot下；然后把ckeditor-java-core-3.5.3文件夹下的三个jar包复制到WebRoot——>WEB-INF——>lib文件夹下，最后整个工程的目录如图：

注意：该版本的不需要在web.xml文件中配置<servlet></servlet >

四、下面写一个jsp页面来使用这个ckeditor，为了省时间，直接在index.jsp页面上写代码。如图：

注意：要使用就必须先引入ckeditor.js文件

<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script>

五、接下来发布工程，启动服务器，在地址栏中输入：http://localhost:8899/ckeditor

就可以访问了。访问的效果如图：

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

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

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

下面是简单的配置

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rightsreserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. Forexample:
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 rightsreserved.
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']
    ];
    };

只要在页面中将你的配置文件和ckeditor.js同时引入页面，就可以显示你自己定义的ckeditor了。