弹出窗口模式

该 弹出窗口模式 最适合选择存储在服务器上的文件。
单击下面的按钮打开弹出窗口并选择任何文件。之后，您将看到有关所选文件的基本信息，包括 URL。

此外，CKFinder 支持一种称为“**选择调整大小**”的图像特殊文件选择模式。此功能允许您将所选图像调整为适合您的任何大小。CKFinder 连接器将自动创建图像的调整大小版本并返回其 URL。

多个弹出窗口

在某些情况下，您可能需要多个弹出窗口来处理需要选择文件的多个位置。下面您可以找到一个将每个输入填充为所选文件 URL 的示例。

var button1 = document.getElementById( 'ckfinder-popup-1' );
var button2 = document.getElementById( 'ckfinder-popup-2' );

button1.onclick = function() {
	selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
	selectFileWithCKFinder( 'ckfinder-input-2' );
};

function selectFileWithCKFinder( elementId ) {
	CKFinder.popup( {
		chooseFiles: true,
		width: 800,
		height: 600,
		onInit: function( finder ) {
			finder.on( 'files:choose', function( evt ) {
				var file = evt.data.files.first();
				var output = document.getElementById( elementId );
				output.value = file.getUrl();
			} );

			finder.on( 'file:choose:resizedImage', function( evt ) {
				var output = document.getElementById( elementId );
				output.value = evt.data.resizedUrl;
			} );
		}
	} );
}