CKEditor4配置与开发详细中文说明文档(18)

window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, function() {
  // 获得对话窗口的引用   
   var element,
   dialog = this.getDialog();   
  //检查是否为Image对话窗口   
   if ( dialog.getName() == 'image' ) {
    // 获得具有"alt"属性的文本域的引用
    element = dialog.getContentElement( 'info', 'txtAlt' );     
    // 赋新值     
    if ( element )
      element.setValue( 'alt text' );   
   }   ...
  // 返回false，停止进一步执行- - 在这种情况下，CKEditor将忽略第二个参数 (fileUrl)
  // 和赋给调用文件浏览器按钮的onSelect函数 (如果定义了).   [return false;] }); 

将文件浏览器添加到对话框中

CKEditor可以很容易地与你自己的文件浏览器集成。

要连接与CKEditor兼容的文件浏览器（如 CKFinder），遵循 File Browser (Uploader)文档。

对话框

请参考 Dialog definition API，获得如何生成一个对话框的一般帮助。

Filebrowser 插件

filebrowser插件内置于CKEditor中。它的唯一目的是在CKEditor中提供一个API，可以集成任意外部文件浏览器，并为各种CKEditor组件（通常为对话框）增加文件浏览功能。

添加"Browse Server"按钮

要将文件浏览器插件添加到一个对话框中的元素，设置"filebrowser"属性。在image插件的例子中，有：

{
  type: 'button',   
  hidden: true,   
  id: 'browse',
  filebrowser: '
  Link:txtUrl',
  label: editor.lang.common.browseServer,   
  style: 'float:right',
}, 

此按钮默认是隐藏的 (hidden:true)。

文件浏览器插件查找具有filebrowser属性的所有元素，并且如果有可用的相应的配置设置(filebrowserBrowseUrl/filebrowserUploadUrl)，就不再隐藏它们。

插件所执行的操作取决于元素的类型，对于fileButton，操作为QuickUpload，对于其它元素，默认的操作是Browse。在上面的例子中，当点击按钮时，将会启动文件浏览器（在弹出窗口中）。

'Link:txtUrl' 值告诉插件当调用CKEDITOR.tools.callFunction( funcNum )时，更新Link标签中id为txtUrl的元素。

添加 "Quick Upload"支持

再次看看如何在我们的对话框中处理文件上传，我们将使用来自CKEditor的工作示例。在image插件中，有一个Upload标签定义：

{
  id: 'Upload',   
  hidden: true,
  filebrowser: 'uploadButton',   
  label: editor.lang.image.upload,   
  elements: [     
    {
      type: 'file',       
      id: 'upload',
      label: editor.lang.image.btnUpload,       
      style: 'height:40px',       
      size: 38     
    },     
    {
      type: 'fileButton',      
      id: 'uploadButton',
      filebrowser: 'info:txtUrl',
      label: editor.lang.image.btnUpload,       
      'for': [ 'Upload', 'upload' ]     
    }   
  ] 
},