CKEditor编辑器的详细使用

左手的ㄟ右手 2022-08-02 00:28 456阅读 0赞

**安装：**

1.下载CKEDITOR的文件，解压后复制到工程的WEBROOT目录下就OK！

**替换TEXTAREA标签：**

< textarea  rows ="30"  cols ="50"  name ="editor01" > 请输入![dot.gif][]. </ textarea >   
 < script  type ="text/javascript" > CKEDITOR.replace( ' editor01 ' ); </ script >

注意：要在textarea后面加入javascript.如果要在HEAD区写javasript,那么采用如下代码：

< script  type ="text/javascript" >   
    window.onload  =   function ()  
    \{  
        CKEDITOR.replace(  ' editor01 '  );  
    \};  
 </ script >

好了到此一个默认的CKEDITOR就配置完毕了，可以去页面看看它的模样了。![大笑][laugh.gif]

**常用CKEditot的相关属性配置：**

**   **CKEDITOR.editorConfig = function( config ) \{  
    config.toolbar = \[  
                           \['Source','-','Preview','Print','-','Templates'\],  
                           \['Cut','Copy','Paste','PasteText','PasteFromWord','-', 'SpellChecker', 'Scayt'\],  
                           \['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat','-','Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'\],  
                           \['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'\],  
                           \['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'\],  
                           \['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'\],  
                           \['Link','Unlink','Anchor'\],  
                           '/',  
                           \['Bold','Italic','Underline','Strike','TextColor','BGColor','-','Styles','Format','Font','FontSize'\],  
                           \['Maximize', 'ShowBlocks'\]  
                           \];  
    // 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js  
    config.toolbar = 'Full';  
    // not needed in the Standard(s) toolbar.  
    config.removeButtons = 'Underline,Subscript,Superscript';  
  
    // Set the most common block elements.  
    config.format\_tags = 'p;h1;h2;h3;pre';  
  
    // Simplify the dialog windows.  
    config.removeDialogTabs = 'image:advanced;link:advanced';

config.filebrowserImageUploadUrl = userImgUploadUrl; //文件上传路径  
    config.language = 'en'; //配置语言 默认的语言为en

//工具栏是否可以被收缩  
    config.toolbarCanCollapse = true;  
    //工具栏的位置  
    config.toolbarLocation = 'top';//可选：bottom  
    //工具栏默认是否展开  
    config.toolbarStartupExpanded = true;  
    // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js  
    config.resize\_enabled = false;  
    //改变大小的最大高度  
    config.resize\_maxHeight = 3000;  
    //改变大小的最大宽度  
    config.resize\_maxWidth = 3000;  
    //改变大小的最小高度  
    config.resize\_minHeight = 250;  
    //改变大小的最小宽度  
    config.resize\_minWidth = 750;  
    // 当提交包含有此编辑器的表单时，是否自动更新元素内的数据  
    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\*/, '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' \],  //下划线  
        \[ 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\_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,D3D3D3,FFF0F5,  
        FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF’    //是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.js  
    config.colorButton\_enableMore = false  
    //区块的前景色默认值设置 plugins/colorbutton/plugin.js  
    config.colorButton\_foreStyle = \{  
        element : 'span',  
        styles : \{ 'color' : '\#(color)' \}  
    \};  
    //所需要添加的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' //默认  
    //背景的不透明度 数值应该在：0.0～1.0 之间 plugins/dialog/plugin.js  
    config.dialog\_backgroundCoverOpacity = 0.5  
    //移动或者改变元素时 边框的吸附距离 单位：像素 plugins/dialog/plugin.js  
    config.dialog\_magnetDistance = 20;  
    //是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.  
    config.disableNativeSpellChecker = true  
    //进行表格编辑功能 如：添加行或列 目前仅firefox支持 plugins/wysiwygarea/plugin.js  
    config.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/xhtml1-transitional.dtd%22' ;  
  
    //是否对编辑区域进行渲染 plugins/editingblock/plugin.js  
    config.editingBlock = true;  
    //编辑器中回车产生的标签  
    config.enterMode = CKEDITOR.ENTER\_P; //可选：CKEDITOR.ENTER\_BR或CKEDITOR.ENTER\_DIV  
    //是否使用HTML实体进行输出 plugins/entities/plugin.js  
    config.entities = true;  
    //定义更多的实体 plugins/entities/plugin.js  
    config.entities\_additional = '\#39'; //其中\#代替了&  
    //是否转换一些难以显示的字符为相应的HTML字符 plugins/entities/plugin.js  
    config.entities\_greek = true;  
    //是否转换一些拉丁字符为HTML plugins/entities/plugin.js  
    config.entities\_latin = true;  
    //是否转换一些特殊字符为ASCII字符 如"This is Chinese: 汉语."转换为"This is Chinese: 汉语." plugins/entities/plugin.js  
    config.entities\_processNumerical = false;  
    //添加新组件  
    config.extraPlugins = 'myplugin'; //非默认 仅示例  
    //使用搜索时的高亮色 plugins/find/plugin.js  
    config.find\_highlight = \{  
        element : 'span',  
        styles : \{ 'background-color' : '\#ff0', 'color' : '\#00f' \}  
    \};  
    //默认的字体名 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/htmldataprocessor/plugin.js  
    config.forceSimpleAmpersand = false;  
    //对address标签进行格式化 plugins/format/plugin.js  
    config.format\_address = \{ element : 'address', attributes : \{ class : 'styledAddress' \} \};  
    //对DIV标签自动进行格式化 plugins/format/plugin.js  
    config.format\_div = \{ element : 'div', attributes : \{ class : 'normalDiv' \} \};  
    //对H1标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h1', attributes : \{ class : 'contentTitle1' \} \};  
    //对H2标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h2 = \{ element : 'h2', attributes : \{ class : 'contentTitle2' \} \};  
    //对H3标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h3', attributes : \{ class : 'contentTitle3' \} \};  
    //对H4标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h4', attributes : \{ class : 'contentTitle4' \} \};  
    //对H5标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h5', attributes : \{ class : 'contentTitle5' \} \};  
    //对H6标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h6', attributes : \{ class : 'contentTitle6' \} \};  
    //对P标签自动进行格式化 plugins/format/plugin.js  
    config.format\_p = \{ element : 'p', attributes : \{ class : 'normalPara' \} \};  
    //对PRE标签自动进行格式化 plugins/format/plugin.js  
    config.format\_pre = \{ element : 'pre', attributes : \{ class : 'code' \} \};  
    //用分号分隔的标签名字 在工具栏上显示 plugins/format/plugin.js  
    config.format\_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';  
    //是否使用完整的html编辑模式 如使用，其源码将包含：<html><body></body></html>等标签  
    config.fullPage = false;  
    //是否忽略段落中的空字符 若不忽略 则字符将以“”表示 plugins/wysiwygarea/plugin.js  
    config.ignoreEmptyParagraph = true;  
    //在清除图片属性框中的链接属性时 是否同时清除两边的<a>标签 plugins/image/plugin.js  
    config.image\_removeLinkByEmptyURL = true;  
    //一组用逗号分隔的标签名称，显示在左下角的层次嵌套中 plugins/menu/plugin.js.  
    config.menu\_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';  
    //显示子菜单时的延迟，单位：ms plugins/menu/plugin.js  
    config.menu\_subMenuDelay = 400;  
    //当执行“新建”命令时，编辑器中的内容 plugins/newpage/plugin.js  
    config.newpage\_html = '';  
    //当从word里复制文字进来时，是否进行文字的格式化去除 plugins/pastefromword/plugin.js  
    config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式  
    //是否使用<h1><h2>等标签修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.js  
    config.pasteFromWordKeepsStructure = false;  
    //从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js  
    config.pasteFromWordRemoveStyle = false;  
    //对应后台语言的类型来对输出的HTML内容进行格式化，默认为空  
    config.protectedSource.push( /<"?\["s"S\]\*?"?>/g );   // PHP Code  
    config.protectedSource.push( //g );   // ASP Code  
    config.protectedSource.push( /(\]+>\["s|"S\]\*?<"/asp:\[^">\]+>)|(\]+"/>)/gi );   // ASP.Net Code  
    //当输入：shift+Enter时插入的标签  
    config.shiftEnterMode = CKEDITOR.ENTER\_P;  //可选：CKEDITOR.ENTER\_BR或CKEDITOR.ENTER\_DIV  
    //可选的表情替代字符 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/editingblock/plugin.js plugins/editingblock/plugin.js.  
    config.startupFocus = false;  
    //载入时，以何种方式编辑 源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.  
    config.startupMode ='wysiwyg';  
    //载入时，是否显示框体的边框 plugins/showblocks/plugin.js  
    config.startupOutlineBlocks = false;  
    //是否载入样式文件 plugins/stylescombo/plugin.js.  
    config.stylesCombo\_stylesSet = 'default';  
    //以下为可选  
    config.stylesCombo\_stylesSet = 'mystyles';  
    config.stylesCombo\_stylesSet = 'mystyles:/editorstyles/styles.js';  
    config.stylesCombo\_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';  
    //起始的索引值  
    config.tabIndex = 0;  
    //当用户键入TAB时，编辑器走过的空格数，(&nbsp;) 当值为0时，焦点将移出编辑框 plugins/tab/plugin.js  
    config.tabSpaces = 0;  
    //默认使用的模板 plugins/templates/plugin.js.  
    config.templates = 'default';  
    //用逗号分隔的模板文件plugins/templates/plugin.js.  
    config.templates\_files = \[ 'plugins/templates/templates/default.js' \]  
    //当使用模板时，“编辑内容将被替换”框是否选中 plugins/templates/plugin.js  
    config.templates\_replaceContent = true;  
    //主题  
    config.theme = 'default';  
    //撤销的记录步数 plugins/undo/plugin.js  
    config.undoStackSize =20;  
    // 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。  
    //CKFinder.SetupCKEditor(null, '/ckfinder/');//工具栏是否可以被收缩  
    config.toolbarCanCollapse = true;  
    //工具栏的位置  
    config.toolbarLocation = 'top';//可选：bottom  
    //工具栏默认是否展开  
    config.toolbarStartupExpanded = true;  
    // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js  
    config.resize\_enabled = false;  
    //改变大小的最大高度  
    config.resize\_maxHeight = 3000;  
    //改变大小的最大宽度  
    config.resize\_maxWidth = 3000;  
    //改变大小的最小高度  
    config.resize\_minHeight = 250;  
    //改变大小的最小宽度  
    config.resize\_minWidth = 750;  
    // 当提交包含有此编辑器的表单时，是否自动更新元素内的数据  
    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\*/, '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' \],  //下划线  
        \[ 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\_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,D3D3D3,FFF0F5,  
        FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF’    //是否在选择颜色时显示“其它颜色”选项 plugins/colorbutton/plugin.js  
    config.colorButton\_enableMore = false  
    //区块的前景色默认值设置 plugins/colorbutton/plugin.js  
    config.colorButton\_foreStyle = \{  
        element : 'span',  
        styles : \{ 'color' : '\#(color)' \}  
    \};  
    //所需要添加的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' //默认  
    //背景的不透明度 数值应该在：0.0～1.0 之间 plugins/dialog/plugin.js  
    config.dialog\_backgroundCoverOpacity = 0.5  
    //移动或者改变元素时 边框的吸附距离 单位：像素 plugins/dialog/plugin.js  
    config.dialog\_magnetDistance = 20;  
    //是否拒绝本地拼写检查和提示 默认为拒绝 目前仅firefox和safari支持 plugins/wysiwygarea/plugin.js.  
    config.disableNativeSpellChecker = true  
    //进行表格编辑功能 如：添加行或列 目前仅firefox支持 plugins/wysiwygarea/plugin.js  
    config.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/xhtml1-transitional.dtd%22' ;  
  
    //是否对编辑区域进行渲染 plugins/editingblock/plugin.js  
    config.editingBlock = true;  
    //编辑器中回车产生的标签  
    config.enterMode = CKEDITOR.ENTER\_P; //可选：CKEDITOR.ENTER\_BR或CKEDITOR.ENTER\_DIV  
    //是否使用HTML实体进行输出 plugins/entities/plugin.js  
    config.entities = true;  
    //定义更多的实体 plugins/entities/plugin.js  
    config.entities\_additional = '\#39'; //其中\#代替了&  
    //是否转换一些难以显示的字符为相应的HTML字符 plugins/entities/plugin.js  
    config.entities\_greek = true;  
    //是否转换一些拉丁字符为HTML plugins/entities/plugin.js  
    config.entities\_latin = true;  
    //是否转换一些特殊字符为ASCII字符 如"This is Chinese: 汉语."转换为"This is Chinese: 汉语." plugins/entities/plugin.js  
    config.entities\_processNumerical = false;  
    //添加新组件  
    config.extraPlugins = 'myplugin'; //非默认 仅示例  
    //使用搜索时的高亮色 plugins/find/plugin.js  
    config.find\_highlight = \{  
        element : 'span',  
        styles : \{ 'background-color' : '\#ff0', 'color' : '\#00f' \}  
    \};  
    //默认的字体名 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/htmldataprocessor/plugin.js  
    config.forceSimpleAmpersand = false;  
    //对address标签进行格式化 plugins/format/plugin.js  
    config.format\_address = \{ element : 'address', attributes : \{ class : 'styledAddress' \} \};  
    //对DIV标签自动进行格式化 plugins/format/plugin.js  
    config.format\_div = \{ element : 'div', attributes : \{ class : 'normalDiv' \} \};  
    //对H1标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h1', attributes : \{ class : 'contentTitle1' \} \};  
    //对H2标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h2 = \{ element : 'h2', attributes : \{ class : 'contentTitle2' \} \};  
    //对H3标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h3', attributes : \{ class : 'contentTitle3' \} \};  
    //对H4标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h4', attributes : \{ class : 'contentTitle4' \} \};  
    //对H5标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h5', attributes : \{ class : 'contentTitle5' \} \};  
    //对H6标签自动进行格式化 plugins/format/plugin.js  
    config.format\_h1 = \{ element : 'h6', attributes : \{ class : 'contentTitle6' \} \};  
    //对P标签自动进行格式化 plugins/format/plugin.js  
    config.format\_p = \{ element : 'p', attributes : \{ class : 'normalPara' \} \};  
    //对PRE标签自动进行格式化 plugins/format/plugin.js  
    config.format\_pre = \{ element : 'pre', attributes : \{ class : 'code' \} \};  
    //用分号分隔的标签名字 在工具栏上显示 plugins/format/plugin.js  
    config.format\_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';  
    //是否使用完整的html编辑模式 如使用，其源码将包含：<html><body></body></html>等标签  
    config.fullPage = false;  
    //是否忽略段落中的空字符 若不忽略 则字符将以“”表示 plugins/wysiwygarea/plugin.js  
    config.ignoreEmptyParagraph = true;  
    //在清除图片属性框中的链接属性时 是否同时清除两边的<a>标签 plugins/image/plugin.js  
    config.image\_removeLinkByEmptyURL = true;  
    //一组用逗号分隔的标签名称，显示在左下角的层次嵌套中 plugins/menu/plugin.js.  
    config.menu\_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';  
    //显示子菜单时的延迟，单位：ms plugins/menu/plugin.js  
    config.menu\_subMenuDelay = 400;  
    //当执行“新建”命令时，编辑器中的内容 plugins/newpage/plugin.js  
    config.newpage\_html = '';  
    //当从word里复制文字进来时，是否进行文字的格式化去除 plugins/pastefromword/plugin.js  
    config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式  
    //是否使用<h1><h2>等标签修饰或者代替从word文档中粘贴过来的内容 plugins/pastefromword/plugin.js  
    config.pasteFromWordKeepsStructure = false;  
    //从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.js  
    config.pasteFromWordRemoveStyle = false;  
    //对应后台语言的类型来对输出的HTML内容进行格式化，默认为空  
    config.protectedSource.push( /<"?\["s"S\]\*?"?>/g );   // PHP Code  
    config.protectedSource.push( //g );   // ASP Code  
    config.protectedSource.push( /(\]+>\["s|"S\]\*?<"/asp:\[^">\]+>)|(\]+"/>)/gi );   // ASP.Net Code  
    //当输入：shift+Enter时插入的标签  
    config.shiftEnterMode = CKEDITOR.ENTER\_P;  //可选：CKEDITOR.ENTER\_BR或CKEDITOR.ENTER\_DIV  
    //可选的表情替代字符 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/editingblock/plugin.js plugins/editingblock/plugin.js.  
    config.startupFocus = false;  
    //载入时，以何种方式编辑 源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.  
    config.startupMode ='wysiwyg';  
    //载入时，是否显示框体的边框 plugins/showblocks/plugin.js  
    config.startupOutlineBlocks = false;  
    //是否载入样式文件 plugins/stylescombo/plugin.js.  
    config.stylesCombo\_stylesSet = 'default';  
    //以下为可选  
    config.stylesCombo\_stylesSet = 'mystyles';  
    config.stylesCombo\_stylesSet = 'mystyles:/editorstyles/styles.js';  
    config.stylesCombo\_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';  
    //起始的索引值  
    config.tabIndex = 0;  
    //当用户键入TAB时，编辑器走过的空格数，(&nbsp;) 当值为0时，焦点将移出编辑框 plugins/tab/plugin.js  
    config.tabSpaces = 0;  
    //默认使用的模板 plugins/templates/plugin.js.  
    config.templates = 'default';  
    //用逗号分隔的模板文件plugins/templates/plugin.js.  
    config.templates\_files = \[ 'plugins/templates/templates/default.js' \]  
    //当使用模板时，“编辑内容将被替换”框是否选中 plugins/templates/plugin.js  
    config.templates\_replaceContent = true;  
    //主题  
    config.theme = 'default';  
    //撤销的记录步数 plugins/undo/plugin.js  
    config.undoStackSize =20;  
    // 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。  
    //CKFinder.SetupCKEditor(null, '/ckfinder/');

\};

对于文件上传的变量,可以页面引用的js文件配置

关于CKEditor编辑器图片上传的问题

CKEditor的编辑器工具栏中有一项“图片域”，该工具可以贴上图片地址来在文本编辑器中加入图片，但是没有图片上传。

![1340342717_6524.jpg][]

“预览”中有一大堆鸟语，看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image\_previewText”就能找到这段鸟语了，(b.config.image\_previewText||'')单引号中的内容全删了，注意别删多了。

扫除这个障碍，下面来研究图片上传。

**1.**首先，还是image.js这个文件，搜索“upload”可以找到这一段

id:'Upload',hidden:true

实际上上传功能被隐藏了，把上面的true改成false，再打开编辑器，就能找到上传功能了。

![1340342845_4135.jpg][]

**2.**上面的只是一个上传页面。也就相当于一个HTML的form表单，要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。

加入：

config.filebrowserUploadUrl="actions/ckeditorUpload";

var pathName = window.document.location.pathname;  
    //获取带"/"的项目名，如：/uimcardprj  
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);  
    config.filebrowserImageUploadUrl = projectName+'/system/upload.do'; //固定路径

"ckeditorUpload"是请求的URL，也就是点击这个按钮就会post到ckeditorUpload地址进行处理，这里指向的是Struts 2的一个Action。当然，也可以用servlet或者ASP、PHP等来处理请求。

**3.**文件上传的控件相当于<input  type="file" name="**upload**" .../>，其name是”**upload**”，知道了name那么就可以在Action中获取这个文件。

private File upload;  //文件

private String uploadContentType;  //文件类型

private String uploadFileName;   //文件名

以上三个私有变量都要有set方法。如果不了解的话可以先学习一下Struts 2文件上传。

**4.**如果上传的图片格式不正确，可以在上传界面进行提示。

![1340343078_7608.png][]

这个提示不是ckeditor提示的，要在Action中响应。

HttpServletResponse response =ServletActionContext.getResponse();

response.setCharacterEncoding("GBK");

PrintWriter out = response.getWriter();

if(???)\{

out.print("<font color=\\"red\\"size=\\"2\\">\*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）</font>");

return null;

**5.**

InputStream is = newFileInputStream(upload);

String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/postImg");   //设置保存目录

String fileName =java.util.UUID.randomUUID(); //采用UUID的方式随机命名

fileName+= uploadFileName.substring(uploadFileName.length() - 4);

File toFile = new File(uploadPath, fileName);

OutputStream os = new FileOutputStream(toFile);

byte\[\] buffer = new byte\[1024\];

int length = 0;

while ((length = is.read(buffer)) > 0) \{

os.write(buffer, 0, length);

is.close();

os.close();

这段代码是Struts 2上传图片的核心代码，把图片上传后保存在项目的某个目录下，并随机重命名。

**6.**图片上传成功，在目录下也可以看到图片，至此图片上传成功。但是如何将图片发到编辑器中呢？

点“确定”按钮会有以下提示。

![1340343173_4025.png][]

到这里，要在Action中加入一段JS。

String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum");

out.println("<scripttype=\\"text/javascript\\">");

out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +"img/postImg/"+ fileName \+ "','')");

out.println("</script>");

有了这段代码，图片上传成功后，根据这里的

"img/postImg/" + filename

相对地址，就可以使用这个图片，直接转到“图像”页面。

![1340343223_8249.png][]

附：Struts 2 Action代码

**\[java\]** [ view plain][view plain] [copy][view plain]

1.  public class CkeditorUpload extends ActionSupport \{  
2.    
3.      private File upload;  
4.      private String uploadContentType;  
5.      private String uploadFileName;  
6.    
7.    
8.      public File getUpload() \{  
9.          return upload;  
10.     \}  
11.   
12.     public void setUpload(File upload) \{  
13.           
14.         this.upload = upload;  
15.     \}  
16.   
17.     public String getUploadContentType() \{  
18.         return uploadContentType;  
19.     \}  
20.   
21.     public void setUploadContentType(String uploadContentType) \{  
22.         this.uploadContentType = uploadContentType;  
23.     \}  
24.   
25.     public String getUploadFileName() \{  
26.         return uploadFileName;  
27.     \}  
28.   
29.     public void setUploadFileName(String uploadFileName) \{  
30.         this.uploadFileName = uploadFileName;   \}  
31.   
32.     public String execute() throws Exception \{  
33.         HttpServletResponse response = ServletActionContext.getResponse();  
34.         response.setCharacterEncoding("GBK");  
35.         PrintWriter out = response.getWriter();  
36.   
37.   
38.         //对文件进行校验  
39.         if(upload==null || uploadContentType==null || uploadFileName==null)\{  
40.             out.print("<font color=\\"red\\" size=\\"2\\">\*请选择上传文件</font>");  
41.             return null;  
42.         \}  
43.           
44.         if ((uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg"))  
45.                 && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".jpg")) \{  
46.             //IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg  
47.         \}else if(uploadContentType.equals("image/png") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".png"))\{  
48.               
49.         \}else if(uploadContentType.equals("image/gif") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".gif"))\{  
50.               
51.         \}else if(uploadContentType.equals("image/bmp") && uploadFileName.substring(uploadFileName.length() - 4).toLowerCase().equals(".bmp"))\{  
52.               
53.         \}else\{  
54.             out.print("<font color=\\"red\\" size=\\"2\\">\*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）</font>");  
55.             return null;  
56.         \}  
57.           
58.         if(upload.length() > 600\*1024)\{  
59.             out.print("<font color=\\"red\\" size=\\"2\\">\*文件大小不得大于600k</font>");  
60.             return null;  
61.         \}  
62.           
63.         //将文件保存到项目目录下  
64.         InputStream is = new FileInputStream(upload);  
65.         String uploadPath = ServletActionContext.getServletContext()     
66.                 .getRealPath("/img/postImg");   //设置保存目录  
67.         String fileName = java.util.UUID.randomUUID();  //采用UUID的方式随机命名  
68.         fileName += uploadFileName.substring(uploadFileName.length() - 4);  
69.         File toFile = new File(uploadPath, fileName);  
70.         OutputStream os = new FileOutputStream(toFile);     
71.         byte\[\] buffer = new byte\[1024\];     
72.         int length = 0;  
73.         while ((length = is.read(buffer)) > 0) \{     
74.             os.write(buffer, 0, length);     
75.         \}     
76.         is.close();  
77.         os.close();  
78.           
79.           
80.         //设置返回“图像”选项卡  
81.         String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");    
82.         out.println("<script type=\\"text/javascript\\">");    
83.         out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "img/postImg/" + fileName + "','')");    
84.         out.println("</script>");  
85.   
86.           
87.         return null;  
88.     \}  
89. \}

作者：叉叉哥   转载请注明出处： [http://blog.csdn.net/xiao\_\_gui/article/details/7684505][http_blog.csdn.net_xiao_gui_article_details_7684505]

[dot.gif]: /images/20220731/fa6627d8054140a8887098edda025447.png
[laugh.gif]: /images/20220731/113c124cea5c4e90814695db8d1e8d30.png
[1340342717_6524.jpg]: https://img-my.csdn.net/uploads/201206/22/1340342717_6524.jpg
[1340342845_4135.jpg]: https://img-my.csdn.net/uploads/201206/22/1340342845_4135.jpg
[1340343078_7608.png]: https://img-my.csdn.net/uploads/201206/22/1340343078_7608.png
[1340343173_4025.png]: https://img-my.csdn.net/uploads/201206/22/1340343173_4025.png
[1340343223_8249.png]: https://img-my.csdn.net/uploads/201206/22/1340343223_8249.png
[view plain]: http://blog.csdn.net/xiao__gui/article/details/7684505#
[http_blog.csdn.net_xiao_gui_article_details_7684505]: http://blog.csdn.net/xiao__gui/article/details/7684505