Подскажите как в начале и в конце выделенной чтроки вставить "/[b\]\[/b\]" ? Разбирался с кодом что на этой странице но тут для меня все пока сложно, мне просто нужно добавить к тексту выделенному тексту в начале и в конце строки условные теги... Не судите слижком строго помогите чем можете, буду даже благодарен за линк в гугле на материалы по теме с правильно составленным запросом - спасибо!
Вот, я как-то из phpbb выдёргивал, тут целый редактор: Код (Text): <!-- text editor | (start) --> <script language="javascript" type="text/javascript"> var imageTag = false; var theSelection = false; var clientPC = navigator.userAgent.toLowerCase(); // Get client info var clientVer = parseInt(navigator.appVersion); // Get browser version var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1)); var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1)); bbcode = new Array(); bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[php]','[/php]','[del]','[/del]','[code]',' ','','','', '', '', '[sub]', '[/sub]', '[sup]', '[/sup]', '', '', '', '', '', '', '[justify]', '[/justify]'); imageTag = false; function getarraysize(thearray) { for (i = 0; i < thearray.length; i++) { if ((thearray == "undefined") || (thearray == "") || (thearray == null)) return i; } return thearray.length; } function arraypush(thearray,value) { thearray[ getarraysize(thearray) ] = value; } function arraypop(thearray) { thearraysize = getarraysize(thearray); retval = thearray[thearraysize - 1]; delete thearray[thearraysize - 1]; return retval; } function bbstyle(bbnumber) { var txtarea = document.editor.text; txtarea.focus(); donotinsert = false; theSelection = false; bblast = 0; if (bbnumber == -1) { // Close all open tags & default button names while (bbcode[0]) { butnumber = arraypop(bbcode) - 1; txtarea.value += bbtags[butnumber + 1]; buttext = eval('document.editor.addbbcode' + butnumber + '.value'); eval('document.editor.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"'); } imageTag = false; // All tags are closed including image tags txtarea.focus(); return; } if ((clientVer >= 4) && is_ie && is_win) { theSelection = document.selection.createRange().text; // Get text selection if (theSelection) { // Add tags around selection document.selection.createRange().text = bbtags[bbnumber] + theSelection + bbtags[bbnumber+1]; txtarea.focus(); theSelection = ''; return; } } else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0)) { mozWrap(txtarea, bbtags[bbnumber], bbtags[bbnumber+1]); return; } // Find last occurance of an open tag the same as the one just clicked for (i = 0; i < bbcode.length; i++) { if (bbcode == bbnumber+1) { bblast = i; donotinsert = true; } } if (donotinsert) { // Close all open tags up to the one just clicked & default button names while (bbcode[bblast]) { butnumber = arraypop(bbcode) - 1; txtarea.value += bbtags[butnumber + 1]; buttext = eval('document.editor.addbbcode' + butnumber + '.value'); eval('document.editor.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"'); imageTag = false; } txtarea.focus(); return; } else { // Open tags if (imageTag && (bbnumber != 14)) { // Close image tag before adding another txtarea.value += bbtags[15]; lastValue = arraypop(bbcode) - 1; // Remove the close image tag from the list document.editor.addbbcode14.value = "Img"; // Return button back to normal state imageTag = false; } // Open tag txtarea.value += bbtags[bbnumber]; if ((bbnumber == 14) && (imageTag == false)) imageTag = 1; // Check to stop additional tags after an unclosed image tag arraypush(bbcode,bbnumber+1); eval('document.editor.addbbcode'+bbnumber+'.value += "*"'); txtarea.focus(); return; } storeCaret(txtarea); } function mozWrap(txtarea, open, close) { var selLength = txtarea.textLength; var selStart = txtarea.selectionStart; var selEnd = txtarea.selectionEnd; if (selEnd == 1 || selEnd == 2) selEnd = selLength; var s1 = (txtarea.value).substring(0,selStart); var s2 = (txtarea.value).substring(selStart, selEnd) var s3 = (txtarea.value).substring(selEnd, selLength); txtarea.value = s1 + open + s2 + close + s3; return; } function storeCaret(textEl) { if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate(); } function bbfontstyle(bbopen, bbclose) { var txtarea = document.editor.text; if ((clientVer >= 4) && is_ie && is_win) { theSelection = document.selection.createRange().text; if (!theSelection) { txtarea.value += bbopen + bbclose; txtarea.focus(); return; } document.selection.createRange().text = bbopen + theSelection + bbclose; txtarea.focus(); return; } else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0)) { mozWrap(txtarea, bbopen, bbclose); return; } else { txtarea.value += bbopen + bbclose; txtarea.focus(); } storeCaret(txtarea); } </script> <table cellpadding="0px" cellspacing="0px"> <tr> <td> <div style="margin:3px; white-space:nowrap;"> <input type="button" name="addbbcode0" value=" B " onClick="bbstyle(0)" style="font-weight:bold; width:30px" /> <input type="button" name="addbbcode2" value=" i " onClick="bbstyle(2)" style="font-style:italic; width:30px" /> <input type="button" name="addbbcode4" value=" u " onClick="bbstyle(4)" style="text-decoration: underline; width:30px" /> <!--<input type="button" name="addbbcode6" value="Quote" onClick="bbstyle(6)" style="width:50px" />--> <!--<input type="button" name="addbbcode8" value="php" onClick="bbstyle(8)" style="width:40px" />--> <input type="button" name="addbbcode10" value="del" onClick="bbstyle(10)" style="width:40px" /> <!--<input type="button" name="addbbcode12" value="code" onClick="bbstyle(12)" style="width:40px" />--> <input type="button" name="addbbcode14" value="Img" onClick="bbstyle(14)" style="width:40px" /> <input type="button" name="addbbcode16" value="URL" onClick="bbstyle(16)" style="text-decoration: underline; width:40px" /> <input type="button" name="addbbcode18" value="email" onClick="bbstyle(18)" style="width:50px" /> <input type="button" name="addbbcode20" value="sub" onClick="bbstyle(20)" style="width:40px" /> <input type="button" name="addbbcode22" value="sup" onClick="bbstyle(22)" style="width:40px" /> <input type="button" name="addbbcode24" value="left" onClick="bbstyle(24)" style="width:40px" /> <input type="button" name="addbbcode26" value="center" onClick="bbstyle(26)" style="width:50px" /> <input type="button" name="addbbcode28" value="right" onClick="bbstyle(28)" style="width:40px" /> <input type="button" name="addbbcode30" value="justify" onClick="bbstyle(30)" style="width:50px" /> </div> <textarea name="text" rows="9" style="width:567px;"></textarea> <div style="margin:3px;"> <select name="addbbcode32" onChange="bbfontstyle('[color=' + this.form.addbbcode32.options[this.form.addbbcode32.selectedIndex].value + ']', '[/color]');this.selectedIndex=0;"> <option style="color:black;">Цвет шрифта</option> <option style="color:aqua;" value="aqua">Аквамарин</option> <option style="color:blue;" value="blue">Синий</option> <option style="color:fuchsia;" value="fuchsia">fuchsia</option> <option style="color:gray;" value="gray">Коричневый</option> <option style="color:green;" value="green">Зелёный</option> <option style="color:indigo;" value="indigo">Индиго</option> <option style="color:lime;" value="lime">Лимон</option> <option style="color:maroon;" value="maroon">maroon</option> <option style="color:navy;" value="navy">Армейский</option> <option style="colorlive;" value="olive">Оливковый</option> <option style="colorurple;" value="purple">Пурпурный</option> <option style="color:red;" value="red">Красный</option> <option style="color:silver;" value="silver">Серебрянный</option> <option style="color:teal;" value="teal">teal</option> <option style="color:white;" value="white">Белый</option> <option style="color:black;" value="black">Чёрный</option> <option style="color:yellow;" value="yellow">Жёлтый</option> </select> <select name="addbbcode34" onChange="bbfontstyle('[size=' + this.form.addbbcode34.options[this.form.addbbcode34.selectedIndex].value + ']', '[/size]');this.selectedIndex=0;"> <option>Размер шрифта</option> <option value="5">5px</option> <option value="6">6px</option> <option value="7">7px</option> <option value="8">8px</option> <option value="9">9px</option> <option value="10">10px</option> <option value="11">11px</option> <option value="12">12px</option> <option value="13">13px</option> <option value="14">14px</option> <option value="15">15px</option> <option value="16">16px</option> <option value="17">17px</option> <option value="18">18px</option> </select> </div> </td> </tr> </table> <!-- text editor | (stop) -->[/code]
Вот файл js. Главная функция tag Кстати, при работе не прокручивает страницу к началу. Комментарии нужны? [js] //Список пар тегов var tags=new Array('[ b ]','[/b]','[ i ]','[ /i ]','[div class="citate"]','[/div]','[span class="marker"]','[/span]','[span class="redmarker"]','[/span]','','','\n[p style="text-indent:2em"]','[/p]\n','\n[p style="text-indent:0px"]','[/p]\n','[a href=""]','[/a]','«','»'); function tag(n,textarea) { if ((navigator.appName=='Microsoft Internet Explorer') || (navigator.appName=='Opera') ) tagIE(n,textarea); if (navigator.appName=='Netscape') tagN(n,textarea); } //---------------------------------- function tagIE(n,textarea) { var openTag=tags[n]; var closeTag=tags[n+1]; textarea.focus(); var theSelection = document.selection.createRange(); if (theSelection.text!='') { caretPos = textarea.caretPos; document.selection.createRange().text=openTag+theSelection.text+closeTag; if (caretPos!=null) { caretPos.select(); } } } //---------------------------------- function tagN(n,textarea) { var scroll=textarea.scrollTop; var openTag=tags[n]; var closeTag=tags[n+1]; if (textarea.selectionEnd && (textarea.selectionEnd - textarea.selectionStart > 0)) { mozWrap(textarea, openTag, closeTag); textarea.scrollTop=scroll; } } //============================================================= function mozWrap(txtarea, open, close) { var selLength = txtarea.textLength; var selStart = txtarea.selectionStart; var selEnd = txtarea.selectionEnd; if (selEnd == 1 || selEnd == 2) selEnd = selLength; var s1 = (txtarea.value).substring(0,selStart); var s2 = (txtarea.value).substring(selStart, selEnd) var s3 = (txtarea.value).substring(selEnd, selLength); txtarea.value = s1 + open + s2 + close + s3; return; } //=========================[/js]
У меня на vladson.com сделано так HTML: <input value="[[color=red]B[/color]]" type="submit" onclick="document.getElementById('text').value+='[b[color=red]][[/color]/b]';return false"> <input value="[[color=red]I[/color]]" type="submit" onclick="document.getElementById('text').value+='[i[color=red]][[/color]/i]';return false"> <input value="[[color=red]U[/color]]" type="submit" onclick="document.getElementById('text').value+='[u[color=red]][[/color]/u]';return false"> <input value="[[color=red]S[/color]]" type="submit" onclick="document.getElementById('text').value+='[s[color=red]][[/color]/s]';return false"> <br> <textarea name="text" cols="30" rows="7" id="text"></textarea> Простенькое, работает и прозрачно. (за те пару лет что там стоит проверено в десятках версий десятков браузеров)
Думаю, и автор темы бы додумался до value+= Но он-то хотел выделенный фрагмент заключать в теги. А не в конце ставить теги без содержания.
tmanager он так-же сообщил что а когда что-то хочется понимать надо начинать с простого (а иногда и повторять самые основы) По крайней мере пихать весь JS из рнрВВ это точно для него не выход. (там одних заточек под IE4 и 5 килов на 20, я уж про оперу 5-6 не говорю)
Я предложил 60 строк, в которых вполне можно разобраться. Кстати, это мой рабочий файл для работы с выделенными фрагментами в textarea. Работает пару лет. Правда, не уверен, что всё сработает в старых броузерах.