CKeditor的使用以及一些应该注意的问题
2014-10-12 12:12
459 查看
一、使用方法：
1、下载ckeditor压缩包，把 解压后的ckeditor文件复制到项目的webRoot文件夹小。
2、在页面<head>中引入ckeditor核心文件ckeditor.js
<scripttype="text/javas cript"src="ckeditor/ckeditor.js"></script>
<script> 标签用于定义客户端脚本，比如JavaScript。
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必须是大写才行。
1、下载ckeditor压缩包，把 解压后的ckeditor文件复制到项目的webRoot文件夹小。
2、在页面<head>中引入ckeditor核心文件ckeditor.js
<scripttype="text/javas cript"src="ckeditor/ckeditor.js"></script>
<script> 标签用于定义客户端脚本，比如JavaScript。
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必须是大写才行。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用redis缓存数据需要注意的问题以及个人的一些思考和理解
- crontab与环境变量，以及应该注意的一些问题
- 使用redis缓存数据需要注意的问题以及个人的一些思考和理解
- 关于CKEditor与CKFinder配合使用以及一些注意点总结
- crontab与环境变量，以及应该注意的一些问题
- ~ 使用redis缓存数据需要注意的问题以及个人的一些思考和理解
- linux下网络服务器模型以及使用时应该注意的问题
- 使用redis缓存数据需要注意的问题以及个人的一些思考和理解
- 一些在Hibernate学习中应该注意的问题
- 一个ajax的公共类以及他的使用方式和应该注意的地方
- DIV+CSS页面布局中注意的问题以及常用的CSS使用方法
- 在struts开发中使用validator验证时应该注意的基本问题
- 使用静态数组应该注意的问题
- 使用prototype.js 的时候应该特别注意的几个问题.
- [原创]web application中使用Profile应该注意的问题
- 使用静态数组应该注意的问题
- 在css样式中字体使用应注意的一些问题
- C,C++程序员使用C#应注意的一些小问题
- 使用prototype.js 的时候应该特别注意的几个问题