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

日期：2020-05-11 栏目：程序人生浏览：次

此例较前一例子稍复杂一些因为

1）这里有整个标签的定义

2）我们需要两个元素：file和fileButton来上传文件。
在上面的例子中，标签的id为'Upload'。它默认是隐藏的（hidden:true）。

正如已提到的，文件浏览器插件查找具有filebrowser属性的所有元素，并且如果相应的配置设置可用就不隐藏它们。

在此例中，如果'uploadButton'文件浏览器设置（因为filebrowser:'uploadButton'）将成为可用(filebrowserUploadUrl)，则将自动不再隐藏此标签。

file元素很简单，不需要做解释，它只是一个input元素，将保存将要上传的文件名。

fileButton元素较有趣。'info:txtUrl'值使文件浏览器插件当调用 CKEDITOR.tools.callFunction( funcNum )时（参见 Custom File Browser），更新info标签中id为txtUrl的元素。'for': [ 'Upload', 'upload' ] 一行用于将fileButton与file元素相关联。它是CKEditor上传文件的一条指令，在'Upload标签'（第一个值）中使用id为'upload'的'file'元素。

高级配置（浏览）

可以定义自己的函数，当选择/上传文件时可以调用它。

 {
  type: 'button',
  hidden: true,   
  id: 'id0',
  label: editor.lang.common.browseServer,   
  filebrowser: {
    action: 'Browse',    
    // target: 'tab1:id1',
    onSelect: function( fileUrl, data ) {
      alert( 'The selected file URL is "' + fileUrl + '"' ); 
      for ( var _info in data )
        alert( 'data[ "' + _info + '" ]' + ' = ' + data[ _info ] ); 
      var dialog = this.getDialog();
      dialog.getContentElement( 'tab1', 'id1' ).setValue( data[ 'fileUrl' ] ); //不要调用内置的onSelect命令 
      return false;     
     }   
  } 
}

在此例中，我们设置了'Browse'操作，当点击按钮时调用文件浏览器。'target'不是必需的，因为我们将在定制的onSelect函数中更新目标元素。

如在此文档中说明的，当用户选择了一个文件时，我们已调用了 CKEDITOR.tools.callFunction( funcNum, fileUrl, data )；。fileUrl和data参数被传递给我们定制的onSelect函数，我们可以使用它来更新目标元素。

高级配置（快速上传）

用我们配置按钮打开文件浏览器相同的方法，我们配置fileButton。

 {
  type: 'file',
  label: editor.lang.common.upload,   
  labelLayout: 'vertical',   
  id: 'id2' 
}, 
{
  type: 'fileButton',
  label: editor.lang.common.uploadSubmit,   
  id: 'id3',
  filebrowser: {
    action: 'QuickUpload',
    params: { type: 'Files', currentFolder: '/folder/' },     
    target: 'tab1:id1',
    onSelect: function( fileUrl, errorMessage ) {
      alert( 'The url of uploaded file is: ' + fileUrl + '\nerrorMessage: ' + errorMessage );
      // Do not call the built-in onSelect command       
      // return false;     
    }
 },
 'for': [ 'tab1', 'id2' ] 
}

转载注明出处：http://www.heiqu.com/269.html

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

相关推荐