Установка CKEditor и загрузка файлов на сервер
Недавно столкнулся с такой задачей: мне нужно было прикрутить к редактору CKEditor возможность загружать изображения на сайт и автоматически вставлять их в записи.
Проблема в том, что по умолчанию в этом редакторе такой возможности нет и нужно покапаться в коде, чтобы ее создать.
Так вот, погуглив, я нашел решение и решил поделиться им с Вами. Записал для Вас видеоурок, который разбил на 2 части. 1 часть – установка CKEditor на Ваш сайт. 2 часть – CKEditor + загрузка изображений на сервер с его помощью.
Установка CKEditor.
CKEditor + загрузка изображений.
Краткая инструкция
1) Заходим в папку ckeditor->plugins->image->dialogs и открываем файл image.js. При помощи поиска (Ctrl+F) ищем строку id:”Upload” и изменяем значение hidden:!0 на hidden:false
2) Заходим в папку ckeditor и открываем файл config.js. В самом конце, перед символом }; вставляем код:
config.filebrowserUploadUrl = 'http://сайт.ру/upload.php';
Этим кодом указываем путь к файлу-обработчику, который будет загружать файлы на сервер. Этот файл upload.php лежит в дополнительных материалах, закачайте его себе на сайт.
3) Редактируем файл upload.php. Изменяем пути к вашей папке, куда вы хотите загружать файлы. Вместо надписи userfiles, указываем свою папку, так же не забудьте поменять $full_path = ‘http://вашсайт.ру/userfiles/’.$name; на Ваш путь. Всего 5 мест для редактирования.
move_uploaded_file($_FILES['upload']['tmp_name'], "userfiles/".$name);
$full_path = 'http://вашсайт.ру/userfiles/'.$name;
$message = "Файл ".$_FILES['upload']['name']." загружен";
$size=@getimagesize('userfiles/'.$name);
if($size[0]<50 OR $size[1]<50){
unlink('userfiles/'.$name);
Не забывайте оставлять Ваши комментарии. Спасибо.
Спасибо!
Гораздо проще и удобнее использовать готовый файловый менеджер, который дает все преимущества работы с файлами. Из бесплатных это, например, kcfinder. Из платных – родной ckfinder.
Это можно будет сделать темой следующего урока. Спасибо.
А лучше сделать так, чтобы была возможность просто вставлять рисунок в текст, минуя загрузку на сервер и выбор файла. Для чайников: нажал на кнопку – выбрал изображение – оно в тексте. Возможно?
Дмитрий.спасибо за урок и хотелось бы узнать,можно ли добавлять плагины в уже установленный(который установили в уроках) редактор.
Есть необходимость перехода на HTML-редактор,как в WordPress и как установить кнопку “Сохранить”,смотрел плагины,там два таких плагина “Сохранить”,чтобы написанный текст и рисунок можно было вставить на сайт.
Хотелось бы продолжение уроков по таким вопросам.
Ещё раз спасибо за уроки!
Спасибо, Дмитрий. Очень интересно. А не могли бы выложить урок как сделать разрыв строки в редакторе или “Читать далее…”, чтобы не делать 2 текстовых поля в админке. И еще очень интересно будет узнать как чистить сервер от устаревших и не нужных картинок.
Заранее благодарен.
Спасибо, работает
Единственное дополнение для особо одарённых (типа меня):
можно уточнить, что директория с картинками должна быть на одном уровне вложенности с файлом upload.php, который сам не обязательно должен находиться в директории с ckeditor (пока до меня это не дошло – у меня не создавался временный файл и как следствие не проходила проверка на минимально допустимую ширину и высоту файла)
И ещё, по-моему, в условии if (($_FILES['upload']["type"] != “image/jpeg”) AND $_FILES['upload']["type"] != “image/jpeg”) AND ($_FILES['upload']["type"] != “image/png”)) содержится дублирование проверки для mime-типа “image/jpeg” – один AND можно спокойно удалить
Также специально для браузеров IE можно добавить проверку на mime-тип “image/pjpeg” (буква “p” перед jpeg)
Здравствуйте, а какие есть уязвимости у CKEditor (или подобных)?
При просмотре статистики сайта, увидел что кто-то пытался найти админку сайта. Также статистика показала путь до этого “эдитора”
P.S. сайт был закрыт на обновление
Спасибо, Дмитрий, получилось! А как его встроить или заменить на CKEditor стандартный редактор на СМС, WordPresse, например?
Я пока не понимаю как это реализовать практически. Куда поместить папку с этими файлами.
Для wordpress’а есть отдельный плагин: http://wordpress.org/plugins/ckeditor-for-wordpress/
Большое спасибо, Дмитрий! Давно искал такое решение!
Здравствуйте Дмитрий очень полезный урок , но у меня есть вопрос: У меня на сайте ести админка public_html/admin папка admin и в этой папки есть папка images и там сохраняются загруженные фото но я бы хотел чтобы они хранились в корень сайта в папке images , я изменил $full_path = ‘http://мойсаит.net/images/’.$name; и не работает фото не загружается на сервер а если $full_path = ‘http://мойсаит.net/admin/images/’.$name; уни грузится , я могу оставить так но при просмотре кода высвечивается путь где храниться фото… что мне делать?