Maxim-Kolmogorov/ckeditor-browse.php

## ckeditor-browse.php
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Выбор файла</title>

<!--     <link rel="stylesheet" href="/style.css"> -->

    <style>
        .l-wrap {
        max-width: 1140px;
        margin-right: auto;
        margin-left: auto;
        }

        .grid-item {
        width: calc((100% - 24px * 4) / 4);
        margin-top: 24px;
        margin-left: 12px;
        margin-right: 12px;
        float: left;
        }
        @media (max-width: 600px) {
        .grid-item {
            width: 100%;
            margin-top: 8px;
            margin-left: 4px;
            margin-right: 4px;
            }
        }

        .grid-item {
        justify-content: center;
        align-items: center;
        height: 80px;
        text-align: center;
        margin-bottom: 8em;
        margin-top: 3em;
        }
        .grid-item .img-table {
        width: 96%;
        height:150px;
        min-height:150px;
        max-height:150px;
        background-size: contain !important;
        background-position: center !important;
        }
        .grid-item .row {
        width: 100%;
        }
    </style>
    <script>

        // Функция для получения параметров из строки запроса.
        function getUrlParam(paramName) {
            var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
            var match = window.location.search.match( reParam );

            return (match && match.length > 1) ? match[1] : null;
        }

        // Немного измененая функция из официальной документации, которая передает нужные параметры обратно в CKEditor.
        // Она принимает КНОПКУ КАК ОБЪЕКТ которую ВЫ выбрали.
        // Далее мы вынимаем у кнопки атрибут href (а он соотвествует ссылке у картинки), через split и pop получаем название файла (например 1.png)
        // И прибавляем к нему путь той самой папки c картинкам куда мы изначально складывали их с помощью upload.php.
        function returnFileUrl(img) {
            var funcNum = getUrlParam('CKEditorFuncNum');
            var href = img.href.split('/').pop();
            href = '/img/' + href;
            window.opener.CKEDITOR.tools.callFunction(funcNum, href);
            window.close();
        }

    </script>
</head>
<body>
    <div class="uk-container">
        <h1 style="padding-top: 2em;" class="uk-h2">Выберите изображение</h1>
             <div class="l-wrap">
                 <div class="three-col-grid">

        <?php

        $srcdir = '/img'; // Папка c картинкам куда мы изначально складывали их с помощью upload.php.

        $dir = $_SERVER['DOCUMENT_ROOT'].$srcdir; // Тут мы создали переменную dir в которую поместили полный путь к нашей папке где хранятся картинки.

        $files = array_diff(scandir($dir), array('..', '.')); // Здесь мы просканировали нужную нам директорию, получили N-ое кол-во файлов, после удалили мусор из массива.

             // Тут мы пускаем цикл, который будет выполняться пока массив files не опустеет.
             // А с помощью onclick="returnFileUrl(this); return false;" мы получаем по нажатию на кнопку выбранный объект (кнопку на которую нажали) и передаем в функцию returnFileUrl
             // А и еще, return false; запрещает переход по кнопке.
            foreach ($files as &$value) {
                echo '<div class="grid-item">
                        <p class="uk-text-emphasis">
                            <div class="img-table" style="background: url(/img/' . $value . ') no-repeat;"></div>
                            <div>
                                <p class="uk-text-emphasis down"><b>'
                                . $value .
                                '</b></p>
                                <p class="uk-text-emphasis down">
                                    <a onclick="returnFileUrl(this); return false;" href="'. $value . '" class="uk-button uk-button-primary">Выбрать</a><b>
                            </div>
                    </div>';
            }
         ?>
                </div>
            </div>

    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Выбор файла</title>

	<!-- <link rel="stylesheet" href="/style.css"> -->

	<style>
	.l-wrap {
	max-width: 1140px;
	margin-right: auto;
	margin-left: auto;
	}

	.grid-item {
	width: calc((100% - 24px * 4) / 4);
	margin-top: 24px;
	margin-left: 12px;
	margin-right: 12px;
	float: left;
	}
	@media (max-width: 600px) {
	.grid-item {
	width: 100%;
	margin-top: 8px;
	margin-left: 4px;
	margin-right: 4px;
	}
	}

	.grid-item {
	justify-content: center;
	align-items: center;
	height: 80px;
	text-align: center;
	margin-bottom: 8em;
	margin-top: 3em;
	}
	.grid-item .img-table {
	width: 96%;
	height:150px;
	min-height:150px;
	max-height:150px;
	background-size: contain !important;
	background-position: center !important;
	}
	.grid-item .row {
	width: 100%;
	}
	</style>
	<script>

	// Функция для получения параметров из строки запроса.
	function getUrlParam(paramName) {
	var reParam = new RegExp( '(?:[\?&]\|&)' + paramName + '=([^&]+)', 'i' );
	var match = window.location.search.match( reParam );

	return (match && match.length > 1) ? match[1] : null;
	}

	// Немного измененая функция из официальной документации, которая передает нужные параметры обратно в CKEditor.
	// Она принимает КНОПКУ КАК ОБЪЕКТ которую ВЫ выбрали.
	// Далее мы вынимаем у кнопки атрибут href (а он соотвествует ссылке у картинки), через split и pop получаем название файла (например 1.png)
	// И прибавляем к нему путь той самой папки c картинкам куда мы изначально складывали их с помощью upload.php.
	function returnFileUrl(img) {
	var funcNum = getUrlParam('CKEditorFuncNum');
	var href = img.href.split('/').pop();
	href = '/img/' + href;
	window.opener.CKEDITOR.tools.callFunction(funcNum, href);
	window.close();
	}

	</script>
	</head>
	<body>
	<div class="uk-container">
	<h1 style="padding-top: 2em;" class="uk-h2">Выберите изображение</h1>
	<div class="l-wrap">
	<div class="three-col-grid">

	<?php

	$srcdir = '/img'; // Папка c картинкам куда мы изначально складывали их с помощью upload.php.

	$dir = $_SERVER['DOCUMENT_ROOT'].$srcdir; // Тут мы создали переменную dir в которую поместили полный путь к нашей папке где хранятся картинки.

	$files = array_diff(scandir($dir), array('..', '.')); // Здесь мы просканировали нужную нам директорию, получили N-ое кол-во файлов, после удалили мусор из массива.

	// Тут мы пускаем цикл, который будет выполняться пока массив files не опустеет.
	// А с помощью onclick="returnFileUrl(this); return false;" мы получаем по нажатию на кнопку выбранный объект (кнопку на которую нажали) и передаем в функцию returnFileUrl
	// А и еще, return false; запрещает переход по кнопке.
	foreach ($files as &$value) {
	echo '<div class="grid-item">
	<p class="uk-text-emphasis">
	<div class="img-table" style="background: url(/img/' . $value . ') no-repeat;"></div>
	<div>
	<p class="uk-text-emphasis down"><b>'
	. $value .
	'</b></p>
	<p class="uk-text-emphasis down">
	<a onclick="returnFileUrl(this); return false;" href="'. $value . '" class="uk-button uk-button-primary">Выбрать</a><b>
	</div>
	</div>';
	}
	?>
	</div>
	</div>

	</div>
	</body>
	</html>