Всем хороша Joomla. Ее структура лично у меня вызывает как восхищение, так и негодование. Изучив ее, я на ура воспринял идею плагинов и создал у себя в Xdan CMS их аналог. Но есть в Joomla и минусы. К примеру, стандартный редактор TinyMCE. Он не имеет своего файлбраузера. Код получается не валидный. Но есть и бытовые составляющие его непригодности.

Во-первых, релизы CMS случаются реже, чем развиваются современные WYSIWYG редакторы. Новые версии TinyMCE и ckEditor похожи больше на MSWord, нежели на online редактор текста. CMS, разумеется, за ними не успевает и обычно из-под коробки идет с устаревшим редактором. 

Но за CMS вступается уже упомянутая  плагинная система. Разработчики CMS Joomla делают ее более удобной, быстрой и надежной, разработчики WYSIWYG редакторов делают то же самое, но больше уделяют внимание кроссбраузерности. А соединяют эти две разработки разработчики плагинов. 

Собственно сабж. Нужно поменять стандартный TinyMCE на такой же стандартный ckEditor. Да ckEditor тоже бывает из-под коробки в joomla. Но как я уже писал выше, он уже сильно устарел. Не беда. Есть куча плагинов, которые установят в систему его новую версию.

Я остановил свое внимание на плагине с неброским названием - CKEditor. Скачать его можно на официальном сайте. На момент написания статьи  версия была 2.1. Хотя zip файл, который вы скачиваете с офсайта, называется CKEditor.2.0.zip =)

При разработке плагина для wysiwyg редактора ckeditor столкнулся с такой проблемой, что в нем нет события выделения текста onselect. Реализуем его сами.

Всем привет! Этот текст я пишу в редакторе ckeditor. На мой взгляд он лучший среди всех wysiwyg эдиторов. Но в нем много чего не хватает. Я уже много писал, как устранить в нем различные баги, пришла пора немного его улучшить по средствам плагинов. 

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

Либо закомментировать  две строчки в ckeditor/plugins/keystrokes/plugin.js

//	CKEDITOR.CTRL + 66 /*B*/,

и

//	[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],

Но при этом мы повлияем на работу плагина и в других браузерах, там где проблемы нет.

Поэтому вернее будет в ckeditor/config.js добавить в функцию CKEDITOR.editorConfig,  эти несколько строк

if(CKEDITOR.env.opera){	
	delete config.blockedKeystrokes[config.blockedKeystrokes.indexOf(CKEDITOR.CTRL + 66)];
	for(var r in config.keystrokes)
		if(config.keystrokes[r][0]==CKEDITOR.CTRL + 66 && config.keystrokes.splice(r,1))break;
}

Т.е. отключаем сочетание клавиш только для Оперы. Вот и все, глюк прошел, как будто его и не было. ъъъъъъъъъъъ - вот, что я могу) а вы?)

В ckeditor'е есть такая неприятная особенность, которая из версии в версию меня раздражает все больше и больше. Это совершенно бесполезное контекстное меню. Хотя оговорюсь. Контекстное меню это одна из важных составляющих плагинов этого чудесного редактора wysiwyg. Однако при обычном использовании эта фича редактора сильно раздражает. Особенно если проверка правописания включена, то клик правой кнопкой по слову место ожидаемых вариантов написания дает совершенно бесполезные - вставить, копировать. А наживать каждый раз ctrl просто лень. Еще раздражает то, что из-за приватной настройки браузеров, эти функции копирования текста попросту не работают, и при нажатии просто выдают ошибку. Поэтому отключим данную фичу, за ненадобностью. Как это сделать? Как в ckeditor отключить контекстное меню.

ckeditor - это великолепный wysiwyg редактор для вашего сайта. По моему скромному мнению, он лучший в своем роде, к тому же  постоянно развивается. Обилие плагинов «из под коробки», и легкость их написания также играют на руки редактору. Я сам написал несколько полезных дополнений.

Последняя 4-ая версия вообще достойна отдельной статьи. На официальном сайте можно собрать свою версию редактора, с необходимым набором плагинов.

В этой статье я расскажу, как написать свой простейший плагин вставки произвольного текста.

Будем вставлять текущую дату и время.

При написании плагинов для ckeditor'а, часто возникает задача: необходимо получить выделенную пользователем информацию, а в некоторых случая произвести манипуляцию с ней. Если необходим просто выделенный текст, то тут все просто. У объекта editor есть метод getSelection(), он возвращает объект, который помимо полной информации о выделенном тексте содержит еще метод getSelectedText(). В простейшем случае в плагине это бы выглядело так:

CKEDITOR.plugins.add('pluginname',{
    init: function(editor){
	alert(editor.getSelection().getSelectedText())
    }
});

Надеюсь Вам понятно, что плагин работать не будет. Это псевдокод. При инициализации плагина, никакой текст не выделен.

А как же насчет html кода,  для работы необходим именно он.

По умолчанию ckeditor помещает все скрипты в документе в комментарий, и кодирует код скрипта через encodeURIComponent. Это политика безопасности. Чтобы скрипт не выполнялся при редактировании контента.  В  умелых руках это очень удобная фича. Заменяться могут не только скрипты, но и embed, iframe и object. К примеру текстовый парсер используется плагином flash для того, чтобы вставлять в документ flash объекты. При этом такой объект не инициализируется при редактировании,  а место него видна лишь иконка. Такую замену осуществляет editor.dataProcessor. Вот как он это делает

afterInit: function( editor ) {
	var dataProcessor = editor.dataProcessor,
	dataFilter = dataProcessor && dataProcessor.dataFilter;
	if ( dataFilter ) {
		dataFilter.addRules({
			elements: {
				'p(span2)': function( element ) {
					return editor.createFakeParserElement( element, 'cke_p_span', 'p_span', true );;
				},
			}
		}, 5 );
	}
}

createFakeParserElement создает "фейковый" (не настоящий) элемент, картинку и заменяет на него все теги <p> с классом span2. Так работает текстовый  dataProcessor.

Цифра 5 тут не случайна. Это порядок в котором происходит замена. Вот тут и возникает проблема замены script. Дело в том, что их экранирует сама система ckeditor, т.е. они в этот круговорот   dataProcessor.dataFilter не входят. Как же заменить <script> на свой фейковый элемент, или просто получить его значение.

Программисты, пишущие плагины на редактор ckeditor наверняка заметили, что начиная с версии 4, редактор идет с плагином codemirror для редактирования исходного текста. Когда-то давно, сам хотел подружить его с ним. Так и не дошли руки, теперь же он предустановлен. Но частью API ckeditor не является. Поэтому возникает проблема, если приходится работать в режиме исходного текста:  как работать с плагином codemirror в ckeditor из другого плагина.

ckFinder - это очень хороший файл менеджер, удобный прежде всего тем, что полностью интегрируется с моим любимым wysiwyg редактором ckEditor. Закачать фото, нарезать его, переименовать, удалить и т.д., словом полный комплект из-под коробки. Все в нем отлично, но эта надоедливая надпись This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license мешает жить). При этом ckFinder совсем не ограничивает функционал менеджера в демо версии, т.е. единственный минус - эта надпись.

Да, вы правильно поняли. Продукт платный. И стоит он ни много ни мало 59$ для одного сайта. В ранних версиях ckfinder была кнопка закрытия данной надписи, надпись конечно появлялась, но на время работы о ней можно было забыть. В свежей версии, которую я скачал с офсайта, такою кнопку не нашел. Значит пришла пора удалить надоедливую надпись самим.