Установка CKEditor и загрузка файлов на сервер

Недавно столкнулся с такой задачей: мне нужно было прикрутить к редактору CKEditor возможность загружать изображения на сайт и автоматически вставлять их в записи.

Проблема в том, что по умолчанию в этом редакторе такой возможности нет и нужно покапаться в коде, чтобы ее создать.

Так вот, погуглив, я нашел решение и решил поделиться им с Вами. Записал для Вас видеоурок, который разбил на 2 части. 1 часть — установка CKEditor на Ваш сайт. 2 часть — CKEditor + загрузка изображений на сервер с его помощью.

Установка CKEditor.

Установка CKEditor и Загрузка файлов на сервер. Часть 1

CKEditor + загрузка изображений.

Установка CKEditor и Загрузка файлов на сервер. Часть 2

Дополнительные материалы

Краткая инструкция

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);

Не забывайте оставлять Ваши комментарии. Спасибо.

Комменты

  • или возвращает куски кода

  • сделал все как у вас указано, вкладка появилась, но когда загружает фото появляется ошибка что страница не найдена, на месте кнопки browse

  • Привет ,Дмитрий. Всё сделал по вашей инструкции, но вкладка для загрузки изображения не появилась. Она у вас появляется после замены !0 на false, но в моём случае это не подействовало.Помогите если можно

  • Доброго дня!

    Подскажите как расширить функционал редактора: вставка исходного кода — HTML,CSS,JS,PHP — в текст статьи сделать синтаксис языка в цвете.

    Спасибо!

  • поставил всё согласно инструкции, но выдаёт при загрузке ошибку «Файл не является допустимым изображением»
    что не так? подскажите пожалуйста…
    стоит 777

    • Можно без правки кода все сделать . Зайди в конфигурации и изменить профиль Advanced или Full. В настройках профиля выбрать вкладку обзора и для Тип файлового браузера (Link-окно) Тип файлового браузера (Image-окно)
      выбрать IMCE ну до этого установить модуль .

  • Андрей Ануфриев: 25-11-2015 в 18:35

    А как сделать чтобы картинки загружались определённого размера? К примеру, мне нужно 320px на 240px!
    Спасибо!

  • Дмитрий, ОГРОМНОЕ спасибо!
    Все работает! CKEditor пользуюсь давно, было очень неудобно каждый раз указывать ссылки для картинок.

  • спасибо!

  • Здравствуйте! у кого есть маленький CMS движок?? пожалуйста помогите…

  • Лучшее решение — _http://2develop.ru/poleznoe/ustanovka-ckeditor-i-zagruzka-faylov-na-server.html
    удобно, быстро и просто

  • А вот с картинками не получается: диалоговое окно (файл…….загужен) не появляется (до этого момента всё нормально). А в окошке между строкой и кнопкой «Загрузить на сервер»,в том месте, где должна появляться ссылка (после нажатия на кнопку «Загрузить на сервер») появляется только серая сплошная полоса. При нажатии же на Ок окна всплывает окошко: «Оповещение JavaScript не указана ссылка на изображение» (естественно, т.к. вместо неё-серая сплошная полоса). Перепроверял код дважды, никакого криминала не обнаружил. Подскажите, пожалуйста, что бы это могло быть? Спасибо. Жду ответа.

  • Огромнейшее спасибо, Дмитрий! Вы убрали Вашим уроком камень преткновения установки эдитора. Успехов Вам!

  • Файл не является допустимым изображением
    — ТАК говорит на все фаилы

    Warning: move_uploaded_file(images/475-27bc193bc2bef5eae3c1f6eba5047b3e.jpg) [function.move-uploaded-file]: failed to open stream: No such file or directory in /var/www/u1613703/data/www/bobrenok-stom.com/js/ckeditor/upload.php on line 25

    Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move ‘/tmp/phpp3InjY’ to ‘images/475-27bc193bc2bef5eae3c1f6eba5047b3e.jpg’ in /var/www/u1613703/data/www/bobrenok-stom.com/js/ckeditor/upload.php on line 25

    ПОЧЕМУ ТАК???????????????????????????????

  • Спасибо, помогло!

  • Здравствуйте Дмитрий у меня при попытке загрузить файлы на сервер возникает ошибка
    «У вас нет прав для загрузки файлов». Что делать в данном случае?
    Большое спасибо за пост, искал в английском интернете ответ, но не нашел а вы в самое время его выложили, спасибо

    • Дмитрий Валак: 12-06-2014 в 6:57

      Здравствуйте. Нужно выдать права на запись для этой директории.

      • Везде права выставлены 777 для папки ckeditor, ckeditor/images и для файла ckeditor/upload.php, может еще что то необходимо сделать? подскажите пожалуйста , очень благодарен

      • еще один вопрос У меня форма сабмитится и передает дефолтное значение только, а если я изменяю его в textarea (причем ckeditor стал отлично) то измененное значение уходит только с последующего сабмита что не так может быть?

  • Спасибо, Дмитрий я во всем разобрался, и как от alrt() избавиться и как смайлики свои вставить в ckeditor

  • Дмитрий, подскажите, как вместо всплывающего alert() сделать свое окно? Где откопать в коде CKEDITOR функцию, которая за это отвечает?

  • Здравствуйте Дмитрий очень полезный урок , но у меня есть вопрос: У меня на сайте ести админка public_html/admin папка admin и в этой папки есть папка images и там сохраняются загруженные фото но я бы хотел чтобы они хранились в корень сайта в папке images , я изменил $full_path = ‘http://мойсаит.net/images/’.$name; и не работает фото не загружается на сервер а если $full_path = ‘http://мойсаит.net/admin/images/’.$name; уни грузится , я могу оставить так но при просмотре кода высвечивается путь где храниться фото… что мне делать?

  • Большое спасибо, Дмитрий! Давно искал такое решение!

  • Спасибо, Дмитрий, получилось! А как его встроить или заменить на CKEditor стандартный редактор на СМС, WordPresse, например?
    Я пока не понимаю как это реализовать практически. Куда поместить папку с этими файлами.

  • Здравствуйте, а какие есть уязвимости у CKEditor (или подобных)?
    При просмотре статистики сайта, увидел что кто-то пытался найти админку сайта. Также статистика показала путь до этого «эдитора»
    P.S. сайт был закрыт на обновление

  • Спасибо, работает

    Единственное дополнение для особо одарённых (типа меня):
    можно уточнить, что директория с картинками должна быть на одном уровне вложенности с файлом 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)

  • Спасибо, Дмитрий. Очень интересно. А не могли бы выложить урок как сделать разрыв строки в редакторе или «Читать далее…», чтобы не делать 2 текстовых поля в админке. И еще очень интересно будет узнать как чистить сервер от устаревших и не нужных картинок.
    Заранее благодарен.

  • Дмитрий.спасибо за урок и хотелось бы узнать,можно ли добавлять плагины в уже установленный(который установили в уроках) редактор.
    Есть необходимость перехода на HTML-редактор,как в WordPress и как установить кнопку «Сохранить»,смотрел плагины,там два таких плагина «Сохранить»,чтобы написанный текст и рисунок можно было вставить на сайт.
    Хотелось бы продолжение уроков по таким вопросам.
    Ещё раз спасибо за уроки!

  • А лучше сделать так, чтобы была возможность просто вставлять рисунок в текст, минуя загрузку на сервер и выбор файла. Для чайников: нажал на кнопку — выбрал изображение — оно в тексте. Возможно?

  • Гораздо проще и удобнее использовать готовый файловый менеджер, который дает все преимущества работы с файлами. Из бесплатных это, например, kcfinder. Из платных — родной ckfinder.