CkEditor运用技巧
CkEditor使用技巧转自：http://hunanpengdake.iteye.com/blog/1636632CkEditor使用技巧博客分类：?常用前端
CkEditor使用技巧
转自：http://hunanpengdake.iteye.com/blog/1636632
CkEditor使用技巧
博客分类：?常用前端框架<textarea id="editor1" src="js/ckeditor/ckeditor.js"></script>?
??? <script type="text/javascript">?
??? <!--?
???? functiononLoad(){?
?????? CKEDITOR.replace("editor2");?
???? }?
??? //-->?
??? </script>?
? </head>?
? <body onload="returnonLoad(); ">?
??? <div id="editor2"><strong>Sample</strong> Text</div>?
? </body>?
</html>?
CKEDITOR.replace("editor2");?
CKEditor会在<body>元素中先按name来查找<div>元素或<textarea>元素为"editor2"，查找不到，再按 id 来查找。?
在通常的 CKEditor 应用中，用CKEDITOR.replace()传递更多的参数，来定制我们需要的编辑器。?
如：?
<html>?
? <head>?
? <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>?
? <script type="text/javascript">?
? <!--?
? functiononLoad() {?
??? CKEDITOR.replace("editor2", {?
??? toolbar: [?
????? ['Bold','Italic','Underline','Strike'], ['Cut','Copy','Paste'],?
????? ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],?
????? ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']?
??? ]?
?? });?
? }?
? // -->?
</script>?
</head>?
<body onload="returnonLoad();">?
?? <div id="editor2">Sample text</textarea>?
</body>?
</html>?
CKEditor菜单栏配置可以参见其官网上的文：http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar。?
设置编辑器皮肤、宽高?
<textarea? cols="90" rows="10" id="content" name="content">ckeditor</textarea>?
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>?
<script type="text/javascript">?
<!--?
??? CKEDITOR.replace("content",?
??? {?
????????? skin: "kama", width:700, height:300?
??? });?
//-->?
</script>?
设置值?
CKEDITOR.instances.content.setData("test"); // content 就是前面 CKEDITOR.replace 的第一个参数值?
或var editor = CKEDITOR.replace("content");?
editor.setData("test");?
取值?
alert(CKEDITOR.instances.content.getData() );// content 就是前面 CKEDITOR.replace 的第一个参数值?
或var editor = CKEDITOR.replace("content");?
alert(editor.getData());?
插入图片?
若要演示此示例，最好是放在按钮的事件处理程序中，目的是有些延迟。?
CKEDITOR.instances.content.insertHtml("<img src=...>");?
配置编辑器?
ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：?
??? config.language = 'zh-cn';// 界面语言，默认为 'en'?
??? config.width = 400; // 设置宽高?
??? config.height = 400;// 设置高度?
??? config.skin = 'v2';// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'?
??? config.uiColor = '#FFF'; // 背景颜色?
Ckeditor工具栏自定义设置?
// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js?
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'],?
? ['Maximize', 'ShowBlocks','-','About']?
];?
config.toolbar_Basic =?
[?
? ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']?
];?
上述代码中第一行，即为设定默认工具栏的，可以改写为：config.toolbar = 'Basic';?
也可以用js代码调用Ckeditor时设置：?
CKEDITOR.replace( 'editor1',?
? {?
??? toolbar :????
??? [????????
????? ['Styles', 'Format'],?
????? ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']?
??? ]?
?? });?
以上两种方法的综合?
CKEDITOR.replace( 'editor1',?
{?
???? toolbar : 'Full'?
});?
CKEDITOR.replace( 'editor2',?
{?
??? toolbar : 'Basic'?
);?
config.toolbarCanCollapse = true;//工具栏是否可以被收缩?
config.toolbarLocation = 'top';//可选：bottom//工具栏的位置?
config.toolbarStartupExpanded = true;//工具栏默认是否展开?
config.resize_enabled = false;// 取消 "拖拽以改变尺寸"功能 plugins/resize/plugin.js?
config.autoUpdateElement = true;// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据?
config.resize_maxHeight = 3000;//改变大小的最大高度?
config.resize_maxWidth = 3000;//改变大小的最大宽度?
config.resize_minHeight = 250;//改变大小的最小高度?
config.resize_minWidth = 750;//改变大小的最小宽度?
//设置快捷键?
config.keystrokes = [?
??????? [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销?
??????? [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做?
??????? [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //?
??????? [ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接?
??????? [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体?
??????? [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体?
??????? [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线?
??????? [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]?
??? ]?
??? //设置快捷键 可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js.?
??? config.blockedKeystrokes = [?
??????? CKEDITOR.CTRL + 66 /*B*/,?
??????? CKEDITOR.CTRL + 73 /*I*/,?
??????? CKEDITOR.CTRL + 85 /*U*/?
??? ]?
???
??? //设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js.?
??? config.colorButton_backStyle = {?
??????? element : 'span',?
??????? styles : { 'background-color' : '#(color)' }?
??? }?
??? //区块的前景色默认值设置 plugins/colorbutton/plugin.js?
??? config.colorButton_foreStyle = {?
??????? element : 'span',?
??????? styles : { 'color' : '#(color)' }?
??? };?
Ckeditor语言、字体及皮肤样式自定义?
Ckeditor支持多国语言，并提供三种皮肤样式：kama、office2003和v2 ，可以在Ckeditor根目录下的config.js文件中进行设置：?
config.language = 'zh-cn' ;?
config.skin = 'office2003';?
也可以在js调用Ckeditor时设置：?
CKEDITOR.replace( 'editor1',{?
??????? toolbar : 'Full',?
??? language : 'zh-cn',?
??? skin : 'office2003'?
});?
config.contentsCss = './contents.css';//所需要添加的CSS文件 在此添加 可使用相对路径和网站的绝对路径?
config.enterMode = CKEDITOR.ENTER_P; //回车产生的标签,可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV?
config.font_defaultLabel = 'Arial';//默认的字体名 plugins/font/plugin.js?
Ckeditor添加中文字体?
在Ckeditor根目录下的config.js文件中添加：?
config.font_names = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS';?
在用js代码调用Ckeditor时添加：?
CKEDITOR.replace( 'editor1', {?
??? toolbar : 'Full',?
??? language : 'zh-cn',?
??? skin : 'office2003',?
??? config.font_names : '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS'?
});?
一些使用技巧?
1、在页面中即时设置编辑器?
<script type="text/javascript">?
??? //示例1：设置工具栏为基本工具栏，高度为70?
???? CKEDITOR.replace('<%=tbLink.ClientID.Replace("_","$") %>',?
???????? { toolbar:'Basic', height:70 });?
??? //示例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','-']?
????????????? ]?
????????? }?
???? );?
</script>?
精简ckeditor?
在部署到Web服务器上时，下列文件夹和文件都可以删除：?
/_samples ：示例文件夹；?
/_source ：未压缩源程序；?
/lang文件夹下除 zh-cn.js、en.js 以外的文件（也可以根据需要保留其他语言文件）；?
根目录下的 changes.html(更新列表)，install.html(安装指向)，license.html(使用许可)；?
/skins 目录下不需要的皮肤，一般用V2(简单，朴素) ，如果只保留V2则必须在config.js中指定皮肤。
