《ckeditor配置及使用技巧、精简教程（超详细）》由会员分享，可在线阅读，更多相关《ckeditor配置及使用技巧、精简教程（超详细）（10页珍藏版）》请在金锄头文库上搜索。
1、一、使用方法：1、在页面中引入ckeditor核心文件ckeditor.js2、在使用编辑器的地方插入HTML控件如果是ASP.NET环境，也可用服务器端控件注意在控件中加上 class=ckeditor 。3、将相应的控件替换成编辑器代码CKEDITOR.replace(TextArea1);/如果是在ASP.NET环境下用的服务器端控 件CKEDITOR.replace(tbContent);/如 果控件在母版页中，要这样写CKEDITOR.replace();4、配置编辑器ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：/ 界面语言
2、，默认为 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,N
3、ewPage,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,Bu
4、lletedList,-,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 = to
5、p;/可选：bottom /工具栏默认是否展开config.toolbarStartupExpanded = true;/ 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.jsconfig.resize_enabled = false; /改变大小的最大高度 config.resize_maxHeight = 3000; /改变大小的最大宽度config.resize_maxWidth = 3000; /改变大小的最小高度config.resize_minHeight = 250; /改变大小的最小宽度config.resize_minWidth = 750;/ 当提
6、交包含有此编辑器的表单时，是否自动更新元素内的数据config.autoUpdateElement = true;/ 设置是使用绝对目录还是相对目录，为空为相对目录config.baseHref = / 编辑器的z-index值config.baseFloatZIndex = 10000;/设置快捷键config.keystrokes = CKEDITOR.ALT + 121 /*F10*/, toolbarFocus , /获取焦点 CKEDITOR.ALT + 122 /*F11*/, elementsPathFocus , /元素焦点 CKEDITOR.SHIFT + 121 /*F10
7、*/, contextMenu , /文本菜单 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 ,
8、 /下划线 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 : b
9、ackground-color : #(color) /设置前景色的取值 plugins/colorbutton/plugin.jsconfig.colorButton_colors = 000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520, 006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE, A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD
10、,D3D3D3,FFF0F5, FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF /是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.jsconfig.colorButton_enableMore = false /区块的前景色默认值设置 plugins/colorbutton/plugin.jsconfig.colorButton_foreStyle = element : span,styles : color : #(color) ; /所需要添加的CSS文件 在此添加 可使用相对路径和网站的绝对路径co
11、nfig.contentsCss = ./contents.css; /文字方向config.contentsLangDirection = rtl; /从左到右 /CKeditor的配置文件 若不想配置 留空即可CKEDITOR.replace( myfiled, customConfig : ./config.js ); /界面编辑框的背景色 plugins/dialog/plugin.jsconfig.dialog_backgroundCoverColor = #fffefd; /可设置参考config.dialog_backgroundCoverColor = white /默认 /背
12、景的不透明度 数值应该在：0.01.0 之间 plugins/dialog/plugin.jsconfig.dialog_backgroundCoverOpacity = 0.5 /移动或者改变元素时 边框的吸附距离 单位：像素 plugins/dialog/plugin.jsconfig.dialog_magnetDistance = 20; /是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.config.disableNativeSpellChecker = true /进行表格编辑功能 如：添加行
13、或列 目前仅firefox支持 plugins/wysiwygarea/plugin.jsconfig.disableNativeTableHandles = true; /默认为不开启 /是否开启 图片和表格 的改变大小的功能 config.disableObjectResizing = true;config.disableObjectResizing = false /默认为开启 /设置HTML文档类型config.docType = !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN http:/www.w3.org/TR/xhtml1/DTD/x
