Расширенная форма быстрого ответа, Сборка сервиса

[Dron]

С помощью данного скрипта вы сможете добавить в форму быстрого ответа маленькую симпотичную формочку быстрых тегов. *Чтоб вас заинтересовало сразу привожу СКРИНШОТ.


ЧАСТЬ ПЕРВАЯ: ТЕГИ
Быстрые теги работают по очень удобному методу:

• Вставляются на место курсора
• Если есть выделенный текст, то они обводят его.

Скрипт проверен в ИЕ, Mozilla, Opera. Думаю проблем особых не должно быть.
И так, преступим к установке.

1) Стиль.
В формочке используются название стандартных классов скина, но есть мелкое изменение для курсора:
АЦ -> Скины/Шаблоны -> Стиль -> Редактировать
Находим:

Цитата

.row2 { background-color: #DFE6EF }

копируем, вставляем ниже, добавляем "x" в название, и 1 оператор. Выглядеть будет так:

Цитата

.row2x { background-color: #DFE6EF;cursor: pointer;}

Повторяю:Код НЕ заменять, а добавлять ниже.

2) Форма.
АЦ -> Скины/Шаблоны -> HTML шаблоны -> Настройка HTML -> Topic View Section -> quick_reply_box_open
Находим:

Цитата

  <!-- TITLE DIV -->
          <div class="tableborder">
            <div class='maintitle'><{CAT_IMG}>&nbsp;{ibf.lang.qr_title}</div>
                <div class="tablepad" align="center">

И после этого вставляем:

Цитата

<!== НАЧАЛО ТЕГИ В БЫСТРОМ ОТВЕТЕ ==>

<div class="tablepad" align="center">
<table border=0><tr><td width=33%>
<table class= "tableborder" cellpadding= 5 cellspacing=1>
<tr class= "maintitle"><td colspan=3 align="center">Быстрые теги</td></tr>
<tr><td>
<table class= "tableborder" cellpadding= 5 cellspacing=1>
<tr class="row2x" align = "center"><td colspan=2 width = 33% onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('B');this.style.backgroundColor='#EEF2F7'"><span><B>B</B></span></td><td colspan=2  width = 33% onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('I');this.style.backgroundColor='#EEF2F7'"><span><I>I</I></span></td><td colspan=2 width = 33% onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('U');this.style.backgroundColor='#EEF2F7'"><span><U>U</u></span></td></tr>
<tr class= "row2x" align = "center"><td colspan=2 onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('URL');this.style.backgroundColor='#EEF2F7'"><span><U>URL</U></span></td><td colspan=2 onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('IMG');this.style.backgroundColor='#EEF2F7'"><span><U>IMG</U></span></td><td colspan=2 onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('HTML');this.style.backgroundColor='#EEF2F7'"><span><font size=2>HTML</font></span></td></tr>
<tr class="row2x" align = "center"><td colspan=2 onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('QUOTE');this.style.backgroundColor='#EEF2F7'"><span>Quote</span></td><td colspan=2 onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('CODE');this.style.backgroundColor='#EEF2F7'"><span>Code</span></td><td colspan=2 onMouseOut="this.style.backgroundColor=''" onclick = "insTxt()" onmouseover = "copyT('List');this.style.backgroundColor='#EEF2F7'"><span>List</span></td></tr>
<!--COLOR-->
<tr><td style="background-color:blue; cursor:pointer; height:10px" onmouseover = "copyTC('blue')" onclick = "insTxt()"></td>
<td style="background-color:purple; cursor:pointer" onmouseover = "copyTC('purple')" onclick = "insTxt()"></td>
<td style="background-color:brown; cursor:pointer" onmouseover = "copyTC('brown')" onclick = "insTxt()"></td>
<td style="background-color:orange; cursor:pointer" onmouseover = "copyTC('orange')" onclick = "insTxt()"></td>
<td style="background-color:red; cursor:pointer" onmouseover = "copyTC('red')" onclick = "insTxt()"></td>
<td style="background-color:green; cursor:pointer" onmouseover = "copyTC('green')" onclick = "insTxt()"></td>
</td></tr></table></td></tr>
</table>

</td>
   <td width=34% align="center">
      <textarea cols='70' rows='8' name='Post' class='textinput' tabindex="1" id="tex" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="storeCaret(this);"></textarea>
  </td>

  <td width=33%></td>
</tr>
</table>

<!== КОНЕЦ ТЕГИ В БЫСТРОМ ОТВЕТЕ ==>

Удаляем тока старую строчку с textarea

ВНИМАНИЕ:
Приведенный код уже содержит текстареу со всем её "наворотами", то есть старую текстареу вы должны УДАЛИТЬ. Изначально она у вас выглядит примерно так:

Цитата

<textarea cols='70' rows='8' name='Post' class='textinput' tabindex="1"></textarea>

3) Скрипт.
АЦ -> Скины/Шаблоны -> HTML шаблоны -> Настройка HTML -> Topic View Section -> Header
Перед

Цитата

//-->
    </script>

Вставляем

Код

function copyT(code)
{if (typeof(document.getElementById('tex').caretPos) != 'undefined'){
if (window.getSelection) {text=window.getSelection()}
else if (document.selection) {text=document.selection.createRange().text;}
text='['+code+']'+text+'[/'+code+']'
}
else if (typeof(document.getElementById('tex').selectionStart) != 'undefined')
{
text = document.getElementById('tex').value.substring(document.getElementById('tex').selectionStart,document.getElementById('tex').selectionEnd)
text='['+code+']'+text+'[/'+code+']'
}

}

function copyTC(cl)
{if (typeof(document.getElementById('tex').caretPos) != 'undefined'){
if (window.getSelection) {text=window.getSelection()}
else if (document.selection) {text=document.selection.createRange().text;}
text='[COLOR='+cl+']'+text+'[/COLOR]'
}
else if (typeof(document.getElementById('tex').selectionStart) != 'undefined')
{
text = document.getElementById('tex').value.substring(document.getElementById('tex').selectionStart,document.getElementById('tex').selectionEnd)
text='[COLOR='+cl+']'+text+'[/COLOR]'
}

}

function storeCaret(element)
{
if (typeof(document.selection) != 'undefined' && typeof(document.selection.createRange) != 'undefined')
element.caretPos=document.selection.createRange().duplicate();
}

function insTxt()
{ var element = document.getElementById("tex")
if (!element)
return;
element.focus();
if (typeof(element.caretPos) != 'undefined')
element.caretPos.text = text;
else if (typeof(element.selectionStart) != 'undefined')
{
var newPos = element.selectionEnd + text.length;
element.value = element.value.substring(0, element.selectionStart) + text + element.value.substring(element.selectionEnd, element.value.length);
element.setSelectionRange(newPos, newPos);
}
else
element.value += text;
}

ЧАСТЬ ВТОРАЯ: СМАЙЛИКИ

Для того, чтобы были смайлики в быстром ответе во-первых, поставить скрипт добавления имени, который находится здесь:
http://ipboard.net/index.php?showtopic=26

Админцентр -> HTML шаблоны -> Настройка HTML -> Topic View Section -> quick_reply_box_open
Жмем Редактировать

Там найти строку

Цитата

<!== КОНЕЦ ТЕГИ В БЫСТРОМ ОТВЕТЕ ==>

и сразу после неё добавить

Код

<!== НАЧАЛО СМАЙЛИКОВ В БЫСТРОМ ОТВЕТЕ ==>
<table width=34% border=0>
<tr>
<td align='center' valign='middle'><a href="javascript:addName(' :) ');"><img src='http://ipboard.net/html/emoticons/smile.gif' border='0' valign='absmiddle' alt='smile.gif'></a></td>
<td align='center' valign='middle'><a href="javascript:addName(' :( ');"><img src='http://ipboard.net/html/emoticons/sad.gif' border='0' valign='absmiddle' alt='sad.gif'></a></td>
<td align='center' valign='middle'><a href="javascript:addName(' :D ');"><img src='http://ipboard.net/html/emoticons/biggrin.gif' border='0' valign='absmiddle' alt='biggrin.gif'></a></td>
<td align='center' valign='middle'><a href="javascript:addName(';) ');"><img src='http://ipboard.net/html/emoticons/wink.gif' border='0' valign='absmiddle' alt='wink.gif'></a></td>
<td align='center' valign='middle'><a href="javascript:addName(' :o ');"><img src='http://ipboard.net/html/emoticons/ohmy.gif' border='0' valign='absmiddle' alt='ohmy.gif'></a></td>
<td align='center' valign='middle'><a href="javascript:addName(' :angry: ');"><img src='http://ipboard.net/html/emoticons/mad.gif' border='0' valign='absmiddle' alt='mad.gif'></a></td>
<td align='center' valign='middle'><a href="javascript:addName(' :P ');"><img src='http://ipboard.net/html/emoticons/tongue.gif' border='0' valign='absmiddle' alt='tongue.gif'></a></td>
<td align='center' valign='middle'><a href="javascript:addName(' :blink: ');"><img src='http://ipboard.net/html/emoticons/blink.gif' border='0' valign='absmiddle' alt='blink.gif'></a></td>
<td align='center' valign='middle'><a href="javascript:addName(' :lol: ');"><img src='http://ipboard.net/html/emoticons/laugh.gif' border='0' valign='absmiddle' alt='laugh.gif'></a></td>
</tr>
</table>
</div>
<!== КОНЕЦ СМАЙЛИКОВ В БЫСТРОМ ОТВЕТЕ ==>

ВАЖНОЕ ЗАМЕЧАНИЕ:
Если вы не хотите устанавливать теги а хотите только смайлы, то:
Вариант другой:
По Прежнему устанавливаете Добавление имени в поле быстрого ответа.
После этого:
Админцентр -> HTML шаблоны -> Настройка HTML -> Topic View Section -> quick_reply_box_open
Жмем Редактировать
Находим там строку

Код

<textarea cols='70' rows='8' name='Post' class='textinput' tabindex="1"></textarea>

И сразу после нее вставляем:

Код

<div>
<tr>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(' :) ');"><img src='http://ipb.su/html/emoticons/smile.gif' border='0' valign='absmiddle' alt='smile.gif'></a></td>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(' :( ');"><img src='http://ipb.su/html/emoticons/sad.gif' border='0' valign='absmiddle' alt='sad.gif'></a></td>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(' :D ');"><img src='http://ipb.su/html/emoticons/biggrin.gif' border='0' valign='absmiddle' alt='biggrin.gif'></a></td>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(';) ');"><img src='http://ipb.su/html/emoticons/wink.gif' border='0' valign='absmiddle' alt='wink.gif'></a></td>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(' :o ');"><img src='http://ipb.su/html/emoticons/ohmy.gif' border='0' valign='absmiddle' alt='ohmy.gif'></a></td>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(' :angry: ');"><img src='http://ipb.su/html/emoticons/mad.gif' border='0' valign='absmiddle' alt='mad.gif'></a></td>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(' :P ');"><img src='http://ipb.su/html/emoticons/tongue.gif' border='0' valign='absmiddle' alt='tongue.gif'></a></td>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(' :blink: ');"><img src='http://ipb.su/html/emoticons/blink.gif' border='0' valign='absmiddle' alt='blink.gif'></a></td>
<td align='center' class='row2' valign='middle'><a href="javascript:addName(' :lol: ');"><img src='http://ipb.su/html/emoticons/laugh.gif' border='0' valign='absmiddle' alt='laugh.gif'></a></td>
</tr>
</div>

ДОБАВЛЕНИЕ: ВОЗМОЖНОСТЬ ОТСЫЛАТЬ СООБЩЕНИЯ ИЗ ФОРМЫ БЫСТРОГО ОТВЕТА СОЧЕТАНИЕМ НАЖАТЫХ КЛАВИШ CTRL + ENTER
Админцентр -> HTML шаблоны -> Настройка HTML -> Topic View Section -> quick_reply_box_open
в самом начала после:

Цитата

<script type="text/javascript">
<!--

вставляем:

Цитата

document.onkeydown=function(e){
if (e) event=e
if ((event.keyCode==13)&&(event.ctrlKey)){
     document.REPLIER.submit.click();
}}

Все
© Использовались материалы авторов Maslo и Zhz

Это сообщение отредактировал аsm-а - Фев 10 2015, 13:26

[admin]

Alex Okonnor, здорово! Ждём исходников.

[Romych]

Alex Okonnor
если быть более точным, то у пунктов Шрифт, Размер, Цвет
тоже должен быть класс .codebuttons
и примерно такой стиль дающий фон плавного перехода от голубого к белому

Цитата

.codebuttons {
-moz-border-radius:3px 3px 3px 3px;
background-color:#FFFFFF;
background-image:url("http://forum.volginsky.ru/style_images/1/folder_editor_images/rte-dd-bg.gif");
background-repeat:no-repeat;
font-size:11px;
margin:0;
padding:2px 1px 2px 4px;
overflow:hidden;
width:auto;
}

приглядитесь на оригинале

[Alex Okonnor]

Цитата (Romych @ Сегодня, 20:11)

если быть более точным, то у пунктов Шрифт, Размер, Цвет
тоже должен быть класс .codebuttons

Так я знаю) На свой форум я это ставить не буду, так как имхо не нужно это, лишний кусок кода только...а сюда когда буду закидывать форму ответа, то сделаю это

Цитата (Romych @ Сегодня, 20:11)

и примерно такой стиль дающий фон плавного перехода от голубого к белому

Мммм просто у меня не синий форум, и стандартный стиль не подходит =)
И в css это будет легко исправить =)

[Ustas]

Alex Okonnor,посмотрел ваш форум,и понравилась строчка внизу форума"Новости,новые записи..."
А реально ли на своём форуме такое сделать?

[modnik]

Alex Okonnor, когда сможеш выложи розширеною форму ответа плс

[Сергей]

modnik, возможно, это ТО, что вы ищите.

[newfclub]

В приведенном моде есть смайлик « », которого в обычной форме ответа нет. Само собой, когда пользователь пользуется формой быстрого ответа и нажимает в ней на соответствующий смайлик, в сообщении картинка не отображается. То же самое, например, со смайликом с кодом « ».

Где бы тогда взять и как одним движением руки установить себе на форум такой набор смайликов, которому будут соответствовать смайлики формы быстрого ответа?

[Dron]

Цитата (newfclub @ Сегодня, 22:51)

Где бы тогда взять и как одним движением руки установить себе на форум такой набор смайликов, которому будут соответствовать смайлики формы быстрого ответа?

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

[admin]

АдминЦентр -> Администрирование -> Настройка смайликов - возможно Вы ищите именно это. Там предустановлено довольно много смайликов, их только добавить надо.

[newfclub]

Точно. Этот способ я уже обнаружил, просто он довольно таки трудоемкий, учитывая, что каждый недостающий смайлик надо добавлять отдельно. Кроме того, нужно знать, какая картинка какому названию соответвует. Интуитивно, зная английский язык, я установил почти все нужные смайлики. Но даже интуиция не помогла мне, например, определить название смайлика « :ohmy: », пришлось смотреть на форуме поддержки абсолютную ссылку к этому смайлику, и только так я обнаружил его название в списке в админ-центре.

Но все равно спасибо даже за эту возможность. Мне удалось все же установить соответствие между смайликами обеих форм ответа.

[Tr.]

У меня теперь "быстрый ответ" не работает, нажимаю и нет реакции

[Сергей]

Цитата (Tr. @ Сегодня, 14:22)

У меня теперь "быстрый ответ" не работает

Переустановите модификацию.

[Tr.]

Все получилось сделать спасиб.

[Tr.]

Как заменить смайлы на другие в быстром ответе? не стандартные, вот такой хочу добавить http://i006.radikal.ru/1109/f8/5c554c416815.gif
И как можно к стандартным залить свои смайлы?

сделал такой [Показать/Скрыть]

<td align='center' valign='middle'><a href="javascript:addName(' ');"><img src='http://i006.radikal.ru/1109/f8/5c554c416815.gif' border='0' valign='absmiddle'></a></td>

Можно как-то по иначе\компактнее?

Это сообщение отредактировал Tr. - Сен 8 2011, 21:47

[Hero]

Свои смайлкики загрузить нельзя, только выбрать в галереи АдминЦентре. И вообще это обсуждалось - +20%.
Администрирование -> Настройка смайликов.
Смайликов в галереи достаточно. Естественно, загрузка - закрыта.