Так получилось что возможность загружать файлы через редактор CKeditor, по умолчанию отключена. В этом материале мы заставим наш WYSIWYG редактор загружать картинки и не только.
Если вы не знаете что это такое WYSIWYG редактор CKeditor, то в этой статье всё подробно написано.
Для проворота этого фокуса нам нужен CKeditor с установленным плагином вставки изображений (обычно встроена в редактор по умолчанию) и просто ровные руки.
1. Откройте файл в папке с редактором: pluginsimagedialogsimage.js
Теперь нам необходимо кое-что найти в файле и поменять. Сразу скажу что то что мы будем искать порой версия от версии менялось, поэтому у вас должно быть одно из приведённых слов.
Надо искать: config.filebrowserBrowseUrl или filebrowserImageBrowseLinkUrl или id:’Upload’. При отсутствии точных совпадений, что вполне вероятно может быть, ищите слова Upload и File. рядом с найденным ищите такое выражение — hidden:true или hidden:!0 и меняйте его на hidden:false.
2. Для того чтобы проверить успешность выполнения предудыщего шага в редакторе нажмите кнопку вставки изображений — там должна появиться вкладка «Загрузить», открыв которую вы увидите кнопку и поле выбора файла. Работать на этом этапе оно не будет и это вполне обоснованно.
Внимание! Очень часто браузеры кэшируют файл image.js и после его изменения не перезагружают, поэтому попробуйте открыть сайт в другом браузере если не заметили изменений.
3. После того как вкладка у вас появилась переходим к следующему шагу.
В папке с редактором найдите файл config.js и откройте его. В содержимое файла внутрь выражения:
CKEDITOR.editorConfig = function( config )
т.е. где-то между фигурными кавычками «<» и в конце файла «>» вставьте строчку:
В строчке выше ../upload.php это путь к обработчику. Путь в данный момент идёт к файлу upload.php, который расположен на уровень выше папки с содержимым ckeditor. Скорее всего этот файл будет в корне вашего сайта, если вы понимаете всё устройство, то можете изменить по своему усмотрению.
Теперь, выходим из папки с содержимым редактора и создаём наш файл upload.php. Его наполняем таким содержимым:
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]
Теперь ваш файл допустит к загрузке только изображения PNG и JPEG не превышающие 2 Мб (Сделано в плане безопасности). Также можете разобраться в коде и поменять всё на своё усмотрение.
Смое главное поменяйте в коде следующее:
В строке move_uploaded_file($_FILES[‘upload’][‘tmp_name’], «images/».$name); поменяйте images/ на папку, куда будут загружаться изображения относительно файла upload.php.
Кроме того укажите в переменной $full_path поменяйте на свой абсолютный путь к папке с загруженными изображениями.
4. На этом всё. Теперь загрузка картинок в CKeditor перестала быть проблемой. Если вы считаете сложным обработчик и хотите видеть здесь ещё и «лёгкую» версию, в которой можно загружать всё, напишите в комментариях.
воскресенье, 25 сентября 2011 г.
Как заставить CKEditor загружать картинки на сервер (без применения CKFinder).
CKEditor является прекрасным WYSIWYG редактором, но к сожалению не всегда можно найти то, что нужно в официальной документации, так что приходится иногда «рыскать» по сети в поисках ответа на нужные вопросы ).
Этот уикэнд Я посвятил тому, что пытался заставить редактор последней версии грузить картинки на сервер без дополнительных приблуд, типа ckfinder, т.к. в документации заявлена эта возможность:
5. Всё. По идее у вас все должно заработать. В скрипте ничего военного, обычная загрузка файла на сервер в указанную папку.
Единственное, что скрипт печатает это:
Где $callback это имя функции, которое приходит в файл в массиве $_GET[],
$http_path — путь к картинке, котрая тут же покажется в превью.
$error — возможные ошибки. Если что-то пошло не так, вы увидите алерт с
текстом ошибки.
33 комментария:
In English: http://max-white.blogspot.com/2011/09/how-to-make-ckeditor-upload-photos.html
похоже не совсем работает( пишет Не указана ссылка на изображение.
Спасибо большое, помогло!
версия CKEditor 3.6.2 2й пункт вобще не срабатывает, меняю id:’Upload’,hidden:true
на
id:’Upload’,hidden:false
кнопка не появляется. Подскажите как ещё можно поступить, или это проблема в версиях?
Скачал 3.6.2 это последняя версия. поменял
id:’Upload’,hidden:true
на
id:’Upload’,hidden:false
у меня заработало.
Попробуйте очистить кеш браузера Shift + Ctrl + Del в фаерфоксе и в хроме и еще Ctrl + F5
Странно както, но заработало, кнопка появляется только тогда когда уже модуль загрузки подключишь, а так просто без подключения не появится. Но всеравно спасибо за совет.
Сделал. Пишет:
Some error occured please try again later
в чем проблемма подскажите пожалуйста.
Опишите подробнее что делали и что работает и что не работает по пунктам. попробуем разобраться
AIIPEJIb
дело в том что в скрипте банальные ошибочки пути вот раз:
/var/www/ckeditortest/upload/
и вот два:
/upload/
про такие пути к файлам ваш сервер скорее всего точно ничего не знает, если их поправить, соответственно настройкам локального сервера, то все работает.
Но остается одна проблема вот это /var/www/ckeditortest/upload/ абсолютный путь к файлу а это совсем не транспортабельно а вот как бы его заменить какой-нибуть встроенной функции который выдала бы путь загрузки — пока не знаю, но попробую поискать.
И еще уберите эту дрянную капчу и поставьте модуль блогспам, так вы защитите себя от ссылок в коментах и людям облегчите жизнь.
Alex, Спасибо за совет!
Поиграл с путями но так ничего не добился.
проэкт на лок сервере:
www/subd/
в этом же каталоге лежит эдитор.
создал upload в subd указав:
$file_new_name = ‘/subd/upload/’;
$http_path = ‘/subd/upload/’.$file_name;
файл ckupload.php положил в корень www/
видимо я что то не допонял. Подскажите, если не сложно.
В небольших проектах, где требуется минимальный функционал от wysiwyg редактора, я использую стандартную версию Ckeditor. ckeditor позволяет вставлять в текст изображения, загружая их перед этим на сервер. Обычно этим занимается файловый менеджер, который открывается при нажатии на кнопку «Обзор файлов»
Но иногда функционал файлового менеджера избыточен. Требуется просто выбрать файл на компьютере, загрузить его и вставить в текст. Для этого используется плагин uploadimage, который необходимо подключить к ckeditor. Удобно сразу сконфигурировать ckeditor с этим плагином, чтобы не мучаться с разрешением зависимостей этого плагина. Uploadimage добавляет новую вкладку в окно вставки изображения.
Чтобы плагин заработал, нужно в конфигурационном файле ckeditor config.js необходимо прописать путь до обработчика загрузок изображений на сервере.
public/ckeditor/config.js
На этом настройка ckeditor завершена. Теперь реализуем функционал загрузки на сервере. Добавим новый роут в файле web.php . Для упрощения и наглядности, код загрузки изображения я не буду выносить в отдельный контроллер, а напишу прямо роутах.
routes/web.php
Здесь я валидирую входящие данные, и, если валидация пройдена, загружаю изображение в папку public/uploads . Т.к. используется Laravel 5.3, то изображение сохраняется в папку storage , которая не доступна из Web. Поэтому необходимо создать симлинк в эту папку командой php artisan storage:link . Всё это подробно описано в документации: https://laravel.com/docs/5.3/filesystem#the-public-disk.
Т.к. ckeditor присылает изображение POST запросом, а laravel проверяет CSRF токен, который ckeditor не передаёт, необходимо вписать только что созданный роут в исключения, чтобы laravel не проверял token: