如何将自定义文件浏览器/上传器与CKEditor集成？

官方文档不太清楚 - 将自定义文件浏览器/上传器与CKEditor集成的正确方法是什么？(v3 - 不是FCKEditor)

1> Don Jones..：

---

首先在实例化CKEditor时注册自定义浏览器/上传器.您可以为图像浏览器和常规文件浏览器指定不同的URL.

您的自定义代码将收到一个名为CKEditorFuncNum的GET参数.保存它 - 这是你的回调函数.让我们说你把它放进去了$callback.

当有人选择文件时,运行此JavaScript以通知CKEditor选择了哪个文件:

window.opener.CKEDITOR.tools.callFunction(,url)

其中"url"是他们选择的文件的URL.可选的第三个参数可以是您希望在标准警报对话框中显示的文本,例如"非法文件"或其他内容.如果第三个参数是错误消息,请将url设置为空字符串.

CKEditor的"上传"选项卡将在"上传"字段中提交一个文件 - 在PHP中,转到$ _FILES ['upload'].CKEditor希望您的服务器输出的是一个完整的JavaScript块:

$output = '';
echo $output;

同样,您需要为其提供回调参数,文件的URL以及可选的消息.如果消息是空字符串,则不显示任何内容; 如果消息是错误,则url应为空字符串.

关于这一切的官方CKEditor文档是不完整的,但是如果按照上面的说法,它就会像冠军一样工作.

---

我无法相信这个过程的开发人员文档是如此稀疏.感谢您填写详细信息.

---

这是很棒的信息!Waay比官方文档更好.

---

非常感谢!但它是CKEditorFunNum,而不是Name = P.

---

@emzero,我认为它可能是CKEditorFuncName,也许更多的CKEditor现在使用CKEditorFuncNum.无论如何,答案是现货!

2> Penuel..：

---

我发布了一个关于将旧FCKEditor中可用的FileBrowser集成到CKEditor中的小教程.

http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/

它包含了这样做的分步说明,非常简单.我希望任何寻找这个的人都会觉得这个教程很有帮助.

3> Tim..：

---

我自己完成了学习过程.我明白了,但我同意文档的编写方式对我来说太吓人了.对我来说,最重要的"aha"时刻是理解为了浏览,所有CKeditor都会打开一个新窗口并在网址中提供一些参数.它允许您添加其他参数,但建议您需要在值上使用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:

function myOnclickHandler(){  
//..    
    window.opener.CKEDITOR.tools.callFunction(, pathToImage);  
    window.close();
}       

Simarly,上传者只是调用你提供的url,例如upload.php,然后再次提供$ _GET ['CKEditorFuncNum'].目标是iframe,因此,在您从$ _FILES保存文件后,您将反馈传递给CKeditor,因为:

$funcNum = $_GET['CKEditorFuncNum'];  
exit("");  

下面是一个简单易懂的自定义浏览器脚本.虽然它不允许用户在服务器中导航,但它允许您指定在调用浏览器时从哪个目录中提取图像文件.

这是所有相当基本的编码,因此它应该适用于所有相对现代的浏览器.

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的完整代码

 if not using thumbNails then use empty string */  
?>  
  
  
  
      
      

      

  


  

 $_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('',   
        $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" . implode('', array_fill(0, $cols, '')) . "\n\n";  

?>  
  


  
  
            

4> 小智..：

---

我花了一段时间试图找出这个,这就是我做的.我已经把它简单地分解了,因为这就是我所需要的.

在ckeditor文本区域的正下方,输入上传文件,如>>>>

    

        

        

        
        <%=(rslegschedule.Fields.Item("welcomevar").Value)%>
        
        

        

        

        
    

'然后添加你的上传文件,这是我用ASP编写的.如果你正在使用PHP等,只需用你的上传脚本替换ASP,但要确保页面输出相同的东西.

<%@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." & "
"
                    Response.write "You can only upload .jpg or .bmp files." & "
" & "
"
                    End if
            Else
                File.SaveAs Server.MapPath(("/senate/legislation") & "/" & File.fileName)
                f1=File.fileName
            End If
        Next
    End if

    fnm="/senate/legislation/"&f1
    imgop = ";"
    'imgop="callFunction('1','"&fnm&"',"");"
    Response.write imgop
%>

5> ScottE..：

---

这是我用过的方法.这很简单,工作得很好.

在CK编辑器根目录中有一个名为config.js的文件

我添加了这个(你不需要querystring的东西,这只是我们的文件管理器).我还包括一些皮肤和更改显示的默认按钮:

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']
    ];

};

然后,我们的文件管理器调用:

opener.SetUrl('somefilename');

6> clops..：

---

zerokspot上一篇名为CKEditor 3.0中的Custom filebrowser回调的文章处理了这个问题.最相关的部分引用如下:

因此,当您选择文件时,您只需要使用正确的回调号码(通常为1)和所选文件的URL来调用此代码:

window.opener.CKEDITOR.tools.callFunction(CKEditorFuncNum,url);

对于快速上载程序,该过程非常相似.起初我认为编辑器可能正在侦听200 HTTP返回代码,并且可能会查看某些标题字段或类似内容以确定上载文件的位置,但随后 - 通过一些Firebug监控 - 我注意到所有发生的事情上传后是以下代码:

如果上传失败,请将其设置 errorMessage为某个非零长度字符串并清空该网址,反之亦然.