Меню Рубрики

Установка плагин в ckeditor

Устанавливаем плагин Uppod для редактора Ckeditor

Сегодня продолжаем знакомство с визуальным редактором для сайта Ckeditor, а именно я продемонстрирую, как устанавливать дополнительные плагины для данного редактора. В качестве примера будем использовать довольно популярный плагин, который позволяет вставлять изображения, аудио и видео файлы, плагин – UPPOD. Приступим, как вы понимаете для начала нам необходимо скачать сам плагин, скачать можно вот отсюда, но кроме самого плагина нам понадобится плеер для этого плагина, скачать его можно вот отсюда, для скачивания вам понадобится регистрация на сайте, в этом нет ничего страшного. Итак, мы обзавелись всеми необходимыми файлами, так же нам нужен установленный и настроенный модуль Ckeditor, как это делается читаем вот здесь. Для начала давайте перенесём наш плеер на сайт, для этого в корне сайта я создам отдельную папку «player» и скопируем туда файл плеера – uppod.swf, т.е. конечный путь до плеера у вас должен выглядеть вот так:

Теперь подключаем сам плагин для нашего редактора. Для этого переходим по пути

И копируем туда папку с нашим плагином

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

Который находится по пути

И пишем вот такую конструкцию:

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

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

Который находится по пути:

И вписываем путь до нашего плеера, который мы определили в начале статьи, напомню вам что плеер находится в папке player, конструкция выглядит вот так:

Не забываем сохранять изменённые вами файлы. Теперь нам необходимо настроить форматы вывода для профилей вашего сайта, для этого переходим на наш сайт, идём по пути «Конфигурация->Ckeditor» и кликаем изменить для необходимого вам профиля, я выберу в качестве примера «Full»

И переходим в раздел «Внешний вид редактора». В пункте «Плагины», вы теперь видите ваш новый плагин «Plugin file: uppod»

Ставим галочку напротив него, что бы его активировать и перенесём кнопку плагина в используемые кнопки для тулбара

И кликаем «Сохранить». Давайте посмотрим, что у нас получилось на сайте

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

давайте посмотрим, как это всё работает на примере аудио файла, для этого я создал отдельную папку на сервере нашего сайта под названием «music» и скопировал туда аудио файл, в модальное окно пишем следующее

И сохраняем. Видим, что у нас появился плеер для проигрования загруженного файла

С добавлением видео и изображения, настройки аналогичные. Замечу, что изменение размера для видео, аудио и изображений, а так так-же произвести изменение стилей и цвета фона плеера, можно в файле

Данного плагина, который находится по пути:

На этом с подключением данного плагина можно закончить.

источник

Настройка 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 + CKFinder на ASP.NET MVC

Сегодня разберемся, как интегрировать и настроить очень популярный редактор контента CKEditor в стандартное приложение ASP.NET MVC. Также установим и настроим не менее популярный менеджер файлов CKFinder.

  • Официальная страница разработчика: https://ckeditor.com/

    CKEditor — это очень популярный на сегодняшний день визуальный WYSIWYG редактор HTML-содержимого.

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

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

    CKEditor представлен в двух версиях. Версия 4 как более ранняя и, соответственно, более распространенная. И версия 5, новая, реализующая модульную архитектуру, с множеством нововведений.

    Настройка CKEditor

    Я в своих проектах использую 4-ую версию, ее функционала вполне хватает для решения любых задач. Скачаем архив с редактором и добавим его себе в проект.

    Добавить CKEditor очень просто. Это происходит в несколько этапов:

    Все готово! В приведенном выше примере CKEditor подключается к текстовой области ‘content1’ внутри HTML-формы. Далее содержимое этого поля будет отправлено на сервер.

    Стоит отметить, что для CKEditor существует множество плагинов, который расширяют его стандартный функционал. Также плагины можно писать самому (более подробно этот процесс описывается в официальной документации на сайте). Давайте добавим к редактору плагин, который позволяет встраивать на страницу видео с видеохостинга Youtube.

    На момент написания статьи все плагины можно найти в отдельном разделе на сайте. Интересующий нас плагин находится по адресу: https://ckeditor.com/cke4/addon/youtube

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

    Настройка CKFinder

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

    Официальная документация по настройке коннектора для ASP.NET приложений находится по адресу: https://ckeditor.com/docs/ckfinder/ckfinder3-net/

    В отличии от редактора CKEditor, который мы настраивали на сайте и скачивали вручную, CKFinder мы можем добавить в проект прямо в Visual Studio через NuGet Manager. Минимальный необходимый для работы набор пакетов выглядит так:

    1. CKSource.CKFinder — JavaScript-клиент, подключается на стороне клиента
    2. CKSource.CKFinder.Connector.Core — основная и ключевая библиотека, которая обеспечивает работу коннектора CKFinder на сервере
    3. CKSource.CKFinder.Connector.Config — эта библиотека позволяет настраивать CKFinder через общий файл конфигурации приложения Web.config.. Обратите внимание, как изменится конфиг-файл после установки этого пакета, теперь там находятся все настройки для CKFinder.
    4. CKSource.CKFinder.Connector.Host.Owin — эта библиотека позволяет подключить коннектор как OWIN-компонент в приложении. На серверной стороне CKFinder работает как раз следуя этой спецификации, т.е. Open Web Interface for .NET
    5. Microsoft.Owin.Host.SystemWeb — сразу же установим OWIN хост или сервер
    6. CKSource.FileSystem.Local — этот компонент добавляет поддержку работы с файловой системой на сервере
    Читайте также:  Установка дааз 2107 на змз 402

    После установки всех необходимых компонентов можно приступить к настройке серверной стороны.

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

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

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

    Далее, если в приложении еще не создан файл Startup.cs, то создаем его. В этом файле мы завершим настройку серверной части CKFinder. Финальная версия файла выглядит так:

    На этом настройка серверной части завершена. Теперь интегрируем CKFinder-клиент с CKEditor на странице.

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

    В зависимости от настроек коннектора в файле Web.config мы можем менять разрешения на манипуляции с файлами и папками (создание, перемещение и т.д.).

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

    источник

    Установка визуального редактора 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();

    Читайте также:  Установка ssl сертификата на vds ispmanager

    Здравствуйте.
    Скачал, установил на локалке, все работает. Установил на сайт в нете, запускаю мой сайт/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

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

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

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

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

    источник