inforedesign

После объявления священной миссии, мне ничего не остается как в ней поучаствовать.
Поэтому далее следует РїРѕС?аговое описание установки панели расС?иренного форматирования текста комментариев.

1. файл
Скачиваем файл js-quicktags (клик правой клавиС?ей Рё выбираем Save as…).
Закачиваем этот файл РІ папку СЃ темой (Сѓ меня, например, если РІС‹ заметили, это wp-content/themes/default/).
Если РІР°С? блог поддерживает переключение нескольких тем, то наверное надо положить файл РІРѕ РІСЃРµ папки тем. Р’ общем, экспериментируйте…
Но далее мы будем говорить про установку плагина в одной теме.

2. Подключение
Р’ файле темы header.php сразу после строчки подключения стилей подключаем этот java-СЃРєСЂРёРїС‚:

<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url’); ?>" type="text/css" media="screen" />
<script src="<?php bloginfo(’template_directory’); ?>/js_quicktags.js" type="text/javascript"></script>

Теперь РІ файле комментариев comments.php находим РІ РєРѕРґРµ textarea для текста комментария Рё перед Рё после нее вставляем следующее:

<script type="text/javascript">edToolbar();</script>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
<script type="text/javascript">var edCanvas = document.getElementById(’comment’);</script>


После этой нехитрой операции РІС‹ увидите (если СЏ ничего РЅРµ забыл) набор РєРЅРѕРїРѕРє как Сѓ меня, ниже, РЅРѕ скорее всего РѕРЅРё Р±СѓРґСѓС‚ С?РёСЂРѕРєРёРµ Рё стоять РІ РґРІР° СЂСЏРґР°.

3. Настройка РІРЅРµС?него РІРёРґР°
Теперь открываем style.css Рё начинаем настраивать РІРЅРµС?РЅРёР№ РІРёРґ.
РџРёС?ем следующее:


#ed_toolbar {background: #FFF;} /*это контейнер для панели. если оформление блога требует, то можно всячески настраивать и контейнер*/
#commentform input.ed_button {
display:block; /*на всякий случай*/
width:auto; /*убиваем С?РёСЂРёРЅСѓ, заложенную РІС‹С?Рµ, Рё-Р·Р° чего Сѓ нас РєРЅРѕРїРєРё были С?РёСЂРµ, чем надо*/
float:left; /*прибиваем влево. теперь РІСЃРµ РєРЅРѕРїРєРё должны стать РІ РѕРґРёРЅ СЂСЏРґ, Рё быть нормальной разной С?РёСЂРёРЅС‹*/
font-size:9px; border: 1px solid #FFF;background: #EAEAEA; margin-right:3px; /*непосредственно настройка РІРЅРµС?него РІРёРґР° РєРЅРѕРїРѕРє*/
}

Можно прописать стили для каждой конкретной кнопки. Например:

#ed_bold {background: #F00; color:#FFF; font-style:italic}

сделает РєРЅРѕРїРєСѓ Bold белым РєСѓСЂСЃРёРІРѕРј РЅР° красном фоне, тогда как остальные РєРЅРѕРїРєРё Р±СѓРґСѓС‚ «РЅРѕСЂРјР°Р»СЊРЅС‹РјРё». ID-С?РЅРёРєРё РєРЅРѕРїРѕРє можно посмотреть РІ js-файле.

Единственная неприятность заключается РІ том, что js-console FireFox показывает, что возникает какая-то РѕС?РёР±РєР° РїСЂРё работе скрипта. РќРѕ РѕРЅ работает, поэтому СЏ СЃ ней РЅРµ разбирался.

Вот и все. Удачи и приятных форматированных комментариев вам!

english version
The panel of comments text extended formatting.

Step by step description of setup of the panel of comments text extended formatting.

Download js-quicktags file (by means of context menu point “Save as…” initiated by mouse right button click).
Save this file to the folder with theme (e.g. wp-content/themes/default/).

In the theme file “header.php” after stylesheet including line connect this java-script:

<link rel="stylesheet" href="<?php bloginfo(’stylesheet_url’); ?>" type="text/css" media="screen" />
<script src="<?php bloginfo(’template_directory’); ?>/js_quicktags.js" type="text/javascript"></script>

Now in the comment file “comments.php” in the code find “textarea” for comment text and paste following part before and after it:

<script type="text/javascript">edToolbar();</script>
<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
<script type="text/javascript">var edCanvas = document.getElementById(’comment’);</script>


Now open style.css and start setting the appearance.
Write following:

#ed_toolbar {background: #FFF;} /*this is panel container. If blog setting requires that, then the container can be set*/
#commentform input.ed_button {
display:block; /*just in case*/
width:auto; /*delete width parameters given above, which made the buttons wider then we needed*/
float:left; /*align left . now all buttons displayed in one row and have different width, */
font-size:9px; border: 1px solid #FFF;background: #EAEAEA; margin-right:3px; /*the appearance of the buttons themselves*/
}

It is possible to set styles for each button. For ex:
#ed_bold {background: #F00; color:#FFF; font-style:italic}
It will make button “Bold”look following : white italic letters on red background and all other buttons will stay as they are. IDs of the buttons can be viewed in js-file.

Enjoy nice comments!