• CKEditor в Joomla

    Всем хороша 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 =)

     

  • Автосохранение материала в Joomla по CTRL+S

    CTRL+SWeb-программистам часто приходится иметь дело с текстовыми файлами. Горячие клавиши CTRL+S мы нажимаем автоматом еще с университета, когда пару раз пришлось писать проект с нуля, только потому что не соблюдали первую заповедь программиста: "Сохраняйся, сохраняйся и еще раз сохраняйся". Но в вебе эта комбинация клавиш используется редко. Особенно досадно, когда пишешь длинную статью и забываешь ее сохранить и происходит «сбой матрицы» типа BSOD или чего еще. Даже банальная перезагрузка страницы, может похоронить результаты нескольких часов работы.

    При нажатии ctrl+s браузер выдает окно сохранения html файла, что в принципе логично, когда нам нужно сохранить чужую страницу на диск. Но почему бы не научить редактор сайта, сохранять статью по нажатию этих клавиш. Все новые браузеры давно умеют перехватывать это сочетание клавиш. Поэтому был написан плагин для Joomla, который обрабатываем нажатие этих двух клавиш и отправляет содержание материала, его название и все заполненные поля по AJAX на сервер. В целях обратной связи, он показывает полосу загрузки запроса и в конце выдает сообщение, удалось ли сохранить материал или нет. Ничего настраивать не нужно, плагин работает, как с редактором WYSIWYG  так и без него

    Небольшое демонстрационное видео

  • Апгрейдим ckeditor и делаем из него удобный редактор текста

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

  • Глюк в CKEditor с твердым знаком в Opera

    В редакторе 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;
    }

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

  • Заменить выделенный текст на странице с помощью JS

    При написании одного парсера передо мной встала задача предоставить пользователю возможность самому выбирать ту часть страницы которую он хотел бы спрарсить. Сделать я это решил на базе WYSWYG редактора JWYSWYG, он очень легкий, кросбраузерный, написан на моем любимом JQuery и легко поддается модификации. Кроме того я встроил в него функцию автоперевода выделенного текста при помощи Google Tranlate Ajax API. От слов к делу. Оказалось что задача не настолько тривиальна как кажется с первого взгляда. Получить со страницы надо было именно кусок выделенного HTML а не тот текст, который собственно попадет в буфер обмена если нажать кнопку копирования.

    UPD. Судя по поисковым запросам, много людей ищут не теорию, а готовое решение на jQuery. Дабы не смущать Вас лишней информацией можете сразу пройти на страницу с готовым плагином на JQuery и пример его использования

  • Как в ckeditor отключить контекстное меню

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

  • Как добавить проверку орфографии для Вашего Joomla редактора

    Проверка орфографии (или spell check) - это скрипт (или механизм), который подсвечивает слова в статье, которые могут быть написаны не корректно. Если вы используете MS Word, Google Docs и большинство других редакторов текста, вы уже видели красную подсветку под орфографическими ошибками. Но как добавить этот удобный функционал в поле редактирования  Joomla материала?

    Тут пара решений, которые вы или ваши клиенты могут использовать:

    • GoogleSpellchecker
    • Browser spellchecker - встроенный в браузер механизм проверки орфографии, работает только для языка браузера.

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

  • Как написать плагин на ckeditor

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

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

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

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

  • Как работать с плагином codemirror в ckeditor

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

  • Пишем простой плагин вставки текста в fckeditor

    По работе столкнулся с редактором fckeditor, Сам я фанат ckeditor, а fckedit or является его прямым предком. Структура немного схожая, но другая. Возникла необходимость вставлять в нужное место произвольный текст через кнопку в тулбаре. Сказано сделано.

    Создание плагина на ckeditor

    По нажатию кнопки вставляем в документ <hr>

  • Плагин syntaxhighlight для ckeditor

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

    <pre class="brush:php">
    </pre>

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

    <link href='js/highlight/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>
    <link href='js/highlight/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='js/highlight/scripts/shCore.js' type='text/javascript'></script>
    <script src='js/highlight/scripts/shAutoloader.js' type='text/javascript'></script>
    <script src='js/highlight/scripts/shBrushCss.js' type='text/javascript'></script>
    <script src='js/highlight/scripts//shBrushXml.js' type='text/javascript'></script>
    <script src='js/highlight/scripts/shBrushJScript.js' type='text/javascript'></script>
    <script src='js/highlight/scripts/shBrushPhp.js' type='text/javascript'></script>
    <script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = false;
    SyntaxHighlighter.defaults.toolbar = false;
    SyntaxHighlighter.defaults['pad-line-numbers'] = true;
    SyntaxHighlighter.all();
    </script>

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

  • Проверка русской орфографии в ckEditor

    Я отношусь к той группе людей, которые плохо дружат с русским языком. Так уж сложилось, в школе больше привлекало все техническое. Для экономии времени статьи иногда выгодно писать через веб-интерфейс админки, в обход MsWord. Но вот беда, отличный WYSWYG редактор ckEditor не проверяет русскую орфографию. Более того, он еще отключает нативную проверку орфографии браузером. Те, кто пользуются TinyMCE, знают всю прелесть красной подсветки больных мест текста.

    Еще в  ckeditor'е есть средство для проверки орфографии. Работает оно через сервис http://www.spellchecker.net/  и делает это как-то неуклюже, да и с русским дружит не больше моего.

    Практически во всех современных браузерах Chrome,FireFox, Opera и т.д. есть своя система проверки орфографии(нативная). По дефолту, ckeditor ее отключает. Ну что же, исправим это досадное недоразумение.

    В файле ckeditor/config.js добавляем строчку

    config.disableNativeSpellChecker = false;

    по-русски это значит следующее: отключить отключалку нативной проверки орфографии.

    Чистим кеш, обновляем страницу и видим чудеснейшую картину подчеркнутых красным очепяток ).

    Все работает, все замечательно, но вот беда: если вызвать контекстное меню, ckeditor заменяет его на свое - копировать,вставить(кто-то им вообще пользуется?). Это вызывает большое неудобство, не всегда сразу понятно, что не так в подсвеченном красным слове. Когда видишь такое слово хочется посмотреть почему оно подсвечено и какие есть варианты написания. Если слово новое, и нативный spellchecker его не знает, то можно занести слово в словарь. Но вместо этого нам предлагают лишь копировать-вставить) Исправим и это

  • Улучшаем юзабилити textarea с помощью ace.js

    Улучшаем юзабилити textarea с помощью ace.jsУлучшаем юзабилити textarea. Подключаем к нему xedit.js и получаем более или менее сносный редактор. Что если, хочется большего. К примеру подсветки синтаксиса в textarea 
    Всем известно, что textarea в плане редактирования текста очень неудобен. Нет ни табов, ни подсветки синтаксиса, ни показа ошибок. Нет ничего, к чему мы привыкли в современных редакторах типа notepad++