CKEditor3.0.1初步使用

来源：互联网发布：可以用手机开淘宝店吗编辑：程序博客网时间：2024/06/08 23:10

去http://ckeditor.com/download下载。

然后就是部署！

为了最小，最简单，够用的部署原则。

下了CKEditor3.0.1包后就是一系列的删除。

之后目录如下：

ckHelp.js 是后来添加，源自sample中检测兼容性的js，我将它重命名为ckHelp.js。

它的内容：

if ( typeof console != 'undefined' )

console.log();

if ( window.CKEDITOR )

{

(function()

{

var showCompatibilityMsg = function()

{

var env = CKEDITOR.env;

var html = '<p><strong>Your browser is not compatible with CKEditor.</strong>';

var browsers =

{

gecko : 'Firefox 2.0',

ie : 'Internet Explorer 6.0',

opera : 'Opera 9.5',

webkit : 'Safari 3.0'

};

var alsoBrowsers = '';

for ( var key in env )

{

if ( browsers[ key ] )

{

if ( env[key] )

html += ' CKEditor is compatible with ' + browsers[ key ] + ' or higher.';

else

alsoBrowsers += browsers[ key ] + '+, ';

}

alsoBrowsers = alsoBrowsers.replace( //+,([^,]+), $/, '+ and $1' );

html += ' It is also compatible with ' + alsoBrowsers + '.';

html += '</p><p>With non compatible browsers, you should still be able to see and edit the contents (HTML) in a plain text field.</p>';

document.getElementById( 'alerts' ).innerHTML = html;

};

var onload = function()

{

if ( !CKEDITOR.env.isCompatible )

showCompatibilityMsg();

};

if ( window.addEventListener )

window.addEventListener( 'load', onload, false );

else if ( window.attachEvent )

window.attachEvent( 'onload', onload );

})();

}

lang 包中只留简体中文（zh-cn.js ）和英文（en.js）

skins 中使用 office2003 皮肤，当然这个是最大的那个，但是Office的使用方式容易让人接受，其余的两种皮肤都删除掉。

config.js内容如下：如有别的需求，在另行更改。

CKEDITOR.editorConfig = function( config )

{

config.language = 'zh-cn';

config.toolbar =

[

['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],

'/',

['Styles','Format','Font','FontSize'],

['TextColor','BGColor'],

['Maximize', 'ShowBlocks','-','Undo','Redo']

];

config.skin = 'office2003';

config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Times New Roman;Verdana';

config.RemoveFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var' ;

config.RemoveAttributes = 'class,style,lang,width,height,align,hspace,valign';

};

之后就是页面的使用，我使用css样式识别方式，因为它简单。加入 class="ckeditor" 就不用写置换代码了。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="/common/common.jsp" %>

<html>

<head>

</head>

<body>

<tr>

<td>

</td>

</tr>

</table>

<table>

</td>

</tr>

</table>

</form>

</center>

</body>

</html>