/*made by kenshin 2010.1.11 */ ckfinder+ckeditor組合PHP下配置 功能介紹 ckeditor：可視化編輯器。 ckfinder：文件管理，圖片上傳。 版本介紹 ckeditor：3.4.2 開源 ckfinder：2.0.1 要錢 配置說明 首先去官方下載 解壓，放在web服務器下。 然后需要添加的頁面這樣設置 1.head標簽中加入導入兩個JS文件 <script type="text/javascript" src="../ckeditor/ckeditor.js"></script> <script type="text/javascript" src="../ckfinder/ckfinder.js"></script> 2.html標簽中 <textarea name="ckcon"></textarea> //注，也可以用ID 3.這里用了比較愚笨的辦法，不過還沒想到更好的方法，以后應該可以改進 在textarea標簽后加JS代碼 <script> CKEDITOR.replace( 'ckcon', { filebrowserBrowseUrl : '相對本頁的路徑/ckfinder/ckfinder.html', filebrowserImageBrowseUrl : '相對本頁的路徑/ckfinder/ckfinder.html?Type=Images', filebrowserFlashBrowseUrl : '相對本頁的路徑/ckfinder/ckfinder.html?Type=Flash', filebrowserUploadUrl : '相對本頁的路徑/ckfinder/core/connector/php/connector.php? command=QuickUpload&type=Files', filebrowserImageUploadUrl : '相對本頁的路徑/ckfinder/core/connector/php/connector.php? command=QuickUpload&type=Images', filebrowserFlashUploadUrl : '相對本頁的路徑/ckfinder/core/connector/php/connector.php? command=QuickUpload&type=Flash' }); </script> 注意：里面的ckcon要和textarea標簽的name或者id對應。還有目錄指向要和自己的配置對應，按照自己的情況修改。只能加在textarea標簽后，加在head標簽處貌似不行。 4.修改2個東東的config文件 ckeditor：ckeditor\config.js文件 我的設置： CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: config.language = 'zh-cn'; //配置語言 // config.uiColor = '#AADC6E'; //配置顏色 config.width = 700; //寬度 config.height = 350; //高度 config.skin='kama'; //工具欄 config.toolbar = [ ['Source','-','Format','Styles','Font','FontSize'], ['Outdent','Indent','Blockquote'], ['Save','NewPage'], '/', ['RemoveFormat','Undo','Redo','-','Bold','Italic','Underline','Strike'], ['Subscript','Superscript','NumberedList','BulletedList'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['PageBreak','Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','-','wpMore'], '/', ['PasteText','Paste','PasteFromWord','Copy','Cut'], ['TextColor','BGColor'], ['Link','Unlink','Anchor'], ['Find','Replace','SpellChecker', 'Scayt'], ['Templates','Preview'], ['ShowBlocks','Maximize','-','About'] ]; }; //注意：這個配置可以去網上搜，也可以自己配。 ckfinder：ckeditor\config.php文件 //注意是PHP文件，不是JS文件 修改$baseUrl = '/news/update/'; //以webRoot為起始的絕對路徑，其目錄下會自動生成images、flash等子目錄；默認是在webRoot的根目錄下，根據自己需要去改。 配置結束 Oh~ ckfinder亂碼問題： 上傳中文文件名會亂碼，解決方法： 1.提示用戶不要上傳中文。（廢話） 2.修改上傳文件的文件名：打開ckfinder\core\connector\php\php5\CommandHandler\FileUpload.php文件 找到： if ($sFileName != $sUnsafeFileName) { $iErrorNumber = CKFINDER_CONNECTOR_ERROR_UPLOADED_INVALID_NAME_RENAMED; } 在后面加上： //以下兩行解決中文亂碼問題 $sExtension = CKFinder_Connector_Utils_FileSystem::getExtension($sFileName); $sFileName = date("Ymd")."_".date("His").".".$sExtension; 單獨使用ckfinder的方法： 以上的配置是ckeditor中使用ckfinder，有時候我們需要單獨使用ckfinder，比如添加附件，添加產品或者新聞的圖片，添加首頁flash等等。這時候我們需要單獨配置ckfinder！！ 首先說明，這個是針對2.0.1版本的，1.4.5版本不適用。 1.head標簽處添加JS代碼 兩個函數 /*ckfinder2.01*/ function BrowseServer(inputId) { var finder = new CKFinder() ; finder.basePath = '../common/ckfinder/'; //導入CKFinder的路徑 finder.selectActionFunction = SetFileField; //設置文件被選中時的函數 finder.selectActionData = inputId; //接收地址的input ID finder.popup() ; } //文件選中時執行 function SetFileField(fileUrl,data) { document.getElementById(data["selectActionData"]).value = fileUrl ; } 2.頁面中加入input <input id="picurl" type="text" name="picurl" value="" /><input type="button" value="pic server" onclick="BrowseServer( 'picurl' );" /> 注意：必須有id，并且id的值和后面的BrowseServer()函數參數值想對應。 來源 PHP100 |
