Insert tag into text area

[EchoFool]

Just wondering if any one could explain how phpfreaks allows you to insert tags around text by pression the buttons above the text area and not refresh the page when it inserts it to the text?

 

Like if i put this sentence and then press the quote button it inserts the [ quote ] ? I been using sessions which is a bit of pain when users go to a different post and session is still created meaning it will still show their last post when they want to type out a new one...

 

Hope you can explain it a bit.

[thebadbad]

It's javascript. This forum uses this function:

 

// Surrounds the selected text with text1 and text2.
function surroundText(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

if (temp_length == 0)
{
caretPos.moveStart("character", -text2.length);
caretPos.moveEnd("character", -text2.length);
caretPos.select();
}
else
textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var newCursorPos = textarea.selectionStart;
var scrollPos = textarea.scrollTop;

textarea.value = begin + text1 + selection + text2 + end;

if (textarea.setSelectionRange)
{
if (selection.length == 0)
textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
else
textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
textarea.focus();
}
textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
textarea.value += text1 + text2;
textarea.focus(textarea.value.length - 1);
}
}

 

If we then have a textarea with id="text", this will be the link inserting the 'tags', e.g. [something] and [/something]:

 

<a href="" onclick="surroundText('[something]', '[/something]', document.getElementById(text)); return false;">Insert something</a>

[EchoFool]

Yeah i tried that but it didn't work....see if it works for you:

 

<SCRIPT language="JavaScript">				
			// Surrounds the selected text with text1 and text2.
function surroundText(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
{
var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

if (temp_length == 0)
{
caretPos.moveStart("character", -text2.length);
caretPos.moveEnd("character", -text2.length);
caretPos.select();
}
else
textarea.focus(caretPos);
}
// Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
var begin = textarea.value.substr(0, textarea.selectionStart);
var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
var end = textarea.value.substr(textarea.selectionEnd);
var newCursorPos = textarea.selectionStart;
var scrollPos = textarea.scrollTop;

textarea.value = begin + text1 + selection + text2 + end;

if (textarea.setSelectionRange)
{
if (selection.length == 0)
textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
else
textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
textarea.focus();
}
textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
textarea.value += text1 + text2;
textarea.focus(textarea.value.length - 1);
}
}


</SCRIPT>



<?phpIf(!isset($_GET['italics'])){?>
					<li><a href="" onclick="surroundText('[i]', '[/i]', document.getElementById(text)); return false;">Italics</a></li>
					<?php}ElseIf(isset($_GET['italics'])){?>
					<li><a href="publicforum.php?Catergory=<?=$Catergory?>&Thread=<?=$Thread?>&italics2">Italics ***</a></li>
					<?php}?>


					<textarea name="TextArea1" id="text" rows="14" cols="60"></textarea><br>
			<input type="submit" name="Button1" value="Post Reply">

[EchoFool]

Bump

[thebadbad]

The sample code below is working for me, in IE however, the tags are only inserted after the content in the textarea, and not around the marked bit:

 

<html>
<head>
<script type="text/javascript">
// Surrounds the selected text with text1 and text2.
function surroundText(text1, text2, textarea)
{
   // Can a text range be created?
   if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange)
   {
      var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

      caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

      if (temp_length == 0)
      {
         caretPos.moveStart("character", -text2.length);
         caretPos.moveEnd("character", -text2.length);
         caretPos.select();
      }
      else
         textarea.focus(caretPos);
   }
   // Mozilla text range wrap.
   else if (typeof(textarea.selectionStart) != "undefined")
   {
      var begin = textarea.value.substr(0, textarea.selectionStart);
      var selection = textarea.value.substr(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart);
      var end = textarea.value.substr(textarea.selectionEnd);
      var newCursorPos = textarea.selectionStart;
      var scrollPos = textarea.scrollTop;

      textarea.value = begin + text1 + selection + text2 + end;

      if (textarea.setSelectionRange)
      {
         if (selection.length == 0)
            textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
         else
            textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
         textarea.focus();
      }
      textarea.scrollTop = scrollPos;
   }
   // Just put them on the end, then.
   else
   {
      textarea.value += text1 + text2;
      textarea.focus(textarea.value.length - 1);
   }
}
</script>
</head>
<body>
<form name="theform">
<p><a href="" onclick="surroundText('[something]', '[/something]', document.forms.theform.text); return false;">Insert something</a></p>
<textarea id="text"></textarea>
</form>
</body>
</html>