你怎么能整合一个自定义的文件浏览器/上传与CKEditor？
官方文档不太清楚 – 将CKEditor集成到自定义文件浏览器/上传器的正确方法是什么？ （v3 – 不是FCKEditor）
在实例化CKEditor时，首先注册自定义的浏览器/上传器。 您可以为图片浏览器指定不同的url，也可以指定一般的文件浏览器。
<script type="text/javascript"> CKEDITOR.replace('content', { filebrowserBrowseUrl : '/browser/browse/type/all', filebrowserUploadUrl : '/browser/upload/type/all', filebrowserImageBrowseUrl : '/browser/browse/type/image', filebrowserImageUploadUrl : '/browser/upload/type/image', filebrowserWindowWidth : 800, filebrowserWindowHeight : 500 }); </script> 您的自定义代码将接收一个名为CKEditorFuncNum的GET参数。 保存 – 这是你的callback函数。 假设你把它放到$callback 。
当有人select一个文件，运行这个JavaScript通知CKEditor哪个文件被选中：
window.opener.CKEDITOR.tools.callFunction(<?php echo $callback; ?>,url)
“url”是他们挑选的文件的URL。 可选的第三个参数可以是要在标准警报对话框中显示的文本，例如“非法文件”或其他内容。 如果第三个参数是错误消息，请将url设置为空string。
CKEditor的“上传”选项卡将在“上传”字段中提交一个文件 – 在PHP中，该文件转到$ _FILES ['upload']。 CKEditor希望服务器输出的是一个完整的JavaScript块：
$output = '<html><body><script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$callback.', "'.$url.'","'.$msg.'");</script></body></html>'; echo $output;
同样，您需要为其提供callback参数，文件的URL以及可选的消息。 如果消息是空string，则不显示; 如果消息是一个错误，那么url应该是一个空string。
所有这些官方的CKEditor文档都是不完整的，但是如果你遵循上面的说明，它就像冠军一样工作。
我已经发布了一个关于将旧的FCKEditor中可用的FileBrowser集成到CKEditor的小教程。
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
它包含一步一步的说明，这样做很简单。 我希望有人能find这个教程有帮助。
我只是经历了自己的学习过程。 我知道了，但是我同意这个文档是以一种对我来说很吓人的方式写的。 对我来说这个大“aha”时刻是理解，为了浏览，CKeditor所做的一切都是打开一个新窗口，并在url中提供一些参数。 它允许你添加额外的参数，但build议你需要在你的值上使用encodeURIComponent（）。
我打电话给浏览器和上传者
CKEDITOR.replace( 'body', { filebrowserBrowseUrl: 'browse.php?type=Images&dir=' + encodeURIComponent('content/images'), filebrowserUploadUrl: 'upload.php?type=Files&dir=' + encodeURIComponent('content/images') }
对于浏览器 ，在打开的窗口（browse.php）中，使用php＆js提供选项列表，然后在您提供的onclick处理函数中，使用两个参数调用CKeditor函数，即所选图像的url /path和CKEditor提供的CKEditorFuncNum在url中：
function myOnclickHandler(){ //.. window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, pathToImage); window.close(); }
Simarly， 上传者只需调用您提供的url，例如upload.php ，并再次提供$ _GET ['CKEditorFuncNum']。 目标是一个iframe，所以，当你从$ _FILES保存文件后，你的反馈传递给CKeditor：
$funcNum = $_GET['CKEditorFuncNum']; exit("<script>window.parent.CKEDITOR.tools.callFunction($funcNum, '$filePath', '$errorMessage');</script>");
下面是一个简单的了解自定义浏览器脚本。 虽然它不允许用户在服务器中浏览，但它允许您指定从调用浏览器时的哪个目录中提取图像文件。
这是所有相当基本的编码，所以它应该适用于所有相对较新的浏览器。
CKeditor只是用提供的URL打开一个新的窗口
/* in CKeditor **use encodeURIComponent()** to add dir param to the filebrowserBrowseUrl property Replace content/images with directory where your images are housed. */ CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl: '**browse.php**?type=Images&dir=' + encodeURIComponent('content/images'), filebrowserUploadUrl: 'upload.php?type=Files&dir=' + encodeURIComponent('content/images') });
// =========完整的代码在browse.php下面
<?php header("Content-Type: text/html; charset=utf-8\n"); header("Cache-Control: no-cache, must-revalidate\n"); header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // ez params $dim = 150; /* image displays proportionally within this square dimension ) */ $cols = 4; /* thumbnails per row */ $thumIndicator = '_th'; /* eg, *image123_th.jpg*) -> if not using thumbNails then use empty string */ ?> <!DOCTYPE html> <html> <head> <title>browse file</title> <meta charset="utf-8"> <style> html, body {padding:0; margin:0; background:black; } table {width:100%; border-spacing:15px; } td {text-align:center; padding:5px; background:#181818; } img {border:5px solid #303030; padding:0; verticle-align: middle;} img:hover { border-color:blue; cursor:pointer; } </style> </head> <body> <table> <?php $dir = $_GET['dir']; $dir = rtrim($dir, '/'); // the script will add the ending slash when appropriate $files = scandir($dir); $images = array(); foreach($files as $file){ // filter for thumbNail image files (use an empty string for $thumIndicator if not using thumbnails ) if( !preg_match('/'. $thumIndicator .'\.(jpg|jpeg|png|gif)$/i', $file) ) continue; $thumbSrc = $dir . '/' . $file; $fileBaseName = str_replace('_th.','.',$file); $image_info = getimagesize($thumbSrc); $_w = $image_info[0]; $_h = $image_info[1]; if( $_w > $_h ) { // $a is the longer side and $b is the shorter side $a = $_w; $b = $_h; } else { $a = $_h; $b = $_w; } $pct = $b / $a; // the shorter sides relationship to the longer side if( $a > $dim ) $a = $dim; // limit the longer side to the dimension specified $b = (int)($a * $pct); // calculate the shorter side $width = $_w > $_h ? $a : $b; $height = $_w > $_h ? $b : $a; // produce an image tag $str = sprintf('<img src="%s" width="%d" height="%d" title="%s" alt="">', $thumbSrc, $width, $height, $fileBaseName ); // save image tags in an array $images[] = str_replace("'", "\\'", $str); // an unescaped apostrophe would break js } $numRows = floor( count($images) / $cols ); // if there are any images left over then add another row if( count($images) % $cols != 0 ) $numRows++; // produce the correct number of table rows with empty cells for($i=0; $i<$numRows; $i++) echo "\t<tr>" . implode('', array_fill(0, $cols, '<td></td>')) . "</tr>\n\n"; ?> </table> <script> // make a js array from the php array images = [ <?php foreach( $images as $v) echo sprintf("\t'%s',\n", $v); ?>]; tbl = document.getElementsByTagName('table')[0]; td = tbl.getElementsByTagName('td'); // fill the empty table cells with data for(var i=0; i < images.length; i++) td[i].innerHTML = images[i]; // event handler to place clicked image into CKeditor tbl.onclick = function(e) { var tgt = e.target || event.srcElement, url; if( tgt.nodeName != 'IMG' ) return; url = '<?php echo $dir;?>' + '/' + tgt.title; this.onclick = null; window.opener.CKEDITOR.tools.callFunction(<?php echo $_GET['CKEditorFuncNum']; ?>, url); window.close(); } </script> </body> </html>
我花了一段时间试图找出这一个，这就是我所做的。 我已经把它分解得很简单，因为这是我所需要的。
在您的ckeditor文本区域的正下方，input像这样的上传文件>>>>
<form action="welcomeeditupload.asp" method="post" name="deletechecked"> <div align="center"> <br /> <br /> <label></label> <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"><%=(rslegschedule.Fields.Item("welcomevar").Value)%></textarea> <script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( 'editor1', { filebrowserUploadUrl : 'updateimagedone.asp' }); //]]> </script> <br /> <br /> <br /> <input type="submit" value="Update"> </div> </form>
'然后添加你的上传文件，这里是我写的ASP。 如果您使用的是PHP等，只需用您的上传脚本replaceASP，但要确保页面输出相同的东西。
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <% if Request("CKEditorFuncNum")=1 then Set Upload = Server.CreateObject("Persits.Upload") Upload.OverwriteFiles = False Upload.SetMaxSize 5000000, True Upload.CodePage = 65001 On Error Resume Next Upload.Save "d:\hosting\belaullach\senate\legislation" Dim picture For Each File in Upload.Files Ext = UCase(Right(File.Path, 3)) If Ext <> "JPG" Then If Ext <> "BMP" Then Response.Write "File " & File.Path & " is not a .jpg or .bmp file." & "<BR>" Response.write "You can only upload .jpg or .bmp files." & "<BR>" & "<BR>" End if Else File.SaveAs Server.MapPath(("/senate/legislation") & "/" & File.fileName) f1=File.fileName End If Next End if fnm="/senate/legislation/"&f1 imgop = "<html><body><script type=""text/javascript"">window.parent.CKEDITOR.tools.callFunction('1','"&fnm&"');</script></body></html>;" 'imgop="callFunction('1','"&fnm&"',"");" Response.write imgop %>
这是我用过的方法。 这很简单，工作得很好。
在CK编辑器的根目录中有一个名为config.js的文件
我添加了这个（你不需要querystring的东西，这只是我们的文件pipe理器）。 我还包括一些皮肤和更改显示的默认button：
CKEDITOR.editorConfig = function(config) { config.skin = 'v2'; config.startupFocus = false; config.filebrowserBrowseUrl = '/admin/content/filemanager.aspx?path=Userfiles/File&editor=FCK'; config.filebrowserImageBrowseUrl = '/admin/content/filemanager.aspx?type=Image&path=Userfiles/Image&editor=FCK'; config.toolbar_Full = [ ['Source', '-', 'Preview', '-'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker'], //, 'Scayt' ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], '/', ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/', ['Styles', 'Format', 'Templates'], ['Maximize', 'ShowBlocks'] ]; };
然后，我们的文件pipe理器调用这个：
opener.SetUrl('somefilename');
在CKEditor 3.0中，名为Custom filebrowsercallback函数的zerokspot中的一篇文章处理了这个问题。 最相关的部分引用如下：
因此，当您select一个文件时，您必须从文件浏览器执行的操作是使用正确的回叫号码（通常为1）和所选文件的URL调用此代码：
window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);对于快速上传程序来说，这个过程非常相似。 起初我以为编辑器可能正在侦听200个HTTP返回代码，也许看一些头字段或类似的东西，以确定上传的文件的位置，但是，然后 – 通过一些萤火虫监视 – 我注意到所有这一切发生上传后是以下代码：
<script type="text/javascript">
window.parent.CKEDITOR.tools.callFunction(CKEditorFuncNum,url, errorMessage);</script>如果上传失败，请将
errorMessage设置为非零长度string，并清空url，反之亦然。
在实例化CKEditor时，首先注册自定义浏览器/上传器。
<script type="text/javascript"> CKEDITOR.replace('content', { filebrowserUploadUrl: "Upload File Url",//http://localhost/phpwork/test/ckFileUpload.php filebrowserWindowWidth : 800, filebrowserWindowHeight : 500 }); </script>
上传文件代码（ckFileUpload.php）并将上传文件放在项目的根目录下。
// HERE SET THE PATH TO THE FOLDERS FOR IMAGES AND AUDIO ON YOUR SERVER (RELATIVE TO THE ROOT OF YOUR WEBSITE ON SERVER) $upload_dir = array( 'img'=> '/phpwork/test/uploads/editor-images/', 'audio'=> '/phpwork/ezcore_v1/uploads/editor-images/' ); // HERE PERMISSIONS FOR IMAGE $imgset = array( 'maxsize' => 2000, // maximum file size, in KiloBytes (2 MB) 'maxwidth' => 900, // maximum allowed width, in pixels 'maxheight' => 800, // maximum allowed height, in pixels 'minwidth' => 10, // minimum allowed width, in pixels 'minheight' => 10, // minimum allowed height, in pixels 'type' => array('bmp', 'gif', 'jpg', 'jpeg', 'png'), // allowed extensions ); // HERE PERMISSIONS FOR AUDIO $audioset = array( 'maxsize' => 20000, // maximum file size, in KiloBytes (20 MB) 'type' => array('mp3', 'ogg', 'wav'), // allowed extensions ); // If 1 and filename exists, RENAME file, adding "_NR" to the end of filename (name_1.ext, name_2.ext, ..) // If 0, will OVERWRITE the existing file define('RENAME_F', 1); $re = ''; if(isset($_FILES['upload']) && strlen($_FILES['upload']['name']) >1) { define('F_NAME', preg_replace('/\.(.+?)$/i', '', basename($_FILES['upload']['name']))); //get filename without extension // get protocol and host name to send the absolute image path to CKEditor $protocol = !empty($_SERVER['HTTPS']) ? 'https://' : 'http://'; $site = $protocol. $_SERVER['SERVER_NAME'] .'/'; $sepext = explode('.', strtolower($_FILES['upload']['name'])); $type = end($sepext); // gets extension $upload_dir = in_array($type, $imgset['type']) ? $upload_dir['img'] : $upload_dir['audio']; $upload_dir = trim($upload_dir, '/') .'/'; //checkings for image or audio if(in_array($type, $imgset['type'])){ list($width, $height) = getimagesize($_FILES['upload']['tmp_name']); // image width and height if(isset($width) && isset($height)) { if($width > $imgset['maxwidth'] || $height > $imgset['maxheight']) $re .= '\\n Width x Height = '. $width .' x '. $height .' \\n The maximum Width x Height must be: '. $imgset['maxwidth']. ' x '. $imgset['maxheight']; if($width < $imgset['minwidth'] || $height < $imgset['minheight']) $re .= '\\n Width x Height = '. $width .' x '. $height .'\\n The minimum Width x Height must be: '. $imgset['minwidth']. ' x '. $imgset['minheight']; if($_FILES['upload']['size'] > $imgset['maxsize']*1000) $re .= '\\n Maximum file size must be: '. $imgset['maxsize']. ' KB.'; } } else if(in_array($type, $audioset['type'])){ if($_FILES['upload']['size'] > $audioset['maxsize']*1000) $re .= '\\n Maximum file size must be: '. $audioset['maxsize']. ' KB.'; } else $re .= 'The file: '. $_FILES['upload']['name']. ' has not the allowed extension type.'; //set filename; if file exists, and RENAME_F is 1, set "img_name_I" // $p = dir-path, $fn=filename to check, $ex=extension $i=index to rename function setFName($p, $fn, $ex, $i){ if(RENAME_F ==1 && file_exists($p .$fn .$ex)) return setFName($p, F_NAME .'_'. ($i +1), $ex, ($i +1)); else return $fn .$ex; } $f_name = setFName($_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir, F_NAME, ".$type", 0); $uploadpath = $_SERVER['DOCUMENT_ROOT'] .'/'. $upload_dir . $f_name; // full file path // If no errors, upload the image, else, output the errors if($re == '') { if(move_uploaded_file($_FILES['upload']['tmp_name'], $uploadpath)) { $CKEditorFuncNum = $_GET['CKEditorFuncNum']; $url = $site. $upload_dir . $f_name; $msg = F_NAME .'.'. $type .' successfully uploaded: \\n- Size: '. number_format($_FILES['upload']['size']/1024, 2, '.', '') .' KB'; $re = in_array($type, $imgset['type']) ? "window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')" //for img : 'var cke_ob = window.parent.CKEDITOR; for(var ckid in cke_ob.instances) { if(cke_ob.instances[ckid].focusManager.hasFocus) break;} cke_ob.instances[ckid].insertHtml(\'<audio src="'. $url .'" controls></audio>\', \'unfiltered_html\'); alert("'. $msg .'"); var dialog = cke_ob.dialog.getCurrent(); dialog.hide();'; } else $re = 'alert("Unable to upload the file")'; } else $re = 'alert("'. $re .'")'; } @header('Content-type: text/html; charset=utf-8'); echo '<script>'. $re .';</script>';
Ck编辑器的文档不清楚后，自定义file upload做了很多的研发，终于find了这个解决scheme。 它为我工作，我希望它也会对其他人有帮助。
