Тестовый дизайн новой версии сайта IGD.BY         RU   |   EN
Установка и настройка CKEditor. Подключение загрузки изображений
Автор: Кристофер

При разработке сайтов очень часто стоит задача реализации кастомных модулей, панелей администрирования и всевозможных веб-форм, в которых требуется более сложное редактирование контента. Для этих целей используются специальные JavaScript-решения, называемые визуальными редакторами или более часто WYSIWYG-редакторами (WYSIWYG — аббревиатура от "What You See Is What You Get" — "Что видишь, то и получаешь"). Наиболее популярными из них являются TinyMCE и CKEditor, о хитростях установки которого мы и расскажем в этой публикации. Плюс к этому вы узнаете как путем небольших манипуляций с кодом реализовать загрузку изображений на сервер в рамках этого редактора. 

1. Скачиваем CKEditor. Распаковываем архив в папку ckeditor в корне нашего сайта. 

2. Создаем тестовый файл примерно с таким содержанием:

<html>

<head>

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

</head>

<body>

<form method="post">

<p> Editor:<br />

<textarea id="editor" name="editor">Text here...</textarea>

<script type="text/javascript">

CKEDITOR.replace( 'editor' );

</script>

</p>

<p>

<input type="submit" />

</p>

</form>

</body>

</html>

Открываем файл в браузере, в результате чего должен отобразиться визуальный редактор CKEditor вместо стандартного поля textarea, как на иллюстрации.

 

3. Открываем в редакторе кода файл /ckeaditor/plugin/image/dialogs/image.js. В нем делаем поиск по слову "upload". Нас интересует запись следующая за строчкой с этим словом, а именно, "hidden=true" или "hidden=!0". Заменяем ее на "hidden=false". Теперь перегружаем нашу тестовую страницу. Нажимаем на кнопку с пиктограммой Image. В диалоговом окне появится слово "Загрузить". Если этого не произошло, почистите cookies и кэш браузера. Особенно это актуально для Chrome. Также стоит отметить, что в некоторых версиях Opera CKEditor работать не будет, об этом нужно знать. 

4. На данном этапе мы только включили данную опцию, но пока она работать не будет, потому как мы не указали правила загрузки на сервер. Для их реализации нужно в корне сайта создать новую папку upload и опять же в корне файл ckupload.php, после чего внести в него следующий код:

 

<?php

    $callback = $_GET['CKEditorFuncNum'];

    $file_name = $_FILES['upload']['name'];

    $file_name_tmp = $_FILES['upload']['tmp_name'];

    $file_new_name = $_SERVER['DOCUMENT_ROOT'].'/upload/';

    $full_path = $file_new_name.$file_name;

    $http_path = '/upload/'.$file_name;

    $error = '';

    if( move_uploaded_file($file_name_tmp, $full_path) ) {

    } else {

     $error = 'Some error occured please try again later';

     $http_path = '';

    }

    echo "";

?>

Обратите внимание, что папка upload, в которую будут загружаться все изображения, прописывается в переменной $file_new_name.

5. Открываем в редакторе кода файл /ckeditor/config.js. В нем подключаем наш файл, то есть, вписываем следующую строку:

 

CKEDITOR.editorConfig = function( config ) {

    // Define changes to default configuration here. For example:

    // config.language = 'fr';

    // config.uiColor = '#AADC6E';

    config.filebrowserUploadUrl = '../ckupload.php';

};


 

Всё, теперь загрузка изображений на сервер должна работать. Если этого не происходит, опять же почистите кэш и cookies браузера. Плюс такого решения очевиден — всё решается простой манипуляцией с кодом и не требует дополнительных модулей. Минус — все изображения загружаются в одну папку и при совпадении имен файлов, один будет затирать другой.