[TAIFUN]

Skuns,

Если ще актуально.. да и другим на заметку.

Заходим в админку- стили и шаблоны - поиск в шаблонах.
Начинаем думать... во всех редакторах есть стандартные кнопки, которые присутсвуют в быстром ответе, расширеном и в быстром редактировании..

Берем копируем имя картинки любой кнопки, например кнопка вставки изображения :

http://www.bormotuhi.net/images/editor/insertimage.gif - это полный ее путь, а имя insertimage.gif в блок поиска в шаблонах вписываем insertimage.gif

Видим результат:

1. editor_toolbar_on
2. postbit_quickedit
3. showthread_quickreply

1 шаблон - расширеный
2 шаблон - быстрое редактирование
3 шаблон - быстрый ответ

Открываем шаблоны браузером ищем (CTRL+F) вписывая имя файла insertimage.gif
и находим мы следующее:

<td><div class="imagebutton" id="{$editorid}_cmd_insertimage"><img src="$stylevar[imgdir_editor]/insertimage.gif" width="21" height="20" alt="$vbphrase[insert_image]" /></div></td>

Обращаем внимание на целый кусок кода, который начинается с

<td>

и заканчивается

</td>

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

Теперь, если вы хотите добавить кнопку, например, спойлера, после кнопки вставки изображения, делаем следующее:
НИЖЕ кнопки кода вставки изображения добавляем:

<td><img src="$stylevar[imgdir_editor]/separator.gif" width="6" height="20" alt="" /></td>

Это сепаратор, который визуально разделяет групу кнопок или кнопки в отдельности.. вот он вертикальная полоска. Если вы хотите, чтобы кнопка была отделена сепаратором то ставьте код, если нет то ставим сразу код кнопки спойлера:

<td><div class="imagebutton" id="{$editorid}_cmd_wrap1_spoiler"><img src="images/spoiler_a.gif" alt="Вставить тег [SPOILER] вокруг выделенного текста" width="21" height="20" /></div></td>

Разберем этот код:
в коде есть

cmd_wrap1_spoiler

Обращаем внимание на цифру. Если стоит 1 то после нажатия у вас будет спрашиваться опция. Если вы поставите 0 - вводить опцию пользователям не нужно будет, спойлер автоматически вставится, НО, дело в том что опция в этом случае должна быть прописана админом в коде настройки BB кода.
Что такое опция(обозначу это так, чтоб было понятно) в спойлере? Это слово, которое будет выводиться в сообщении в кнопке спойлера, например, юзер видит сообщение и кнопку на или возле которой написано - "Нажми меня". Так вот, wrap1 позволяет юзеру самому обозначить скрытый текст опцией.. например словом - "Биография" если вы например скрыли за спойлером текст чьей-то биографии. Это будет удобно для пользователей, потому что интуитивно понятно будет что кроется за спойлером в сообщении.

На этом форуме сделано иначе(немного другой код)... здесь автоматом в настройках BB кода прописана опция(слово), которая будет выводиться до нажатия кнопки и после нажатия, а именно:
"Показать" и после нажатия(разворачивания) "Спрятать"
Пример:

Нажми для просмотра

Тест

Догадались что в куске кода прописано?

cmd_wrap0_spoiler

0 ноль как видите. Поэтому когда вы нажимаете кнопку система не запрашивает ввода опции.

Смотрим наш код дальше:
Кто забыл (код который нам нужно вставить в шаблон), чтобы появилась кнопка? поворяю код:

<td><div class="imagebutton" id="{$editorid}_cmd_wrap1_spoiler"><img src="images/spoiler_a.gif" alt="Вставить тег [SPOILER] вокруг выделенного текста" width="21" height="20" /></div></td>

Разбираем далее...

PHP код:

<img src="images/spoiler_a.gif" 


- это путь к картинке кнопки. images это папка в которую вы залили кнопку, а spoiler_a.gif это имя файла кнопки. Если вы залили кнопку, например, в папку images->editor то добавляем путь к папке, то есть

PHP код:

<img src="images/editor/spoiler_a.gif" 


Далее:

alt="Вставить тег [SPOILER] вокруг выделенного текста"

Это текст, который будет отображаться при наведении на кнопку в редакторе.. то есть текст-подсказка. (прим. в опере не пашет)

width="21" height="20"

- высота и ширина кнопки. Рисуйте кнопку всегда такого размера, потому как все кнопки в редакторах имеют такую высоту и ширину.


Бонус:
У меня на форуме установлено сразу два спойлера. Удобно, 1-ый для обычного юзания, а второй для релизеров потому что сворачивать треклист нужно им всегда..но чтобы они не прописывали все время руками опцию ля спойлера я им сделал без ввода.. но в тоже время убил двух зайцев - юзер понимает что скрывается за мспойлером) , то есть автоматом текст-подсказка - Tracklist

Заходим в админку-> Добавить BB коды

1-ый спойлер (с автоматическим вводом опции)
Заголовок: =придумайте сами=
Название bb кода: spoiler
Замена:

<script>
function spoiler_js(obj) {
var obj_content = obj.parentNode.parentNode.getElementsByTagName('div')[1];
var obj_text_show = obj.getElementsByTagName('span')[1];
var obj_text_hide = obj.getElementsByTagName('span')[0];

if (obj_content.style.display != '') {
  obj_content.style.display = '';
  obj_text_show.style.display = '';
  obj_text_hide.style.display = 'none';
} else {
  obj_content.style.display = 'none';
  obj_text_show.style.display = 'none';
  obj_text_hide.style.display = '';
}
return false;
}
</script>
<div style="border:1px dashed #999999; background-color:#EAEAEA;">
<div style="background-color:##E5E5FF">
<a href="#" style="text-decoration: none" onclick="return spoiler_js(this);">
<span style="background-color:#EAEAEA; margin-top:5px;"><img style="margin-left:5px;" border="0" src="images/misc/icon_plus.gif" width="9" height="9"> <b>Tracklist</b></span>
<span style="background-color:#EAEAEA; display:none; margin-top:5px;"><img style="margin-left:5px" border="0" src="images/misc/icon_minus.gif" width="9" height="9"><b> Tracklist</b></span>
</a></div>
<div style="padding:6px; display: none;">{param}</div>
</div>

Пример: [spoiler]Cloud kills Sepiroth[/spoiler]
Описание: =ваше описание=
Использовать опцию: НЕТ \\\ то о чем говорил выше.
Удалить BB код, если отсутствует текст: Да
Выключить BB коды внутри этого BB кода:
Выключить смайлы внутри этого BB кода: Нет
Выключить перенос строк внутри этого BB кода: Нет

===========
Замените слово Tracklist на свое
===========

2-ой спойлер (с обязательным вводом опции юзером):
Как в 1-ом НО:
Заголовок придумать другой. (с одинаковыми заголовками не даст сохранить)

в Замену добавить:

<script>
function spoiler_js(obj) {
var obj_content = obj.parentNode.parentNode.getElementsByTagName('div')[1];
var obj_text_show = obj.getElementsByTagName('span')[1];
var obj_text_hide = obj.getElementsByTagName('span')[0];

if (obj_content.style.display != '') {
  obj_content.style.display = '';
  obj_text_show.style.display = '';
  obj_text_hide.style.display = 'none';
} else {
  obj_content.style.display = 'none';
  obj_text_show.style.display = 'none';
  obj_text_hide.style.display = '';
}
return false;
}
</script>
<div style="border:1px dashed #999999; background-color:#EAEAEA;">
<div style="background-color:##E5E5FF">
<a href="#" style="text-decoration: none" onclick="return spoiler_js(this);">
<span style="background-color:#EAEAEA; margin-top:5px;"><img style="margin-left:5px;" border="0" src="images/misc/icon_plus.gif" width="9" height="9"> <b>{option}</b></span>
<span style="background-color:#EAEAEA; display:none; margin-top:5px;"><img style="margin-left:5px" border="0" src="images/misc/icon_minus.gif" width="9" height="9"><b> {option}</b></span>
</a></div>
<div style="padding:6px; display: none;">{param}</div>
</div>

Выбор опции: Да


Заливаем картинки папку images->misc (в коде замены пути прописаны )
и

Добавляете теперь кнопки на ваш ftp и добавляете коды в шаблоны редакторов.)

Скрины :-D :-D
|

P.S. в коде замены обратите внимание на текст красным шрифтом

=========================

Планировал написать кратко, но объясняя одно - пошла цепочка. гг..
Вообщем начинающим должно быть понятно от и до как добавлять кнопки и т.п.

Не пугайтесь "многотекста", просто внимательно прочтите и поймете.