Обычно 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 готов к работе, и выглядит очень даже не плохо.
Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.