/ckeditor-browse.php
Last active Feb 28, 2020
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment