Меню Рубрики

Установка ckeditor и загрузка

Настройка CKEditor под себя — подключение плагинов

Ckeditor довольно хороший визуальный инструмент для редактирование контента на Вашем сайте, но его стандартные функции не всегда удовлетворяют потребности концепции сайта. Настройка подразумевает в себя подключение плагинов, дополнительных css, удаление не нужных кнопок на панели CKeditor, а так же внедрение bootstrap компонентов.

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

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

Вот такую панель в итоге мы получим

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

Установка CKeditor

Подключаем редактор на страницу.

Итак, мы поставили самый стандартный полный пакет функций от CKEditor, теперь приступим к его настройке. Переходим к файлу config.js, который находится в папке /js/ckeditor/config.js

Вот сюда и будем подключать наши дополнительные плагины.

Настройка CKEditor

Подключение плагинов в CKEditor

  1. Переходим на официальный сайт и скачиваем необходимый плагин, я выбрал youtube плагин.
  2. Копируем содержимое папки в папку с плагинами http://example.com/js/ckeditor/plugins/youtube

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

Обновляем страницу, а если не помогло обновляем кэш страницы и видим кнопку youtube. По аналогии подключаем и другие необходимые плагины.

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

Используемые плагины

  1. btgrid — bootstrap колонки
  2. bootstrapTabs — bootstrap табы
  3. bgimage — фоновое изображение в блоки
  4. lineheight — подключение межстрочного интервала
  5. html5video — вставить видео на страницу
  6. codesnippet — инструмент для вставки кода
  7. collapsibleitem — bootstrap аккардеон
  8. tableresize — редактирование размера таблицы путем движения курсора
  9. ckawesome — подключение иконок

Удаление ненужных кнопок из CKEditor

Некоторые плагины почти ни когда не используются, давайте займемся отключением ненужных плагинов такие как: О CKEditor, Сохранить, Новая страница, Печать, Шаблоны, Flash, Смайлики, Поиск.

Я ими ни когда не пользуюсь, по этому считаю что их можно отключить из панели редактора.

Подключение загрузки изображений и файлов

Подключение CSS в CKEditor

Обратите внимание:
Когда мы работаем в редакторе, то стиль написания контента берется от ckeditor. Он различается от общего стиля сайта, это выражается во многом, например: межстрочный интервал разный, размера шрифта отличаются друг от друга, стиль тегов h1, h2, h3 другой и это заметно во многих других мелочах. Давайте подключим свои стили сайта.

Подключаем 2 CSS файла, bootstrap.css и styles.css

Теперь редактор работает с нашими css файлами.

Подключение пользовательских классов

Бывалые пользователи заметили, ckeditor удаляет пользовательские классы, необходимо указать редактору, что бы он больше не отчищал наш код.

Разрешить теги Поделится ссылкой

Как реализовать дополнительные функции?

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

Список функций:
1. изменить расстояние между текстовыми строками;
2. Вставка текста со ссылкой на источник;
Пример сценария:
— Я копирую текст из браузера в буфер обмена;
— Я вставляю текст из буфера обмена в текстовый редактор;
— Текст вставлен и внизу текста автоматически вставляется строка «источник» с гиперссылкой на страницу, откуда я скопировал текст:
Пример строки:
«источник — https://kisameev.ru/javascript/nastroyka-ckeditor-pod-sebya—podklyuchenie-plaginov»
3. Вставка изображения в текст из буфера обмена;
4. Вставка изображения в текст, используя метод Drag-and-Drop с локального диска;
5. Вставка файла ниже в текст с помощью метода Drag-and-drop с локального диска (или другие инетррпритации этой функции);

6. Вставка спойлеров;
Пример: https://ibb.co/j3VwcH
[SPOILER] [/SPOILER]
7. Возможность сохранения настроек редактора;
8. Как правильно вставить «iframe»?;
Делаю как на скрине.
Не рабтоает.
Скрин настроек — http://prntscr.com/j3dmhv

Я начинающий программист, поэтому извиняюсь, если мои вопросы неверны.

Добрый день, все дополнительные плагины на оф. странице редактора https://ckeditor.com/cke4/addons/plugins/all
Суть:
1. скачиваете нужный плагин
2. Закачиваете на сервер в папку /ckeditor/plugins/
3.Добавляете свой плагин в эту строку через запятую
config.extraPlugins = «btgrid,youtube,bootstrapTabs,bgimage,lineheight,html5video,codesnippet,collapsibleItem,tableresize,ckawesome»

Обратите внимания некоторые плагины связаны с другими. Это можно увидеть в самом низу в строке Add-on dependencies когда скачиваете плагин

источник

Установка CKEditor на Codeigniter и настройка загрузки изображений


При работе над очередным сайтов появилась необходимость установить хороший визуальный редактор с поддержкой быстрой загрузки изображений. Выбор пал на CKEditor, так как заявленная функциональность вполне устроила, да и прежнюю версию под именем «FCKeditor» я как то ставил уже в одном из своих работ. После поисков в интернете и изучения различных инструкций всё-таки удалось внедрить этот визивик на сайт. В этом посте расскажу как установить визуальный редактор CKEditor при использовании фреймворка Codeigniter.

Процесс установки:

1. Скачиваем архив CKEditor c http://ckeditor.com/download распаковываем и кидаем в корневую папку где установлен Codeigniter. У меня получилось вот такой листинг:

/application/
/ckeditor/
/images/
/system/
/.htaccess
/index.php

2. Затем создаем библиотеку с названием ckeditor.php в папке фреймфорка application/libraries
Получится application/libraries/ckeditor.php
В файл application/libraries/ckeditor.php копируем содержимое файла ckeditor/ckeditor_php5.php
Содержимое этого файла это готовый класс CKEditor, изменения в который можно не вносить — он уже рабочий.

3. Чтобы загрузить созданную библиотеку в контроллере (controllers) приложения, пишем стандартный код

4. Чтобы вызвать редактор в файле отображения (views) вместо тега textarea вставляем

Данный php код вставит в html код нечто вроде

и появится визуальный редактор.

5. Чтобы путь к папке /ckeditor/ не перехватывался фреймфорком нужно поправить файл .htaccess и внести в него правило для этой папки. У меня этот файл выглядит вот так:

AddDefaultCharset UTF-8
RewriteEngine on
RewriteCond $1 !^(index\.php|images|ckeditor|robots\.txt)
RewriteRule ^(.*)$ ./index.php/$1 [L]

это значит всё кроме указанных правил обрабатывается через index.php и передает фреймворку.

Загрузка изображений (файлов) в CKEditor:

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

1. Идем в папку /ckeditor/plugins/image/dialogs/image.js , находим строчку id:’Upload’,hidden:true и меняем ее на id:’Upload’,hidden:false
После этого сохраняем файл и смотрим в диалогов окне вставки изображения появится новая вкладка «Загрузить». Но файл загрузить нам еще не удастся, так как нужно позаботиться о скрипте, который это сделает.

2. В контроллере вашего приложения создаем функцию (метод) ckupload(). У меня контроллер назывался Adminka в нем я создал функцию ckupload вот с таким содержимым:

источник

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

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

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

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

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

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

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

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Время: 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:

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

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

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

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

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

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

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

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

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

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

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

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Похожие статьи:

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

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

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

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

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

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

Пожалуйста, Илона

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

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

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

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

Согласен, не хуже как минимум. Не знал о нем, спасибо

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

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

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

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

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

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

У меня получилось, в чем можно убедиться, посмотрев урок.

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

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

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

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

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

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

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

Пожалуйста

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

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

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

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

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

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

Андрей, добрый день!
Спасибо за урок. У меня остался всего один вопрос — безопасность AjexFileManager.
В файле AjexFileManager/ajax/php/ajax.php есть строчка: //if (!isset($_SESSION[‘admin’])) // 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, если они не поправили этот момент.

Читайте также:  Установка зажигания на газоне

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

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

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

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

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

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

Здравствуйте. Я такого расширения не встречал.

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

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

Вот автоинициализация всех полей 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

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

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

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

Здравствуйте, Андрей! Подскажите пожалуйста, как победить такую проблему в 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 редактора, но с ним, к сожалению, я практически не работал.

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

Здравствуйте, Андрей! Разобрался я с одним вопросом по 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.indent ];
затем в файле css сайта прописываем правило:
/*отступ текста(красная строка)*/
.rientro <
text-indent: 3em;
>
Визуально при редактировании текста в редакторе отступы не будут видны, но на страницах сайта добавятся аккуратненькие красные строки для параграфов к которым был применён отступ.
Так же для параграфов можно задавать свой класс, например, так:
config.format_p = < element : ‘p’, attributes : < ‘class’ : ‘normalPara’ >>; //Defaults to:

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

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

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

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

Здравствуйте.
Скачал, установил на локалке, все работает. Установил на сайт в нете, запускаю мой сайт/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. В частности, версия из исходников урока, на который я давал ссылку, должна работать, попробуйте.
Относительно ошибки я уже сказал, других вариантов у меня нет: либо не хватает прав, либо редактор пытается искать папку не по тому пути.

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

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

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

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

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

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

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

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

День добрый, мне понравилась Ваша статья. вот только столкнулся с проблемой при добавление в свой проект. суть: проект использует ЧПУ как и многие сайты /контроллер/экшен/параметр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, если с относительным проблемы.

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

Пожалуйста

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Такого урока у нас нет и пока не планируется.

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

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

Поставил данный визуальный редактор. Возникла проблема: редактор оборачивает текст в тег , этот текст записывается в бд, а при выводе на страницу этого текста получается следующий исходный код»текст» и эффекты исчезают. Что сделать чтобы убрать это, «волшебные кавычки» отключены

перед и после тегов п ставятся двойные верхние кавычки

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

походу да, написал страницу с нуля и все заработало

источник