Forums / National / Russian / Модули и плагины / [Update] HTML CKEditor для страниц v.1.0.2

12345>>>

HTML Wysiwyg редактор CKEditor для страниц

Alex300
#1 2009-09-06 06:48
Полнофункциональный визуальный (Wysiwyg) HTML редактор для страниц на Cotonti. Позволяет редактировать страницу как в режиме Wysiwyg, так и в режиме непосредственного редактирования HTML-кода.

Версия плагина: 1.0.2 от 12.06.2010

Отличия от версии 1.0.1:
- Обновлен CKEditor:до CKEditor v 3.3.1 (revision 5586)
- Добавлен плагин EmbedMedia для вставки видео с youtube, vimeo, , google video и т.д
- Добавлен плагин для вставки кода (php, html и т.п) с выделением, стандартным для cotonti. (спасибо Dr2005Alex)
- Добавлена кнопка для вставки на страницу тега "<!--more-->" (спасибо Dr2005Alex)
- Исправлена ошибка из-за которой на некоторых хостнгах вызов AjaxFileManager мог вызвать 404 ошибку.
- Исправлена ошибка из-за которой, если страницу редактировал не администратор ненужные данные могли добавляться в базу.


Отличия от первой версии:
CKEditor обновлен до версии CKEditor 3.2 SVN (revision 4981), в котрой добавлены новые возможности и исправлены некоторые ошибки.
Теперь он работает и с jQuery (документация на английском языке). Включить адаптер для jQuery можно в панели управления (по умолчанию выкл).
Полный список изменений Вы можете прочитать в файле ckeditor/ckeditor/CHANGES.html или на официальном сайте.
Если Вы используете этот плагин, мы рекомендуем Вам обновиться до текущей версии.

В отличие от стандартного для движка BB-кода, хранение страниц в HTML - не требует дополнительного парсинга на серверной стороне и не требует дополнительного кеширования спарсенного кода в базе данных, что экономит рессурсы на хостинге.
Более, того есть возможность вставлять на страницы целые куски HTML кода, созданные в других редакторах.
Для неопытных пользователей редактирование в режиме Wysiwyg гораздо легче и понятнее, нежели работа с BB-кодом.

Данный редактор реализован на базе редактора CKEditor v.3. Данный редактор является полностью переписаным продолжением эволюции FCKEditor'а. Подробности можно прочитать на их официальном сайте.
Интерфейс редактора схож с MS Word (OpenOffice) и интуитивно понятен.

Скриншут:


Плагин имеет встроенную систему для работы с файловым архивом (PFS). Она основана на стандартной из Cotonti 0.6.2. Разница в том, что она позволяет вставлять ссылки из "Мои файлы" и "Файловый архив сайта" прямо в окно редактора в формате HTML.

Плагин может добавлять в теги превьюшек «rel="thumbnail"» для красивого открытия картинок при помощи плагина: Thumbnailviewer (Должен быть установлен на Вашем сайте)

Также плагин добавляет в тег <a> атрибут "title" а в тег <img> атрибут "alt". Значение атрибутов берется из описания файла в PFS.

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

Скриншут:


Установка:
- распаковать архив
- скопировать папку ckeditor в папку plugins на сервере.
- Настроить через панель администрирования

Обновление:
- Удалить файлы из папки "plugins/ckeditor на сервере".
- Скопировать содержимое архива в эту папку.
- Переустановить плагин в панели управления.
- Выполнить запрос к БД: "UPDATE `sed_pages` SET `page_html`='' WHERE `page_type`=1"


Установленные в системе смайлики будут "Подхвачены плагином". Дополнительных настроек не требуется.

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

Дополнительные возможности:

Если Вы хотите использовать редактор в других местах на сайте, в своих плагинах, например, то а настройках плагина отключите опцию "«ckeditor.js» только для редактирования страниц". Как заменить тег <textarea> на редактор можно посмотреть в файле "ckeditor.page.edit.php" и прочитать на офсайте.
Включен ли редактор в данный момент, вы Можете проверить программно проанализировав константу: 'COT_CKEDITOR' на значение 'TRUE'

Для использования упрощенной панели инструментов редактора (только форматирование), при инициализации редактора укажите свойство «toolbar : 'Basic'». Имеется возможность задавать свой набор кнопок.

Если Вы хотите использовать отдельно AjaxFileManager (например в форме нужно ввести имя файла с сервера)- описание смотрите тут.
Например можно использовать функцию:

function setFile(elementId)
	{
		var win = window.open('admin/tinymce/jscripts/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php?editor=form&elementId='+elementId, 'ajaxFileImageManager', 'width=782,height=500');		
		return false;
	}

Далее в HTML форме:
<input type="text" class="input" name="photo[2]" value="" id="photo2" />&nbsp;<button  onclick="return setFile('photo2');">Browse</button>

Сумбурное получилось описание :)

Скачать:
ckeditor.zip

P.S.
Прошу помощи с англоязычном переводом описания плагина и перевода файла: 'lang/ckeditor.en.lang.php'. Буду признателен.

Спасибо Dr2005alex : Плагин Code для Ckeditor :) - Дополнение к CKEditor - добавляем кнопку к редактору
Есть миры, не здесь, там, где небеса горят, и моря засыпают, и реки дремлют; люди сделаны из дыма, а города – из песен. Где-то опасность, где-то несправедливость, даже где-то остыл чай. Идем Эйс, у нас много работы!...
...Sorry for my english...
Бесплатные расширения для Cotonti: https://lily-software.com/free-scripts/
This post was edited by Alex300 (2010-06-22 06:14, 13 years ago)
esclkm
#2 2009-09-06 14:30
а что не было с визуальным форматированием редактора но для ББ-кодов?
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
ProFF
#3 2009-09-06 15:19
Шикарно!!!!
GHengeveld
#4 2009-09-06 16:29
This is great, but does it use BBcodes or HTML? I really hate the current FCKeditor plugin for Cotonti because it just can't do everything the regular FCKeditor can.

What I would love to see is a plugin for TinyMCE. I normally use this on client's sites but integrating it isn't so easy. TinyMCE is my #1 choice because it has more options for editing tables (you can easily insert new rows/columns at the click of a button).
Alex300
#5 2009-09-07 03:02
# esclkm : а что не было с визуальным форматированием редактора но для ББ-кодов?
Такие есть, но мне пока не попадалось такого, чтобы понравился.
Да и задача в данном случае стояла получить именно полноценный HTML редактор для кота.

# Koradhil : This is great, but does it use BBcodes or HTML?
Он работает с HTML. Думаю, он не уступит TinyMCE. А у новой версии CKEditor'а интеграция гораздо проще, чем у того же TinyMCE.
Есть миры, не здесь, там, где небеса горят, и моря засыпают, и реки дремлют; люди сделаны из дыма, а города – из песен. Где-то опасность, где-то несправедливость, даже где-то остыл чай. Идем Эйс, у нас много работы!...
...Sorry for my english...
Бесплатные расширения для Cotonti: https://lily-software.com/free-scripts/
Ratibor
#6 2009-09-07 03:27
# esclkm : а что не было с визуальным форматированием редактора но для ББ-кодов?
Давно уже выложен в плагинах.
Не задавай глупых вопросов, не услышишь вранья.
Killer
#7 2009-09-07 14:00
Доработать бы вставку картинки. А точнее, прикрутить кнопачку к пфс, рядом с кнопачкой "посмотреть на сервере", и сделать, чтоб картинку можно была выбирать с кампа, чтоб при этом она автоматом грузилась в определённую папку с id юзера или ником. Возможно? Хотелось бы так.
Лишь утратив всё до конца, мы обретаем свободу...
Alex300
#8 2009-09-07 17:57
Ajax FileManager позволяет создавать папки, вложенные в ту, что указана в настройках. Также позволяет отгружать файлы с компа на сервер в эти папки.

Архив перезалил. Изменения:
- в настройках плагина добавлена возможность указать предельный размер отгружаемого на сервер файла и допустимые расширения.

# Killer : прикрутить кнопачку к пфс, рядом с кнопачкой "посмотреть на сервере"
Ссылка на PFS расположена сразу под окном редактора.

Доработки, указанные Killer, пока не планируются.
Есть миры, не здесь, там, где небеса горят, и моря засыпают, и реки дремлют; люди сделаны из дыма, а города – из песен. Где-то опасность, где-то несправедливость, даже где-то остыл чай. Идем Эйс, у нас много работы!...
...Sorry for my english...
Бесплатные расширения для Cotonti: https://lily-software.com/free-scripts/
This post was edited by Alex300 (2009-09-07 19:52, 14 years ago)
3axap
#9 2009-09-10 21:30
Отличный редактор! Вот только не хочется отказываться от маркитапа. Не везде удобен CKEditor. А нет ли возможности его пользовать только в строго определенных категориях сайта?
Sergeich
#10 2009-09-11 00:11
Есть возможность, редакторы (по крайней мере маркитап) вызываются при наличии определённого CSS-класса на поле формы. Подозреваю, что и этот редактор также цепляется.
Alex300
#11 2009-09-11 04:44
Именно. Маркитап цепляется к "textarea" при наличии класса "editor".
CKEditor цепляется к ней при выполнении метода CKEDITOR.replace( name ); которому в качестве параметра передается name элемента "textarea". Таким образом Вы можете без достаточно просто использовать тот или иной редактор.

В качестве анонса: в ближайшие дни будет готова доработка плагина Category Description 0.2, который позволяет делать расширенные описания категорий. В новой редакции будет предусмотрена возможность наряду с маркитапом использовать и CKEditor и PFS.
Есть миры, не здесь, там, где небеса горят, и моря засыпают, и реки дремлют; люди сделаны из дыма, а города – из песен. Где-то опасность, где-то несправедливость, даже где-то остыл чай. Идем Эйс, у нас много работы!...
...Sorry for my english...
Бесплатные расширения для Cotonti: https://lily-software.com/free-scripts/
Sergeich
#12 2009-09-11 05:13
А вот хорошо бы CKEditor также привязать к css-классу, к примеру class="CKEditor". Это добавит унификации и наглядности в шаблонах.
motor2hg
#13 2009-09-11 06:54
Пробовал в Opera 10. Первое, что бросилось в глаза постоянно пытается влепить в начало тег <p></p>.
Это в свою очередь не даёт правильно оформить title для постраничной разбивки для первого пункта.
Последующие newpage title /title работают правильно.

В остальном всё работает превосходно, спасибо огромное за труд.

Ajax FileManager- прикольная вещь. Но тут есть одна не очень хорошая тема, любой пользователь может удалить файлы другого пользователя в папке user_files. Это по моему не есть гуд!
This post was edited by motor2hg (2009-09-11 08:12, 14 years ago)
Alex300
#14 2009-09-11 08:53
Плагин доработан.
Теперь в настройках плагина появилась новая опция: "Дополнительный файловый менеджер только для администраторов?". Если включено, то только администраторы смогут использовать Ajax FileManager. В дальнейшем это будет реализовано через стандартный механизм прав Cotonti и будет настраиваться для каждой группы пользователей тдельно.

Архив с плагином в первом посте и разделе DOWNLOADS перезалит.

Для применения изменений:
- скачать новый архив.
- заменить на сервере файлы: ckeditor.page.add.php, ckeditor.page.edit.php, ckeditor.setup.php и папку lang
- в панели управления переустановить плагин
Есть миры, не здесь, там, где небеса горят, и моря засыпают, и реки дремлют; люди сделаны из дыма, а города – из песен. Где-то опасность, где-то несправедливость, даже где-то остыл чай. Идем Эйс, у нас много работы!...
...Sorry for my english...
Бесплатные расширения для Cotonti: https://lily-software.com/free-scripts/
motor2hg
#15 2009-09-11 13:33
Отлично спасибо! С точки зрения безопасности первый вариант был не очень.

Можно сделать так, при первом открытии Ajax FileManager в папке например /datas/users/users_files формируется папка с именем пользователя в которую он - пользователь будет складывает свои файлы, пользоваться ими удалять, редактировать. Папки других пользователей в директории /datas/users/users_files он может просматривать, но вносить правки и удалять файлы не может. Хотя надобности просмотра чужих файловых архивов под вопросом.

Added 11 minutes later:

А ещё так как встроенный редактор BBcode не отключается, то можно автоматически менять редактор при переключении парсинга, выбрал BBCode имеешь - markitup выбрал, HTML - CKEditor v.3.
This post was edited by motor2hg (2009-09-11 14:52, 14 years ago)

12345>>>