Так получилось что возможность загружать файлы через редактор 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. Его наполняем таким содержимым:
Теперь ваш файл допустит к загрузке только изображения PNG и JPEG не превышающие 2 Мб (Сделано в плане безопасности). Также можете разобраться в коде и поменять всё на своё усмотрение.
Смое главное поменяйте в коде следующее:
В строке move_uploaded_file($_FILES["upload"]["tmp_name"], "images/".$name); поменяйте images/ на папку, куда будут загружаться изображения относительно файла upload.php .
Кроме того укажите в переменной $full_path поменяйте http://сайт/images/ на свой абсолютный путь к папке с загруженными изображениями.
4. На этом всё. Теперь загрузка картинок в CKeditor перестала быть проблемой. Если вы считаете сложным обработчик и хотите видеть здесь ещё и "лёгкую" версию, в которой можно загружать всё, напишите в комментариях.
Исходное сообщение supportСамое простое добавление изображения в любое место поста – с помощью кнопки расширенного редактора CKEditor (или FCKEditor). Для добавления изображения таким способом нужно поставить курсор в нужное место текста, нажать кнопку «Изображение», выбрать на компьютере файл и загрузить его.
Самое подробное пояснение загрузки картинок с помощью расширенного редактора Liveinternet
На рисунке внизу: 1 – кнопка «Изображение» редактора CKEditor, 2 – место, куда поставлен курсор мыши.
При нажатии на кнопку «Изображение» откроется окошко «Свойства изображения». Выберите вкладку «Закачать» и нажмите кнопку «Обзор».
Выберите нужное изображения (кликните на него левой кнопкой мыши) и нажмите кнопку «Открыть». Также можно просто дважды кликнуть на изображение, без использования кнопки «Открыть».
Нажмите кнопку «Отправить на сервер»
Сообщается, что файл загружен и был переименован каким-то образом. Например, в браузере Opera сообщение выглядит примерно так:
Нажмите кнопку «ОК».
Откроется окошко «Информация о изображении», которое рассмотрим подробно.
URL – временный адрес изображения на сервере сайта, который поменяется после публикации поста;
Альтернативный адрес – можете написать описание изображения, которое увидят поисковые роботы и пользователи, отключившие показ картинок в своем браузере;
Ширина и Высота изображения, можно менять по своему усмотрению. При этом, если использовать значок замка, то сохраняться пропорции, если нажать круговую стрелочку – размеры будут возвращены к исходным;
Бордюр – рамочка по краю картинки (ширина в пикселях);
Горизонтальный и Вертикальный отступы – расстояние от края картинки до соседних элементов (текста, других изображений и т.д.) по высоте и ширине поста;
Выравнивание – размещение картинки в тексте, слева, справа, по центру и так далее;
Preview – предпросмотр загруженной картинки.
Изображение вставится в то место поста, где находился курсор – его всегда можно переместить, при желании.
Если нужно, повторите загрузку для других изображений, которые хотите вставить в текст поста.
Ниже, в блоке «Дополнительно», отметьте галочкой или снимите ее в пунктах «Подписать картинку» и «Разворачивать картинку».
P.S. В мобильном liveinternet кнопки добавления выглядят примерно так:
Спасибо очень полезная информация!!!Обычно WYSIWYG редактор требуется когда необходимо написать админку, в которой обычному пользователю не знающему html, будет легко и удобно добавлять собственные тексты. Так было и в моем случае.
Скачиваем CKEditor с официального сайта: скачать ckeditor
Скачиваем бесплатный файл менеджер KCFinder: скачать kcfinder
Стандартным способом интегрируем CKEditor на сайт. Добавляем на страницу скрипт ckeditor.js (в моем случае скрипт лежит в корне сайта в каталоге ckeditor). KCFinder я распаковал в папку ckeditor, просто для удобства.
Пусть на странице имеется поле textarea которое нужно заменить WYSIWYG редактором:
CKEDITOR.replace("ckeditor");
Далее нам необходимо указать настройки в ckeditor для того чтоб при нажатии на кнопку «загрузить файл» или просмотреть файлы на сервере открывался KCFinder, для этого добавляем в CKEDITOR.replace следующие настройки:
CKEDITOR.replace("ckeditor",{"filebrowserBrowseUrl":"/ckeditor/kcfinder/browse.php?type=files", "filebrowserImageBrowseUrl":"/ckeditor/kcfinder/browse.php?type=images", "filebrowserFlashBrowseUrl":"/ckeditor/kcfinder/browse.php?type=flash", "filebrowserUploadUrl":"/ckeditor/kcfinder/upload.php?type=files", "filebrowserImageUploadUrl":"/ckeditor/kcfinder/upload.php?type=images", "filebrowserFlashUploadUrl":"/ckeditor/kcfinder/upload.php?type=flash"});
В каталоге /ckeditor/kcfinder/ есть скрипт с конфигурацией config.php, там необходимо указать путь к папке в которую будут загружаться добавленные файлы (не забудьте посмотреть чтоб директория была доступна для записи).
Кажется что все работает, но есть еще несколько моментов касающихся настроек форматирования кода в CKEditor, мне например не нравится что при нажатии на клавишу enter в редакторе, текст заключается в тег
Так же этот тег постоянно записывается когда пытаемся сохранить пустое поле с подключенным редактором. Чтоб это исправить добавляем небольшой скрипт:
If(typeof CKEDITOR !== "undefined") { CKEDITOR.on("instanceReady", function(ev) { // Output paragraphs as . ev.editor.dataProcessor.writer.setRules("*", { indent: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true }); }); }
Убрали автозаполнения тегом
Теперь уберем заключение текста в данный тег при нажатии на enter. Для этого допишем следующие настройки в файл конфигурации /ckeditor/config.js :
// при нажатии enter добавляем br config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR;
Если кажется что последние две строчки кода не помогают решению проблемы, очистите кеш браузера и повторите тестирование, все должно работать. Таким образом ваш редактор CKEditor c файловым менеджером KCFinder готов к работе, и выглядит очень даже не плохо.
Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.
— лучший текстовый редактор для каждого» (c) (The best web text editor for everyone). CKEditor — бесплатный визуальный кросплатформенный браузерный редактор — часто используется для внесения форматированного текста в различных системах управления контента (CMS). Редактор хорошо настраиваемый, но в последней редакции (версия 4 на момент написания поста) нет функционала загрузки фотографий через сам редактор. Сейчас мы с вами размеремся, как исправить это недостаток.
Загрузка картинок не представлена, потому что редактор вообще не имеет серверных скриптов, необходимых для загруки файлов на сервер. Непонятно какие причины подвигли авторов редактора отключение этого функционала (в предыдущих версиях он существовал), но без загрузки изображений редактор доьтавляет определенные проблемы в офромлении текста. К счастью возможноть подлючения своих серверных сриптов осталась, нужно только включить ее. Не будем вдаваться в подробности конфигурирования редактора, а сразу укажем какие опции надо добавить для этого.
Итак открываем файл config.php , который находится в корне папки редактора и добавляем две строки (38, 39)
/** * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.html or http://ckeditor.com/license */ CKEDITOR.editorConfig = function(config) { // Define changes to default configuration here. // For the complete reference: // http://docs.ckeditor.com/#!/api/CKEDITOR.config // The toolbar groups arrangement, optimized for two toolbar rows. config.toolbarGroups = [ { name: "clipboard", groups: [ "clipboard", "undo" ] }, { name: "editing", groups: [ "find", "selection", "spellchecker" ] }, { name: "links" }, { name: "insert" }, { name: "forms" }, { name: "tools" }, { name: "document", groups: [ "mode", "document", "doctools" ] }, { name: "others" }, "/", { name: "basicstyles", groups: [ "basicstyles", "cleanup" ] }, { name: "paragraph", groups: [ "list", "indent", "blocks", "align", "bidi" ] }, { name: "styles" }, { name: "colors" }, { name: "about" } ]; // Remove some buttons, provided by the standard plugins, which we don"t // need to have in the Standard(s) toolbar. config.removeButtons = "Underline,Subscript,Superscript"; // Se the most common block elements. config.format_tags = "p;h1;h2;h3;pre"; // Make dialogs simpler. config.removeDialogTabs = "image:advanced;link:advanced"; config.filebrowserImageUploadUrl = "/js/ckeditor/php/imageupload.php"; config.filebrowserImageBrowseUrl = "/js/ckeditor/php/imagebrowse.php"; };
Строка 38 указывает редактору подключить функционала загрузки файла в диалоге ввода картинки, строка 39 подключает функционал выбора уже загруженной картинки.
У нас редактор установлен в папку /js/ckeditor/ сайта. Там же мы создали папку php для наших серверных скриптов, эта папка должна иметь разрешение на выполнение для php скриптов.
Скрипт загрузки изображений imageupload.php .
