Обычно WYSIWYG редактор требуется когда необходимо написать админку, в которой обычному пользователю не знающему html, будет легко и удобно добавлять собственные тексты. Так было и в моем случае.
Скачиваем CKEditor с официального сайта:
Скачиваем бесплатный файл менеджер KCFinder:
Стандартным способом интегрируем CKEditor на сайт. Добавляем на страницу скрипт ckeditor.js (в моем случае скрипт лежит в корне сайта в каталоге ckeditor). KCFinder я распаковал в папку ckeditor, просто для удобства.
<script src="/ckeditor/ckeditor.js"></script>
Пусть на странице имеется поле textarea которое нужно заменить WYSIWYG редактором:
<textarea name="ckeditor"></textarea> <script> CKEDITOR.replace( 'ckeditor' ); </script>
Далее нам необходимо указать настройки в 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 в редакторе, текст заключается в тег <p> так же этот тег постоянно записывается когда пытаемся сохранить пустое поле с подключенным редактором. Чтоб это исправить добавляем небольшой скрипт:
if(typeof CKEDITOR !== 'undefined') {
CKEDITOR.on( 'instanceReady', function( ev ) {
// Output paragraphs as <p>Text</p>.
ev.editor.dataProcessor.writer.setRules( '*', {
indent: false,
breakBeforeOpen: true,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: true
});
});
}
Убрали автозаполнения тегом <p>, теперь уберем заключение текста в данный тег при нажатии на enter. Для этого допишем следующие настройки в файл конфигурации /ckeditor/config.js:
// при нажатии enter добавляем br config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR;
Если кажется что последние две строчки кода не помогают решению проблемы, очистите кеш браузера и повторите тестирование, все должно работать. Таким образом ваш редактор CKEditor c файловым менеджером KCFinder готов к работе, и выглядит очень даже не плохо.
Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.
Большое человеческое спасибо!
Перелопатил немало инфы в попытке корректно подключить kcfinder к ckeditor-у. Реально помогла только эта статья: коротко, ясно и по делу. Единственное, что на мой взгляд стоило бы добавить, так это то, что kcfinder по умолчанию отключен. Чтобы это исправит нужно в каталоге /ckeditor/kcfinder/ в скрипте с конфигурацией config.php изменить ‘disabled’ => true на ‘disabled’ => false.
Присоединяюсь к отзыву Temras! Большое спасибо, файловый менеджер заработал!
Привет.
Установил CKEditor и интегрировал в него KCFinder как описано в статье. CKEditor работает отлично, загрузка картинок в KCFinder тоже без проблем, но файл менеджер, вызываемый кнопкой «выбор на сервере» открывается пустым. Только пустое окно, разделенное по вертикали и кнопки интерфейса сверху.
При нажатии Хром выдает ошибки:
Не удалось распознать схему URI в «kcact:refresh».
Не удалось распознать схему URI в «kcact:upload».
и тд.
Файрфокс на любую кнопку:
Firefox doesn’t know how to open this address, because the protocol (kcact) isn’t associated with any program.
запускаю на Ubuntu+Apache/2.2.22+PHP 5.4.9 с GD библиотекой
В чем могут быть проблемы?
думаю дело в конфигах, посомтри в папке kcfinder/config.php. Там задается путь к папке в которую будут загружаться изображения.
‘uploadURL’ => «upload»,
‘uploadDir’ => «»,
либо эти папки можно задать в скрипте странице с едитором
$_SESSION['KCFINDER']['disabled'] = false; // enables the file browser in the admin
$_SESSION['KCFINDER']['uploadURL'] = Yii::app()->baseUrl.»/uploads/»; // URL for the uploads folder
$_SESSION['KCFINDER']['uploadDir'] = $_SERVER['DOCUMENT_ROOT'].»/uploads/»; // path to the uploads folder
с путями все путем! в том-то и дело! Файлы и картинки корректно загружаются и потом отображаются на странице, а вот непосредственно браузер файлов не работает. попробовал рецепт из этой статьи http://webguruz.ru/web-developer/yii/yii-extension-ckeditor-kcfinder/ – все аналогично, файлы и картинки грузятся на сервер, отображаются на страницах, а браузер остается пустым при вызове «Выбор на сервере».
Может нужны какие доп настройки в yii?
в логах js нет никаких ошибок?
в хроме ругается только на одну ошибку:
Uncaught TypeError: Cannot set property ‘checked’ of undefined joiner.php:2060
browser.init joiner.php:1487
вот тут при инициализации: browse.php?type=images&CKEditor=Articless_article_text&CKEditorFuncNum=1&langCode=ru:34
$(document).ready(function() {
browser.resize();
browser.init();
$(‘#all’).css(‘visibility’, ‘visible’);
});
и в файрфоксе там же ошибка:
TypeError: $(…).get(…) is undefined @ http://192.168.0.1/protected/extensions/ckeditor/kcfinder/js/browser/joiner.php:2060
скорее всего что то с подключением или версией jquery
похоже дело в настройках Апача или ПХП. Выложил на хостинг ничего не меняя – все отлично работает, даже в 7 эксплорере.
Может в апаче надо что-то прописать?
угадал.
Apache/2.2.х (FreeBSD 8.4) PHP 5.3.18 – работает
Apache/2.2.17 (Ubuntu) PHP 5.3.5 – работает
Apache/2.2.22 (Ubuntu) PHP 5.4.9 – не работает на двух свежеустановленных mint XFCE 15 где апач и пхп ставились из репозиториев
На оф. сайте KCFinder обновлений уже давно не было. То есть проект не развивается – в таком случае нет никаких гарантий, что при обновлении софта на хостинге KCFinder будет работать корректно. А жаль.
Ну и закончу:
в конфигурации Server version: Apache/2.4.6 (Ubuntu) + PHP 5.5.4 все отлично работает. Во всех случаях использовал одну и туже версию KCFinder (распакованную папку в корне сервера)
Так! Теперь, надеюсь, точно решено. Я правда так и не понял в чем дело. На двух одинаковых компах с Apache/2.4.6 (Ubuntu) + PHP 5.5.4 – на одном все работает без исправлений, на другом ошибка (см. выше). Но решение нашел тут http://community.modx-cms.ru/blog/tips_and_tricks/932.html
Помогите,пожалуйста!
У меня uploads сохраняется в директории C:\WebServer\home\localhost\www\uploads
В конфиге кручу-ничего не помогает(
Спасибо за полезную статью, послужила стартом в освоении связки ckfinder+ckeditor.
Есть одно замечание и просьба поправить информацию на странице, тк. текущая информация устарела.
Файл куда добавлять нужные настройки: ckeditor/config.js
«… на сервере открывался KCFinder, для этого добавляем в CKEDITOR.editorConfig следующие настройки:
config.filebrowserBrowseUrl = ‘/kcfinder/browse.php?type=files’;
config.filebrowserImageBrowseUrl = ‘/kcfinder/browse.php?type=images’;
config.filebrowserFlashBrowseUrl = ‘/kcfinder/browse.php?type=flash’;
config.filebrowserUploadUrl = ‘/kcfinder/upload.php?type=files’;
config.filebrowserImageUploadUrl = ‘/kcfinder/upload.php?type=images’;
config.filebrowserFlashUploadUrl = ‘/kcfinder/upload.php?type=flash’;
…
Спасибо за помощь.
У меня всегда сложности возникают при подключении редактора, т.к. не на популярных движках делаю. Из-за этого не часто сталкиваюсь с подключением именно файлового менеджера в редактор.
По вашей небольшой статье гораздо быстрее внедрил, и даже работает. Тестить, конечно, еще буду.
Да, кстати, в статью действительно стоит добавить, что файловый менеджер по-умолчанию отключен в конфиге, и нужно прописать
‘disabled’ => false
Я вот как-то даже мимо глаз пропускал эту строку, искал ошибку в другом. И даже не удосужился прочитать первый коммент.
В общем, статья помогла, в закладки.
Всем доброго времени суток.
ckeditor 4.4 не отображает кнопок загрузки файлов… Только через url.
Хотя сама кнопка в html’e есть…
Как включить, товарищи? Где это проверяется, ни где не могу найти инфу.
Привет. помогите разобраться. установил ckeditor, все работает, только вот при добавлении картинки выскакивает ошибка «XML request error: Not Found (404)»
Огромное спасибо автору – ОЧЕНЬ полезная статья. Сначала не мог разобраться, почему не работает, но благодаря комментам заработал KCFinder.
vampirrou, смотри комментарии. Мне помогли 2 вещи:
1) в файле config.php этого плагина нужно указать «‘disabled’ => false»;
2) настройки я плагина я не передаю объектом вторым параметром метода CKEDITOR.replace( ‘ckeditor’, {…} ), а указываю их в файле config.js в корне редактора.
Здравствуйте, подскажите пожалуйста, кто знает, как реализовать сохранение последней активной папки в ckfinder без интеграции в ckeditor
Пол-дня провозившись, пару часов назад подружил «ckeditor» и «ckfinder».
Хочу от себя добавить следущие моменты с «подводными камнями».
Файл настроек «kcfinder\conf\config.php»
1) «_normalizeFilenames» рекомендую выставить в TRUE, чтобы потом не было проблем с медиа-файлами, у которых имена набраны в кириллице
2) «_check4htaccess» выставить в FALSE, чтобы плагин не проверял наличие .htaccess в директории с медиа-файлами. И-за TRUE-значения вместо файлового менеджера у меня было абсолютно пустое окно без сообщения об ошибке
3) ‘uploadDir’ – выставлять полный физический путь к папке, используя $_SERVER['DOCUMENT_ROOT']
У меня всё. )
Как для CKFinder создать в Drupal 7 доступ в директорию /sites/default/files/pictures (где уже есть фото) для админа, и потом через профили CKEditor раздать доступ в /sites/default/files/images для зарегистрированных пользователей?
Спасибо большое. Реально сэкономил день рабочий прикручивания этого kcfindera. Еще небольшая поправочка. KCFinder получается тогда в папке \protected\extensions\ckeditor\kcfinder\ а при попытке открыть его он обращается к php файлам в этой папке, но по настройкам защиты, эта папка не должна быть видна снаружи. Потом я еще добавил публикацию этой папки в Assets и все прекрасно заработало.
$kceditorPath = Yii::app()->assetManager->publish(Yii::app()->basePath . ‘/extensions/ckeditor/kcfinder/’);
// опции для файлменеджера
$baseDir = Yii::app()->baseUrl . ‘/protected/extensions/ckeditor’;
$options['filebrowserBrowseUrl']= $kceditorPath . «/browse.php?type=files»;
$options['filebrowserImageBrowseUrl']= $kceditorPath . «/browse.php?type=images»;
$options['filebrowserFlashBrowseUrl']= $kceditorPath . «/browse.php?type=flash»;
$options['filebrowserUploadUrl']= $kceditorPath . «/upload.php?type=files»;
$options['filebrowserImageUploadUrl']= $kceditorPath . «/upload.php?type=images»;
$options['filebrowserFlashUploadUrl']= $kceditorPath . «/upload.php?type=flash»;
Спасибо за статью )
Словил подобную ошибку: перенес сайт на новую площадку с одного и того же провайдера (infobox), и получил: при открытии окна браузера с файлами – пустое окно, нажатие на любую кнопку в браузере получаю ошибку:
—————-
irefox не знает, как открыть данный адрес, так как один из следующих протоколов (kcact) не связан
ни с одной программой или не разрешен в этом контексте.
Для открытия данного адреса вам, возможно, понадобится установить стороннее программное обеспечение.
————–
Перечитал предыдущие сообщения но решить свою проблему не удалось…
Поставил, настроил, но при обзоре файлов пишет «Недостаточно прав». Ни просмотр не работает, ни загрузка…
Спасибо за статью. Очень помогла. Все прекрасно работает.