Обычно WYSIWYG редактор требуется когда необходимо написать админку, в которой обычному пользователю не знающему html, будет легко и удобно добавлять собственные тексты. Так было и в моем случае.

Скачиваем CKEditor с официального сайта: скачать ckeditor
Скачиваем бесплатный файл менеджер KCFinder: скачать 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 готов к работе, и выглядит очень даже не плохо.

Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.

Читать похожие статьи:

26 комментариев “Настройка CKEditor 4, подключение файлменеджера KCFinder”

  1. Temras:

    Большое человеческое спасибо!
    Перелопатил немало инфы в попытке корректно подключить kcfinder к ckeditor-у. Реально помогла только эта статья: коротко, ясно и по делу. Единственное, что на мой взгляд стоило бы добавить, так это то, что kcfinder по умолчанию отключен. Чтобы это исправит нужно в каталоге /ckeditor/kcfinder/ в скрипте с конфигурацией config.php изменить ‘disabled’ => true на ‘disabled’ => false.

  2. Вячеслав Ант:

    Присоединяюсь к отзыву Temras! Большое спасибо, файловый менеджер заработал!

  3. илья:

    Привет.
    Установил 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 библиотекой

    В чем могут быть проблемы?

  4. admin:

    думаю дело в конфигах, посомтри в папке 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

  5. илья:

    с путями все путем! в том-то и дело! Файлы и картинки корректно загружаются и потом отображаются на странице, а вот непосредственно браузер файлов не работает. попробовал рецепт из этой статьи http://webguruz.ru/web-developer/yii/yii-extension-ckeditor-kcfinder/ – все аналогично, файлы и картинки грузятся на сервер, отображаются на страницах, а браузер остается пустым при вызове «Выбор на сервере».
    Может нужны какие доп настройки в yii?

  6. admin:

    в логах js нет никаких ошибок?

  7. илья:

    в хроме ругается только на одну ошибку:
    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

  8. admin:

    скорее всего что то с подключением или версией jquery

  9. илья:

    похоже дело в настройках Апача или ПХП. Выложил на хостинг ничего не меняя – все отлично работает, даже в 7 эксплорере.
    Может в апаче надо что-то прописать?

  10. илья:

    угадал.
    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 будет работать корректно. А жаль.

  11. илья:

    Ну и закончу:
    в конфигурации Server version: Apache/2.4.6 (Ubuntu) + PHP 5.5.4 все отлично работает. Во всех случаях использовал одну и туже версию KCFinder (распакованную папку в корне сервера)

  12. илья:

    Так! Теперь, надеюсь, точно решено. Я правда так и не понял в чем дело. На двух одинаковых компах с Apache/2.4.6 (Ubuntu) + PHP 5.5.4 – на одном все работает без исправлений, на другом ошибка (см. выше). Но решение нашел тут http://community.modx-cms.ru/blog/tips_and_tricks/932.html

  13. dmitry:

    Помогите,пожалуйста!
    У меня uploads сохраняется в директории C:\WebServer\home\localhost\www\uploads
    В конфиге кручу-ничего не помогает(

  14. Сергей:

    Спасибо за полезную статью, послужила стартом в освоении связки 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’;

  15. Bobr:

    Спасибо за помощь.

    У меня всегда сложности возникают при подключении редактора, т.к. не на популярных движках делаю. Из-за этого не часто сталкиваюсь с подключением именно файлового менеджера в редактор.

    По вашей небольшой статье гораздо быстрее внедрил, и даже работает. Тестить, конечно, еще буду.

    Да, кстати, в статью действительно стоит добавить, что файловый менеджер по-умолчанию отключен в конфиге, и нужно прописать
    ‘disabled’ => false
    Я вот как-то даже мимо глаз пропускал эту строку, искал ошибку в другом. И даже не удосужился прочитать первый коммент.

    В общем, статья помогла, в закладки.

  16. vampirrou:

    Всем доброго времени суток.

    ckeditor 4.4 не отображает кнопок загрузки файлов… Только через url.
    Хотя сама кнопка в html’e есть…
    Как включить, товарищи? Где это проверяется, ни где не могу найти инфу.

  17. Привет. помогите разобраться. установил ckeditor, все работает, только вот при добавлении картинки выскакивает ошибка «XML request error: Not Found (404)»

  18. softua:

    Огромное спасибо автору – ОЧЕНЬ полезная статья. Сначала не мог разобраться, почему не работает, но благодаря комментам заработал KCFinder.

    vampirrou, смотри комментарии. Мне помогли 2 вещи:
    1) в файле config.php этого плагина нужно указать «‘disabled’ => false»;
    2) настройки я плагина я не передаю объектом вторым параметром метода CKEDITOR.replace( ‘ckeditor’, {…} ), а указываю их в файле config.js в корне редактора.

  19. Здравствуйте, подскажите пожалуйста, кто знает, как реализовать сохранение последней активной папки в ckfinder без интеграции в ckeditor

  20. Rain Summers:

    Пол-дня провозившись, пару часов назад подружил «ckeditor» и «ckfinder».
    Хочу от себя добавить следущие моменты с «подводными камнями».
    Файл настроек «kcfinder\conf\config.php»
    1) «_normalizeFilenames» рекомендую выставить в TRUE, чтобы потом не было проблем с медиа-файлами, у которых имена набраны в кириллице
    2) «_check4htaccess» выставить в FALSE, чтобы плагин не проверял наличие .htaccess в директории с медиа-файлами. И-за TRUE-значения вместо файлового менеджера у меня было абсолютно пустое окно без сообщения об ошибке
    3) ‘uploadDir’ – выставлять полный физический путь к папке, используя $_SERVER['DOCUMENT_ROOT']
    У меня всё. )

  21. Геннадий:

    Как для CKFinder создать в Drupal 7 доступ в директорию /sites/default/files/pictures (где уже есть фото) для админа, и потом через профили CKEditor раздать доступ в /sites/default/files/images для зарегистрированных пользователей?

  22. Спасибо большое. Реально сэкономил день рабочий прикручивания этого 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»;

  23. Спасибо за статью )

  24. BlackRed:

    Словил подобную ошибку: перенес сайт на новую площадку с одного и того же провайдера (infobox), и получил: при открытии окна браузера с файлами – пустое окно, нажатие на любую кнопку в браузере получаю ошибку:
    —————-
    irefox не знает, как открыть данный адрес, так как один из следующих протоколов (kcact) не связан
    ни с одной программой или не разрешен в этом контексте.

    Для открытия данного адреса вам, возможно, понадобится установить стороннее программное обеспечение.
    ————–
    Перечитал предыдущие сообщения но решить свою проблему не удалось…

  25. Дмитрий:

    Поставил, настроил, но при обзоре файлов пишет «Недостаточно прав». Ни просмотр не работает, ни загрузка…

  26. Спасибо за статью. Очень помогла. Все прекрасно работает.

Оставить комментарий