CKeditor的使用以及一些应该注意的问题

来源：互联网发布：剑倚天下骑宠进阶数据编辑：程序博客网时间：2024/05/21 19:26

一、使用方法：

1、下载ckeditor压缩包，把解压后的ckeditor文件复制到项目的webRoot文件夹小。

2、在页面<head>中引入ckeditor核心文件ckeditor.js

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

script 元素既可以包含脚本语句，也可以通过src 属性指向外部脚本文件。

3、在使用编辑器的地方插入HTML控件<textarea> 。这是使用class方式实现

<textareaid="TextArea1" cols="20" rows="2"class="ckeditor"></textarea>

4、相应的控件替换成编辑器代码。使用JS替换方式

<scripttype="text/javas cript">
CKEDITOR.replace('TextArea1');

</script>

5、配置编辑器

ckeditor的配置都集中在ckeditor/config.js 文件中，下面是一些常用的配置参数：

// 界面语言，默认为 'en'

config.language = 'zh-cn';

// 设置宽高

config.width = 400;

config.height = 400;

// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'

config.skin = 'v2';

// 背景颜色

config.uiColor = '#FFF';

// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js

config.toolbar = 'Basic';

config.toolbar = 'Full';

这将配合：
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'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];

//工具栏是否可以被收缩
config.toolbarCanCollapse = true;

//工具栏的位置
config.toolbarLocation = 'top';//可选：bottom

// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
config.resize_enabled = false;

//改变大小的最大高度

config.resize_maxHeight = 3000;

//改变大小的最大宽度
config.resize_maxWidth = 3000;

//改变大小的最小高度
config.resize_minHeight = 250;

//改变大小的最小宽度
config.resize_minWidth = 750;

//设置HTML文档类型
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22';

//是否使用完整的html编辑模式如使用，其源码将包含：<html><body></body></html>等标签
config.fullPage = false;

// 设置是使用绝对目录还是相对目录，为空为相对目录
config.baseHref = ''

//所需要添加的CSS文件在此添加可使用相对路径和网站的绝对路径
config.contentsCss = './contents.css';

//文字方向
config.contentsLangDirection = 'rtl'; //从左到右

//CKeditor的配置文件若不想配置留空即可
CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );

//界面编辑框的背景色plugins/dialog/plugin.js
config.dialog_backgroundCoverColor = '#fffefd'; //可设置参考
config.dialog_backgroundCoverColor = 'white' //默认

//是否开启图片和表格的改变大小的功能 config.disableObjectResizing = true;
config.disableObjectResizing = false //默认为开启

//默认的字体名plugins/font/plugin.js
config.font_defaultLabel = 'Arial';

//字体编辑时的字符集可以添加常用的中文字符：宋体、楷体、黑体等 plugins/font/plugin.js
config.font_names = 'Arial;Times New Roman;Verdana';

    //文字的默认式样plugins/font/plugin.js
config.font_style = {
element   : 'span',
styles   : { 'font-family' : '#(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};

//字体默认大小plugins/font/plugin.js
config.fontSize_defaultLabel = '12px';

//字体编辑时可选的字体大小plugins/font/plugin.js
config.fontSize_sizes='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

    //设置字体大小时使用的式样plugins/font/plugin.js
config.fontSize_style = {
element   : 'span',
styles   : { 'font-size' : '#(size)' },
overrides : [ { element : 'font', attributes : { 'size' : null } } ]
};

//是否强制复制来的内容去除格式plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //不去除

//当执行“新建”命令时，编辑器中的内容 plugins/newpage/plugin.js
config.newpage_html = '';

//当从word里复制文字进来时，是否进行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式

//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = false;

//可选的表情替代字符plugins/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':(', ';)', ':D', ':/', ':P',
'', '', '', '', '', '',
'', ';(', '', '', '', '',
'', ':kiss', '' ];

//对应的表情图片plugins/smiley/plugin.js
config.smiley_images = [
'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif',
'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',
'devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
'broken_heart.gif','kiss.gif','envelope.gif'];

//表情的地址plugins/smiley/plugin.js
config.smiley_path = 'plugins/smiley/images/';

//默认使用的模板plugins/templates/plugin.js.
config.templates = 'default';

//当使用模板时，“编辑内容将被替换”框是否选中plugins/templates/plugin.js
config.templates_replaceContent = true;

//主题
config.theme = 'default';

//撤销的记录步数plugins/undo/plugin.js
config.undoStackSize =20;

//示例2：工具栏为自定义类型
CKEDITOR.replace( 'editor1',
{
toolbar :
[
//加粗     斜体，     下划线     穿过线      下标字        上标字
['Bold','Italic','Underline','Strike','Subscript','Superscript'],
//数字列表         实体列表           减小缩进    增大缩进
['NumberedList','BulletedList','-','Outdent','Indent'],
//左对齐            居中对齐         右对齐         两端对齐
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
//超链接取消超链接锚点
['Link','Unlink','Anchor'],
//图片    flash    表格       水平线           表情       特殊字符        分页符
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
//样式       格式      字体   字体大小
['Styles','Format','Font','FontSize'],
//文本颜色     背景颜色
['TextColor','BGColor'],
//全屏          显示区块
['Maximize', 'ShowBlocks','-']
]
}
);

6、在页面即时配置编辑器

可通过<script>CKEDITOR.replace(“textarea的ID”,{属性})</script>

如配置编辑器大小，只需<script>CKEDITOR.replace(“textarea的ID”,{width:’300px’height:’100px’})</script>

二、注意事项

1、在使用Ajax提交表单时，要在调用Ajax方法之前添加

for( instance in CKEDITOR.instances ){ CKEDITOR.instances[instance].updateElement();}

以防止在servlet中获取不到CKeditor的值。

2、注意CKEDITOR.replace的书写，ckeditor必须是大写才行。

0 0