CKEditor + CKFinder 配置.doc

CKEditor + CKFinder 配置2010年04月21日 星期三 23:14CKEditor：1.解压CKEditor到webRoot目录，在应用页面加载其ckeditor.js ;2.页面textarea：CKFinder：3.解压CKFinder到webRoot目录（最好与CKEditor同级），在应用页面加载其ckfinder.js ;4.页面script：（最好textarea之后）if (typeof CKEDITOR = undefined) document.write(加载CKEditor失败);else var editor = CKEDITOR.replace(editor1);CKFinder.SetupCKEditor(editor, ./ckeditor/ckfinder/); /ckfinder总目录的相对路径.整合：（把俩js加载到同一文件其实就已经基本整合好了，还需要修改的配置如下）5.打开ckfinderconfig.php，修改$baseUrl = （上传附件的存放路径）; /以webRoot为起始的绝对路径，其目录下会自动生成images、flash等子目录；默认是在webRoot的根目录下，注意修改。至此配置完毕，如果需要自定义界面，可进行以下的高级修改：6.在ckeditorconfig.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码：/字体. config.font_names = 宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana; /工具按钮. config.toolbar= 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.width = 500; /高度 config.height = 400; /皮肤 config.skin=v2;安装CKFinder后才能有上传功能:第二步：设置CKFinder的上传功能由于本次CKEditor全新改版，没有提供文件上传功能，所以选择整合CKFinder是个不错的选择需要修改一下CKEditor插件文件夹下的JS源码，以image插件为例（Flash及Files同理）：Code/将下边的代码做一些修改/type:button,id:browse,align:center,label:mon.browseServer,hidden:false,filebrowser:info:txtUrl,/2009-07-13 将浏览服务器按钮置为显示状态 （hidden: false）,增加onClick函数，用于打开ckfinder页面,紧接着上面的代码添加 type: button, id: browse, align: center, label: mon.browseServer, hidden: false, filebrowser: info:txtUrl, onClick: function() var finder = new CKFinder(); finder.BasePath = ./ckfinder20090716/; finder.SelectFunction = SetFileField; finder.Popup(); ,在方法体外增加下边的函数/用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值function SetFileField(fileUrl) /获取主Div下的所有文本框控件 var inputStr = document.getElementById(cke_txtContent_dialog).getElementsByTagName(Input); for(var i=0; iinputStr.length; i+) if(inputStri.type=text) /第一个输入框控件是图像路径，得到ID，设置新的图片路径 CKEDITOR.document.getById(inputStri.id).setValue(fileUrl); break ; CKEDITOR.document.getById(previewImage).setAttribute(src, decodeURI(fileUrl);第三步：CKFINDER上传问题：出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“整合后会出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“The Solution:1. There is no write access for the default upload folder $baseUrl = /userfiles/; in ckfinder/config.php.对于目标文件夹$baseUrl = /userfiles/;没有写入权限2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不