Установка визуального редактора ckeditor с файловым менеджером

Визуальный редактор с файловым менеджером

От автора: когда мы создаем сайт, предполагающий административную часть, то рано или поздно нам придется столкнуться с вопросом визуального редактора для добавления/редактирования контента на сайте. Те, кто знакомы с языком разметки HTML, могут обойтись и без подобного редактора, вводя теги в поля формы вручную… но, согласитесь, это крайне неудобно. Да и что делать, если сайт мы пишем на заказ? Клиент ведь может вообще не знать такого слова — «тег».

Давайте решим эту проблему.

Детали учебника

Тема: Сайтостроение

Сложность: Легкая

Урок: Видео (.mp4)

Время: 00:43:09

Размер архива: 81 Mb

скачать исходникискачать урок

Говоря о визуальном редакторе, в сети Вы можете встретить такой термин, как WYSIWYG-редактор. На самом деле — это аббревиатура, которая расшифровывается следующим образом — «What You See Is What You Get». Перевести эту фразу можно буквально так — «Что ты видишь, то ты и получишь».

Подобных редакторов довольно много. Есть как платные, так и бесплатные решения. Наиболее известны и широко используемы редакторы TinyMCE и CKeditor. Сегодня мы как раз будем использовать второй из них — CKeditor.

Для работы с этими редакторами совсем необязательны знания HTML/CSS, и наполнять сайт может рядовой пользователь, достаточно лишь немного разобраться. Панель таких редакторов очень напоминает панель небезызвестного MS Word (который по сути своей также является WYSIWYG-редактором). Вот как выглядит стандартная панель редактора CKeditor:

Визуальный редактор с файловым менеджером

Итак, для того, чтобы научиться устанавливать визуальный редактор на страницы своего сайта, нам потребуется простенький тестовый сайт из одной странички, точнее из двух — вторая будет страницей административной части. Поскольку создание сайта с использованием БД не является целью нашего урока, то этого момента я лишь вскользь касаюсь в видеоверсии урока, объясняя принцип работы заранее написанного функционала.

Таким образом, страница для работы у нас имеется. Для установки WYSIWYG-редактора нам потребуется его дистрибутив. Его Вы найдете в дополнительных материалах либо можете скачать с офсайта — ckeditor.com

Безусловным преимуществом редактора является простота его установки. Сразу следует отметить, что редактор используется только для текстовых областей (textarea), т.е. использовать его для полей ввода (input) нельзя. Первое, что нужно сделать для подключения редактора — это подключить скрипт ckeditor.js… подключаем в области head:

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

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

<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>

Последним этапом будет небольшой участок кода JavaScript сразу после текстовой области. Этот код как раз и установит редактор для искомого поля формы:

<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>
		<script type="text/javascript">
			var ckeditor1 = CKEDITOR.replace( 'editor1' );
			AjexFileManager.init({
				returnTo: 'ckeditor',
				editor: ckeditor1
			});
		</script>

Дело сделано… Теперь можем сохранить результаты работы и протестировать. Если все сделано верно, то теперь к текстовой области подключается визуальный редактор и мы сможем форматировать текст непосредственно из него:

Визуальный редактор с файловым менеджером

Казалось бы все отлично. Но на самом деле это только половина работы. Все дело в том, что в бесплатной версии не предусмотрен файловый менеджер. Это значит, что загрузить, к примеру, картинку для статьи посредством установленного редактора не получится. Именно поэтому следующей нашей задачей будет интеграция файлового менеджера в редактор.

Уже готовое решение можно найти на сайте demphest.ru, где автор предлагает некоммерческий файловый менеджер, который, к слову, подходит как для CKEditor, так и для TinyMCE. В дополнительных материалах Вы найдете дистрибутив данного плагина или можете взять его с офсайта.

Итак, для интеграции нам потребуется для начала подключить скрипт ajex.js:

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

И немного изменить скрипт, инициализирующий визуальный редактор:

<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>
		<script type="text/javascript">
			var ckeditor1 = CKEDITOR.replace( 'editor1' );
			AjexFileManager.init({
				returnTo: 'ckeditor',
				editor: ckeditor1
			});
		</script>

Готов наш визуальный редактор php. Опять-таки ничего сложного. После подключения мы можем запустить файл ajax.php с GET-параметром isWork. Этот скрипт создаст необходимые каталоги, куда и будут сохраняться файлы, загружаемые из редактора.

Вот теперь все. Наш визуальный редактор с файловым менеджером готовы — осталось только наслаждаться теперь уже простой возможностью добавления/редактирования контента.

На этом наш урок завершен. Ваши вопросы и отзывы всегда будем рады видеть в комментариях. Удачи в Ваших разработках и до новых встреч!

Создание файлового менеджера с помощью DirectoryIterator

Прямо сейчас посмотрите курс по созданию файлового менеджера с помощью DirectoryIterator!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (87)

  1. Виктор

    Довольно конкурентная штука. Я свой сайт rostov-football.ru делаю на Дримвейвере. Есть и плюсы и минусы. Но мне хватает, чтобы получать результат. Главный недостаток — нет админки, которая бы убыстрила работу. Плюс — могу полностью контролировать все страницы и их видеть на локальном компьютере. Всем всего доброго!

    • Тая

      Dreamweaver — это класс, но ведь можно сделанный на нем сайт соединить с движком — и будет админка.

  2. Илона

    Андрей, СПАСИБО!
    Будет чем заняться вечером, поэкспериментирую сегодня …

  3. Андрей

    Прикольно!Постоянно что-то новенькое и любопытное,но не всегда реагирую на платные уроки.Много дельного,вот если бы по-больше и без денег :-) .
    Всегда с благодарностью.

  4. Артур

    Спасибо за урок, будем пробовать

  5. Svetlana

    Спасибо!!

  6. Alex

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

  7. Pocherk

    Совсем недавно заморачивался проблемой установки файлового менеджера для CKeditor, но я использовал KCFinder — тоже бесплатный и не хуже рекомендованого в этой статье.

  8. Зоя Сидоренко

    Андрей! Доброго времени суток! У Вас есть уже опыт, подскажите смог бы «чайник» по нормальному самоучителю создать свой сайт
    С уважением Зоя И.

    • Андрей Кудлай

      Здравствуйте, Зоя. Было бы желание и стремление, а знания и умения — это дело наживное… так что ответ — конечно, да.

  9. Михаил

    Сkeditor действительно неплохой редактор. Статья полезная. Хотел бы добавить, что возможно редактирование текстов без использования базы данных. Особенно это
    касается сайтов, где для редактирования предназначены 2-3 файла. Я добавил выбор файлов для редактирования. В моем случае это четыре файла, но можно увеличить их число, если возникает такая надобность.
    Изменил файл загрузчика, который распознает необходимое место загрузки. Вот и все. В остальном установка редактора осталась без изменений.
    Листинг файлов я поместил на своем сайте artminsk.narod.ru/download.html
    Буду рад, если это кому-то пригодится.

  10. Виктор

    Андрей! Поясни пожалуйста, зачем нужен такой редактор, если он уже есть в ВордПресе? Извини, если я что-то не так понял.

    • Андрей Кудлай

      Все просто — не все пользуются готовыми продуктами в виде CMS (WordPress, Joomla и т.д.). Многие пишут собственные CMS, где как раз и необходимо устанавливать визуальный редактор.

  11. Konstantin

    Буду очень удивлён, если у кого-то по написанному что-то получилось корректно.
    Легко видно, что необходима ручная корректировка.

  12. Дмитрий

    Что-то я у себя все установил. Сразу работало, но вот через некоторое время появилась проблема.
    Нажимаю на кнопку «посмотреть на сервере» и окно не открывается. Видно что оно грузится но переключиться в него невозможно.
    Почему появилась такая проблема? Спасибо.

    • Андрей Кудлай

      С такой проблемой не сталкивался… сложно сказать без личного участия в проблеме…

      • Дмитрий

        Проверил в эксплорере работает, а вот гугл хром перестал открывать окно, вернее открывает, но в него переключиться нельзя.
        Может какие настройки Хрома???

        • Андрей Кудлай

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

  13. Эльвира

    Понравился урок, спасибо. А как можно убрать кнопку в CKeditor, например мне не нужна кнопка flash или форма, поле и т.д.?

    • Андрей Кудлай

      Пожалуйста.
      Для того, чтобы использовать свою панель инструментов, необходимо использовать метод toolbar, в котором указать необходимые настройки. О способах его использования можно посмотреть в документации на офсайте.
      Если что-то будет непонятно — милости просим на наш форум.

  14. Наталья

    Просто шикарный урок!!! Спасибо Вам, Андрей! Благодаря Вам решила свои проблемы. Перерыла весь Интернет, но таких подробных объяснений нигде не нашла! Добавила Ваш сайт в закладки — буду учиться.

  15. Сергей

    Добрый день. Редактор подключил быстро. Большое спосиба. Плагин с загрузкой картинок тоже подключил
    но он не корректно работает. Как вы говорили в уроке запустил файл чтоб он создал папки вот к нему путь localhost/kulinar/js/AjexFileManager/ajax/php/ajax.php?isWork ничего не происходит. Попробывал создать папки в ручную я их посмотрел в матерьялах к сайту создал их в корневой дириктории сайта как и у вас в примере изображения всеровно не загружаются. Не подскажите в чем может быть проблема.
    Спасибо.

    • Андрей Кудлай

      Добрый день.
      А что значит «ничего не происходит» при обращении к скрипту? Совсем ничего? Или выдает какие-то ошибки? Или просто белая страница? Или еще что? И что все же происходит при попытке загрузки картинок? Может, опять же, какие-то ошибки?
      Слишком мало информации, чтобы сказать что-то определенное. Создайте тему на нашем форуме, опишите более конкретно что происходит, можно приложить скриншоты, и тогда уже можно будет что-то предположить.
      Также можете попробовать урок Файловый менеджер KCFinder, который будет попроще в применение… только исходники желательно брать именно из урока.

      • Сергей

        Нет просто выдает белый экран. А когда пытаешься загрузить картинку пишет не введен url изобоажения

        • Андрей Кудлай

          Ну варианты я ниже предложил.

          • Сергей

            Большое спосибо я поставил другой файловый менеджер все работает. Не знаешь в настройках этого файлового менеджера где можно выставить максимальный объем загружаемого файла.

          • Андрей Кудлай

            В документации об этой настройке не упоминается. Насколько я могу судить по ошибкам при загрузке файлов, такой настройки и нет. В любом случае, больше того объема, который установлен в настройках на сервере (как правило, это 2 Mb), загрузить не получится.

  16. bykoff

    Андрей, добрый день!
    Спасибо за урок. У меня остался всего один вопрос — безопасность AjexFileManager.
    В файле AjexFileManager/ajax/php/ajax.php есть строчка: //if (!isset($_SESSION['admin'])) {exit;} // Do not forget to add your user authorization.
    Она совершенно справедливая. Разкомментировав ее и указав свою «ячейку» в суперглобальном массиве $_SESSION файловый менеджер работать перестает, получается, что туда сессия не приходит.
    CMS написана по вот этому уроку:
    http://webformyself.com/minikurs/cmsfree/free.html

    Может подскажете как быть с решением?
    Заранее спасибо.

    • Андрей Кудлай

      Добрый день.
      В особенности работы этого файлового менеджера я не вдавался, но получается, что в сессии должен быть элемент admin ($_SESSION['admin']), чтобы можно было работать с файловым менеджером. Также вполне возможно, что эту сессию нужно открыть — session_start().
      Вообще, рекомендую использовать файловый менеджер из этого урока — Файловый менеджер KCFinder. В этом уроке я коснулся и вопросов безопасности в том числе. Единственное, исходники лучше брать из урока, поскольку KCFinder может не работать с последними версиями CKEditor, если они не поправили этот момент.

  17. Александр

    Здравствуйте! Скажите, пожалуйста, как подключить CKEditor сразу ко всем полям на странице? Делаю так
    CKEDITOR.replace(‘.ckeditor’);

    В итоге вместо textarea появляется редактор только для одного поля, другие же textarea вовсе исчезают со страницы. Пробовал делать на более новой версии редактора, всё работает, а на той, что чуть постарее нет. Новая версия не устраивает, так как она стандартная. А мне нужно подключить редактор в админку (старую версию) максимальную версию.
    Помнится читал раньше, что какой-то командой (скриптом) определив его в header, можно сразу менять все текстовые поля на редактор, где бы они не находились на сайте, каждый раз не прописывая подключение визуального редактора. Вот что эта за строчка?

    • Андрей Кудлай

      Здравствуйте.
      А почему просто не подключить редактор к каждому конкретному полю по его имени или ID? Или полей очень много?
      Если хочется все же подключить сразу ко всем полям одной строкой, тогда нужно из папки /ckeditor/adapter/ подключить специальный плагин jquery.js (он там один должен быть), который должен позволить решить задачу. Пример можно найти в документации — подключаем адаптер и вызываем метод ckeditor().

  18. Светлана

    Здравствуйте! На сайте редактор ckeditor 3.6 был установлен через php. Хотелось бы обновить его до 4.4.7, только не понятно что писать вместо

    $CKEditor = new CKEditor($OUT["ELEMENT"]['text'], «page_text»);
    $OUT['REDAKTOR'] = $CKEditor->returnHTML;

  19. serg

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

  20. Екатерина

    Андрей, у меня возникла сложность с данным редактором, помогите пожалуйста если сможете.
    Сам редактор работает, отформатировать в нем тоже можно так как нужно, но сами стили на сайте не применяются (Только выделение жирным).
    Как можно решить данную проблему?

    • Андрей Кудлай

      Посмотрите через Firebug, скорее всего у Вас через стили сброшены дефолтные стили для тегов форматирования. Соответственно, нужно убрать лишний сброс стилей. Если не разберетесь, тогда создайте тему на нашем форуме, дайте ссылку на сайт, посмотрю.

  21. Виталий

    Вот автоинициализация всех полей textarea у которых надо указать параметр data-CKEditor (с любым параметром) и ид естественно (так как по ид подключается).

    $(document).ready(function () {
    CKEditorInObj = new Object();
    CKEditorInObj = {};

    $("textarea[data-CKEditor]").each(function () {
    var elem = $(this).attr("id");

    CKEditorInObj[elem] = CKEDITOR.replace( elem );
    AjexFileManager.init({
    returnTo: 'ckeditor',
    editor: CKEditorInObj[elem]
    });

    });
    });
    function updateField(id){
    var textB = CKEditorInObj[id];
    var text = textB.getData();
    $("textarea#"+id+"").html(text);
    }


    Скрипт инициализации подключать в head.
    Так же можно для работы с CKEeditor API работать через объект CKEditorInObj обращение к конкретному объекту поля происходит по типу CKEditorInObj.ИД_поля пример в данном случае CKEditorInObj.field1

  22. Александр

    Здравствуйте, Андрей! Подскажите пожалуйста, почему в максимальной версии редактора не работают отступы для текста? Нажимаешь на кнопочку «увеличить отступ», в итоге ничего…
    Для создания отступов установлен этот плагин: http://ckeditor.com/addon/indentblock

    Пробовал использовать этот плагин: http://ckeditor.com/addon/indent — эффект тот же, а вернее говоря, всякое отсутствие эффекта — отступы не работают.
    Может быть что-то нужно где-то включить в конфиге или установить дополнительный вспомогательный плагин?

    • Андрей Кудлай

      Здравствуйте, Александр.
      К сожалению, ни с одним из этих плагинов не работал, поэтому с такими проблемами не сталкивался.

  23. Александр

    Здравствуйте, Андрей! Подскажите пожалуйста, как победить такую проблему в CKeditor. Суть состоит в следующем… Редактирую текст при этом на определённые главы текста добавляю якоря. Всё работает, но при проверке валидности кода на https://validator.w3.org/ выдаёт ошибку: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
    . Всё дело в том, что редактор автоматически для якорей прописывает и id и name. Я использую стандарт HTML5, поэтому мне нужно для якорей только id, если я бы использовал более раннюю спецификацию, то мне нужен был бы тег name.
    Вопрос: как сделать, чтобы CKeditor проставлял для якорей только тег id и не прописывал бы тег name?

    • Андрей Кудлай

      Здравствуйте, Александр.
      Попробуйте использовать последнюю версию редактора, возможна она будет совместима с HTML5. Также, думаю, можно попробовать решить задачу на уровне API редактора, но с ним, к сожалению, я практически не работал.

  24. Александр

    Спасибо за как всегда оперативный ответ! Я пробовал последнюю версию всё то же. Пробовал прописывать в config disallowedContent = ‘a[name] — как итог, вообще пропадают все теги использующие атрибут name. Пробовал редактировать сам плагин — как итог, тег name не прописывает, но при отправлении формы анкор вообще не сохраняет.
    Нашёл в плагине такую логику, что типа обязательные атрибуты для ссылок это href и для анкоров name. И вот если их нет, то тогда редактор выкидывает совсем ссылку при попытке сохранить.
    Буду искать дальше. Но баг существенный, — очень неудобно так работать с якорями.
    Даже если потом вручную из кода удалить все name для анкоров, после открытия этого же текста в CKe, редактор автоматически прописывает тег name…
    Если найду решение, то напишу.

  25. Александр

    Здравствуйте, Андрей! Разобрался я с одним вопросом по CKEditor, о котором я у Вас спрашивал ранее, — по поводу отступов текста(красной строки).
    Нашёл решение, почитав документацию и разобравшись в конфигах.
    Решение состоит в следующем.
    По умолчанию в максимальной версии редактора добавлен плагин для отступов текста indentlist, который работает при условии если установлен обязательный плагин indent. Indentlist работает для ul списков, там отступ срабатывает корректно при нажатии на соответствующую кнопку, это видно и визуально в редакторе и на отредактированной странице сайта.
    Ещё есть аналог плагину Indentlist плагин indentblock, который по описанию с офф. сайта делает отступы для всего.
    В итоге есть несколько вариантов добавления красивых и ровных отступов для параграфов и блоков текста.
    1) использовать любой плагин Indentlist либо indentblock, без использования конфигов для них.
    При необходимости изменения настроек по умолчанию на свои
    в конфигах нужно прописать следующее:
    config.indentOffset = 3; //Defaults to: 40 — отступ единиц
    config.indentUnit = ‘em’; //Defaults to: ‘px’ — тип единицы(пиксели, пункты)
    при этом настройка класс для отступа — config.indentClasses должна быть не задана, иначе мы отступов не увидим, настройки indentOffset и indentUnit при этом не сработают.
    При таком подходе при каждом нажатии на кнопку «увеличить отступ» к блоку будет применяться стиль: style=»margin-left: 40px;», следующее нажатие style=»margin-left: 80px;» и т.д.
    2) второй подход, думаю более удобный, по крайней мере для меня. Для этого задаём одну настройку класса
    config.indentClasses = ["rientro"];
    затем в файле css сайта прописываем правило:
    /*отступ текста(красная строка)*/
    .rientro{
    text-indent: 3em;
    }
    Визуально при редактировании текста в редакторе отступы не будут видны, но на страницах сайта добавятся аккуратненькие красные строки для параграфов к которым был применён отступ.
    Так же для параграфов можно задавать свой класс, например, так:
    config.format_p = { element : ‘p’, attributes : { ‘class’ : ‘normalPara’ } }; //Defaults to: { element: ‘p’ }

    • Андрей Кудлай

      Здравствуйте, Александр!
      Отлично, что поделились решением ;) Уверен, оно пригодится другим пользователям, если они столкнуться с аналогичной задачей.

  26. Александр

    Здравствуйте, а подскажите пожалуйста как сделать чтобы при редактировании не появлялся тег p, и чтобы не резались стили и классы. Спасибо!

    • Андрей Кудлай

      Здравствуйте, Александр. Поищите на нашем форуме, насколько я помню, когда-то там рассматривались подобные вопросы.

    • Александр

      Чтобы не появлялся тег p нужно в конфиге редактора прописать такую строчку:
      config.enterMode = CKEDITOR.ENTER_BR; — тогда тег p будет заменяться на
      Второй вариант можно в конфиге вообще запретить тег p указав в конфиге такую сторчку: config.disallowedContent = ‘p’;
      Третий вариант, можно конкретно указать, какие теги разрешены(но это не оптимально, хотя, как вариант…):
      config.allowedContent = true; /* all tags */
      Теги режет потому, что у вас на приёме данных из формы используется фильтрация html тегов. Если Вы используете какой-либо фрамворк, то проверьте в настройках конфигов фрамворка не включена ли у Вас глобальная xcc фильтрация. Если используете свой движок, то проверьте, как у Вас обрабатываются данные из формы для CKEditor, например, не используется ли функция htmlspecialchars();

  27. Алексей

    Здравствуйте.
    Скачал, установил на локалке, все работает. Установил на сайт в нете, запускаю http://мой сайт/AjexFileManager/ajax/php/ajax.php?isWork

    Выдает вот это:

    Directory not found: /usr/local/apache/htdocs/upload/
    Failed created, You need to create the folder manually, or set the right
    Вам необходимо создать папку вручную, или выставить права

    Подскажите пожалуйста, в чем может быть проблема, ошибка?

    • Андрей Кудлай

      Здравствуйте.
      Ошибка указана, Вы ведь сами ее и показали: редактор не можете создать необходимую папку или у него нет прав. Создайте ее вручную и установите для нее необходимые права — 777. Вообще, рекомендую использовать вместо этого уже готовое решение — Файловый менеджер KCFinder

      • Алексей

        KCFinder отличный вариант, но он не подходит, т. к. я не могу изменить версию php на хостинге, максимум 5.2.x, а надо не ниже 5.3.
        По поводу прав, пробовал изменять на 775 и 777, бестолку… Все равно выдает: Directory not found: /usr/local/apache/htdocs/upload/
        Failed created, You need to create the folder manually, or set the right
        Вам необходимо создать папку вручную, или выставить права.

        Когда просто открываю файловый менеджер, папка upload присутствует, но сам редактор не реагирует. Помогите разобраться, хотябы подскажите в чем ошибка? Т. к. на локальном сервере все работает, а на хостинге нет, даже с выставленными правами на папку upload.

        • Андрей Кудлай

          KCFinder отлично подходит, поскольку можно скачать другую версию релиза, работающую с PHP 5.2. В частности, версия из исходников урока, на который я давал ссылку, должна работать, попробуйте.
          Относительно ошибки я уже сказал, других вариантов у меня нет: либо не хватает прав, либо редактор пытается искать папку не по тому пути.

          • Алексей

            Скачал исходники… Опять же))), на локалке все работает, а на хостинге выдает, теперь уже вот это:

            PHP Error Message

            Warning: is_dir() [function.is-dir]: open_basedir restriction in effect. File(/usr/local/apache/htdocs/scripts/kcfinder) is not within the allowed path(s): (/home/:/usr/lib/php:/tmp) in /home/a1512798/public_html/scripts/kcfinder/core/uploader.php on line 225

            Free Web Hosting

            PHP Error Message

            Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/usr/local/apache/htdocs/scripts/kcfinder/.htaccess) is not within the allowed path(s): (/home/:/usr/lib/php:/tmp) in /home/a1512798/public_html/scripts/kcfinder/core/uploader.php on line 254

            Free Web Hosting

            Куда копать? В сторону хостера или это можно решить изменив чего в коде?

          • Андрей Кудлай

            Скорее всего, проблема в хостинге. Насколько я понимаю, Вы используете бесплатный хостинг. Если так, то вряд ли что-то получится, поскольку бесплатные хостинги зачастую предлагают урезанный функционал. Решение Вашей ошибки можно найти, немного погуглив, например в этой статье. Однако, повторюсь, вряд ли на бесплатном хостинге Вы сможете что-то решить с этой ошибкой.

          • Алексей

            Ура! Наконец-то нашел решение)))
            Покопавшись на форуме хостинга, понял, что на бесплатном «плане», абсолютный путь выглядит немного по другому, т. к. защита самого хостера (сервера). Поэтому, путем добавления всего одной строчки в самом верху файла uploader.php, вида $_SERVER['DOCUMENT_ROOT'] = "/home/папка_клиента/public_html/"; все заработало как и полагается)))

            В любом случае, СПАСИБО что направили на правильное решение вопроса)))

          • Андрей Кудлай

            Отлично, что получилось разобраться и решить проблему ;)

  28. Алексей

    День добрый, мне понравилась Ваша статья. вот только столкнулся с проблемой при добавление в свой проект. суть: проект использует ЧПУ как и многие сайты /контроллер/экшен/параметр1/параметр2/… и т.д. с просто загрузкой картинок на сервер более менее удалось справится, а вот с выводом из папки на сервер не получается. что надо прописать в экшоне чтобы в редакторе появилось возможность выбора картинок
    пути не могут быть с»?» и»&» только через «/»
    спасибо

    • Андрей Кудлай

      Добрый день.
      Во-первых, решение в текущем уроке устарело, поэтому рекомендую использовать решение из этого урока — Файловый менеджер KCFinder.
      Ну а, во-вторых, все зависит от Вашего проекта. Если папка с картинками находится в корне сайта и называется uploads, тогда обращайтесь просто — site/uploads/картинка… Никаких контроллеров и экшенов для вывода картинки не нужно, поскольку по умолчанию при обращении к существующему файлу по прямому адресу этот файл отдается без какой-либо обработки. Например, Ваши файлы стилей или скрипты или другие картинки — все это отдается без необходимости какого-либо контроллера или метода.
      Относительно фразы «выводом из папки на сервер», то здесь мне не совсем понятно… если картинка в папке, то она уже на сервере, поэтому не очень понятно, куда Вы хотите ее вывести.

      • Алексей

        тот роли тожее смотрел не помог
        видимо я не точно изложил проблему в настройках cоnfig.js

        CKEDITOR.replace(‘replace’, {
        ‘filebrowserImageBrowseUrl’ :’/media/js/kcfinder/browse.php?type=images’, // так написать не могу ошибка
        // лежит ckfinder : ‘/media/js/kckfinder’
        ‘filebrowserUploadUrl’ :’/ajax/ckupload’ // вот пример контроллер и экшен
        }
        вот для него «filebrowserImageBrowseUrl» какой путь указать и похожим настройкам

        • Андрей Кудлай

          Повторюсь, зависит от настроек и конфигурации Вашего проекта. По умолчанию у Вас должен быть разрешен прямой доступ к файлу browse.php, если указан корректный путь к нему. GET-параметры здесь роли не играют, они доступны всегда. Если у Вас не получается достучаться к файлу, значит, указан неверный путь к нему.
          ‘filebrowserUploadUrl’ :’/ajax/ckupload’ // вот пример контроллер и экшен — это не понял для чего и где Вы это используете, в уроке, насколько я помню, подключение происходит не так и используется объект config… в любом случае, не нужен никакой контроллер и экшен, нужно правильно указать путь к файлу, можно указать абсолютный путь, начиная с http, если с относительным проблемы.

          • Алексей

            благодарю Вас за быстрое реагирование, я разобрался. все оказалось банально и даже как-то глупо :) , проблема была что сам он не смог создать нужные директории, как только сделал ручками тут же стало работать. спасибо за помощь

          • Андрей Кудлай

            Пожалуйста :)

  29. Алексей

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

    • Андрей Кудлай

      А что подсказать? Сформулированного вопроса не увидел… Если Вы хотите меньше функционала дать пользователям, то это делается в настройках редактора. Вот ссылка на соответствующий раздел документации.

  30. Алексей

    Подскажите, как решить проблему с выравнивание картинки? А именно, имеется только два варианта расположения картинки лево и право, по центру невозможно выставить картинку.
    Пробовал в ручную прописывать в стиле картинки, но она остаётся на месте. Пробовал float и margin, бестолку, работает только лево или право.

    • Андрей Кудлай

      Во вкладке дополнительно прописать css класс, отвечающий за выравнивание по центру, а в файле стилей описать правила для этого класса.

      • Алексей

        Я же написал, что пробовал в ручную. В файле стилей тоже прописывал и указывал во вкладке дополнительно класс стиля, не работает.

        • Андрей Кудлай

          Какие правила прописывали? Появился ли класс для картинки? Ничего этого Вы не написали и скрыли за одной фразой — «пробовал в ручную прописывать в стиле картинки»… К сожалению, я не экстрасенс и не вижу отсюда, что творится в Вашем коде.
          Я написал, что нужно сделать, только что попробовал сам это сделать по инструкции, которую написал — у меня все без проблем получилось. Дайте ссылку на страницу с картинкой, тогда можно будет подсказать, почему у Вас не получается.

          • Алексей

            Сайт на лркалке.
            Может быть я не правильно прописываю стиль?

            .img_bl {border: 1 px solid #ddd; padding: 3px; float: center;}

            В дополнительно, в поле класс прописываю img_bl, не работает, сама рамка вокруг картинки с отступом в 3px есть, а по центру не выравнивается.

          • Андрей Кудлай

            Да, не правильно. Для свойства float нет значения center. Картинка центрируется, к примеру, так:
            .img_bl {display: block; margin: auto;}

          • Алексей

            Вот же))) Спасибо, теперь работает.
            Правда все равно не понятно, почему данная возможность выравнивания картинки по центру с помощью выбора расположения картинки, не учли в редакторе…

          • Андрей Кудлай

            Пожалуйста)

  31. Наталья

    Здравствуйте. Благодаря Вашим урокам установила ckeditor на один из сайтов, подключила файловый менеджер и все прекрасно работает. Спасибо!

    Но у меня очень важный вопрос, который я не могу разрешить: Как подключить ckeditor к нескольким страницам на сайте? Мне очень нужно! К кому я могла бы обратиться за помощью?

    • Андрей Кудлай

      Здравствуйте, Наталья. Подключать к другой странице точно так же, как подключали и к первой. Собственно, можно просто скопировать код с той страницы, к которой подключен редактор. Если возникнут какие-то дополнительные вопросы, то их лучше задать на нашем форуме — там удобнее решать такие вопросы.
      Кстати, в качестве альтернативы рекомендую использовать другой файловый менеджер. Посмотрите этот урок — Файловый менеджер KCFinder.

  32. Алексей

    Андрей, подскажите как отключить экранирование в ckeditor, на локальном сервере картинки добавлялись в правильном виде, т.е.

    • Андрей Кудлай

      Редактор здесь не при чем, смотрите, как добавляются данные в БД. Скорее всего, у Вас на сервере включена директива magic_quotes_gpc, которую нужно отключить и одновременно используется экранирование данных функцией mysql_real_escape_string (или ее аналог).

  33. Борис

    Здравствуйте.
    Подскажите пожалуйста, обязательно ли размещать первый js script между …. ?
    Если — да, то как это сделать при подобном раскладе ?

    • Андрей Кудлай

      Здравствуйте.
      Теги, которые Вы запостили, вырезались, но подозреваю, что речь о тегах head. Если я прав, то да, плагин редактора должен быть подключен перед его вызовом, т.е. лучше всего это сделать между тегами head. Собственно, об этом написано и в документации. Если остались еще какие-либо вопросы, которые лучше иллюстрировать кодом, тогда задайте их на нашем форуме, где код можно постить без проблем.

  34. alex

    Подскажите , на вашем сайте есть описание добавления своего плагина в ckeditor, а то ищу — ищу и не нахожу. если его нет, то планируете его сделать? спасибо.

  35. Григорий

    Здравствуйте Андрей. установил редактор, но при редактировании текста выводятся так же теги html, что посоветуете?

  36. Григорий

    спасибо решил проблема была в htmlspecialchars

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree