Загрузка картинок на сервер в CKeditor
- Подробности
- Категория: Для сайта
- Опубликовано 20.08.2013 15:40
Так получилось что возможность загружать файлы через редактор CKeditor, по умолчанию отключена. В этом материале мы заставим наш WYSIWYG редактор загружать картинки и не только.
Если вы не знаете что это такое WYSIWYG редактор CKeditor, то в этой статье всё подробно написано.
Для проворота этого фокуса нам нужен CKeditor с установленным плагином вставки изображений (обычно встроена в редактор по умолчанию) и просто ровные руки.
1. Откройте файл в папке с редактором: \plugins\image\dialogs\image.js
Теперь нам необходимо кое-что найти в файле и поменять. Сразу скажу что то что мы будем искать порой версия от версии менялось, поэтому у вас должно быть одно из приведённых слов.
Надо искать: config.filebrowserBrowseUrl или filebrowserImageBrowseLinkUrl или id:'Upload'. При отсутствии точных совпадений, что вполне вероятно может быть, ищите слова Upload и File. рядом с найденным ищите такое выражение - hidden:true или hidden:!0 и меняйте его на hidden:false.
2. Для того чтобы проверить успешность выполнения предудыщего шага в редакторе нажмите кнопку вставки изображений - там должна появиться вкладка "Загрузить", открыв которую вы увидите кнопку и поле выбора файла. Работать на этом этапе оно не будет и это вполне обоснованно.
Внимание! Очень часто браузеры кэшируют файл image.js и после его изменения не перезагружают, поэтому попробуйте открыть сайт в другом браузере если не заметили изменений.
3. После того как вкладка у вас появилась переходим к следующему шагу.
В папке с редактором найдите файл config.js и откройте его. В содержимое файла внутрь выражения:
CKEDITOR.editorConfig = function( config )
т.е. где-то между фигурными кавычками "{" и в конце файла "}" вставьте строчку:
config.filebrowserUploadUrl = '../upload.php';
В строчке выше ../upload.php это путь к обработчику. Путь в данный момент идёт к файлу upload.php, который расположен на уровень выше папки с содержимым ckeditor. Скорее всего этот файл будет в корне вашего сайта, если вы понимаете всё устройство, то можете изменить по своему усмотрению.
Теперь, выходим из папки с содержимым редактора и создаём наш файл upload.php. Его наполняем таким содержимым:
<?
function getex($filename) {
return end(explode(".", $filename));
}
if($_FILES['upload'])
{
if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name'])) )
{
$message = "Вы не выбрали файл";
}
else if ($_FILES['upload']["size"] == 0 OR $_FILES['upload']["size"] > 2050000)
{
$message = "Размер файла не соответствует нормам";
}
else if (($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/jpeg") AND ($_FILES['upload']["type"] != "image/png"))
{
$message = "Допускается загрузка только картинок JPG и PNG.";
}
else if (!is_uploaded_file($_FILES['upload']["tmp_name"]))
{
$message = "Что-то пошло не так. Попытайтесь загрузить файл ещё раз.";
}
else{
$name =rand(1, 1000).'-'.md5($_FILES['upload']['name']).'.'.getex($_FILES['upload']['name']);
move_uploaded_file($_FILES['upload']['tmp_name'], "images/".$name);
$full_path = 'http://youon.ru/images/'.$name;
$message = "Файл ".$_FILES['upload']['name']." загружен";
$size=@getimagesize('images/'.$name);
if($size[0]<50 OR $size[1]<50){
unlink('images/'.$name);
$message = "Файл не является допустимым изображением";
$full_path="";
}
}
$callback = $_REQUEST['CKEditorFuncNum'];
echo '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction("'.$callback.'", "'.$full_path.'", "'.$message.'" );</script>';
}
?>
Теперь ваш файл допустит к загрузке только изображения PNG и JPEG не превышающие 2 Мб (Сделано в плане безопасности). Также можете разобраться в коде и поменять всё на своё усмотрение.
Смое главное поменяйте в коде следующее:
В строке move_uploaded_file($_FILES['upload']['tmp_name'], "images/".$name); поменяйте images/ на папку, куда будут загружаться изображения относительно файла upload.php.
Кроме того укажите в переменной $full_path поменяйте http://youon.ru/images/ на свой абсолютный путь к папке с загруженными изображениями.
4. На этом всё. Теперь загрузка картинок в CKeditor перестала быть проблемой. Если вы считаете сложным обработчик и хотите видеть здесь ещё и "лёгкую" версию, в которой можно загружать всё, напишите в комментариях.