JavaScript - Bbcode Editor- How To Set Cursor Postion In Between The Tags?

Hey I am looking for a better way of adding BBCode to a textarea.
Here's the code I use right now:

Code:

function insertext(text){
document.addnews.userpost.focus(); document.addnews.userpost.value=document.addnews.userpost.value +" "+ text;
document.addnews.userpost.focus()
}

This adds the BBCode tag to the end of the text in the textarea. How can I make it insert the tags where the the textarea cursor is? And if possible too could I make it so if you were to highlight something and press the bold tag button it would add the tags around that automatically?

Hello Everyone!

I hope someone can help me with fixing this javascript code

About the Code
So I got this Resize Image Code here. This code is for a free Forum Software called Zetaboards (just like phbb or vbulletin). I just need to put the code in my Admin Control Panel to make it work for the whole forum.

What does the code do?
The code add a BBCode to the posting page, which allows all members to insert images to their posts (just like the usual "img" bbcode) and also makes it possible to resize the images.

There are different resize image options:
1. [rimg]IMG_SRC[/rimg] // just inserts an image, like the normal "(img)(/img)" TAGS do.
2. [rimg=Width,Height]IMG_SRC[/rimg ] // with this option, you can change the width and height of the image.
3. [rimg=Percentage(needs % to be included)]IMG_SRC[/rimg] // Resize the image by typing the percentage size of the original image
4. [rimg=h,height]IMG_SRC[/rimg] //Just type the wanted height for the image, and the Width will be automatically adjusted
5. [rimg=w,width]IMG_SRC] //same as the code above, just the Height will be automatically adjusted instead.
6. [rimg=x]IMG_SRC[/rimg] //x will be both the height and width (so it'll be a square...)

Here is a test thread I made to test the "rimg code", so you can see how the code works:
http://s1.zetaboards.com/Piano2/topic/2874654/1/

What are the problems with the Code?
- the Images are not resized correctly
- sometimes, the images are resized correctly, but when i refresh the page, the images are again resized wrong.
- or sometimes, when the images are displayed wrong (too big or small), they will become fine when i refresh the page again
- In the Search View (when using the search) the images are too big and almost take the whole screen...
- the first option "[rimg][rimg]" even doesn't work completely on IE and Google Chrome and causes all other [rimg] bbcodes to be disabled


And finally this is the Javascript Code:
PHP Code:
<script type="text/javascript">
// Rimg by RedBldSandman of ZBCode.com
$(function() {
if (location.href.match("topic")||location.href.match("single")) {
$(".c_post").each(function() {
parse_rimg(this);
});
} else if (location.href.match("search")) {
$(".search_results").each(function() {
parse_rimg($(this).children("div:eq(0)"));
});
} else if (location.href.match("post")) {
var rimg_br = ($("a:contains(Full BBCode List)").next().html()!=null)?" ":"<br />";
$("td#c_bbcode").append(rimg_br+"<button name='rimg' type='button'>Rimg</button>");
$("button[name=rimg]").mouseover(function() {
$("input[name=helpbox]").val("Insert Image (with resize options)");
}).click(function(e) {
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
var u_p = prompt("Enter the Image Location","http://");
if (u_p==null) return;
var u_w = prompt("Options:\n1. Enter the chosen Width for the Image\n2. Enter the dimension to change (w for width or h for height)\n3. Enter the Percentage you wish to resize the Image to (include % sign)\n4. Leave blank for un-resized image");
if (u_w==null) return;
u_w = u_w.replace(/s/gi,"").toLowerCase();
if (u_w=="") {
ZetaInsert("[rimg]"+u_p+"[/rimg]");
return;
} else if (u_w.match("%")) {
ZetaInsert("[rimg="+u_w+"]"+u_p+"[/rimg]");
return;
} else if (u_w=="h") {
var u_h = prompt("Enter Resize Height");
if (u_h==null) return;
ZetaInsert("[rimg=h,"+u_h+"]"+u_p+"[/rimg]");
return;
} else if (u_w=="w") {
var u_h = prompt("Enter Resize Width");
if (u_h==null) return;
ZetaInsert("[rimg=w,"+u_h+"]"+u_p+"[/rimg]");
return;
} else if (parseInt(u_w)) {
var u_h = prompt("Enter Chosen Height");
if (u_h==null) return;
ZetaInsert("[rimg="+u_w+","+u_h+"]"+u_p+"[/rimg]");
}
});
$("#topic_review tbody tr").each(function() {
parse_rimg($(this).children("td:eq(1)"));
});
}
});

function parse_rimg(z) {
$(z).html($(z).html().replace(/[rimg(?:=s*([dw%]+?)s*(?:,s*(d+?)s*)?)?](.+?)[/rimg]/gi,function(x,y,a,b) {
if (y.match("%")) {
y = y.replace(/[^d.]/gi,"");
return "<img src='"+b+"' alt='Posted Image "+y+"' class='Rimg_percent' />";
} else if (y.match(/D/i)) {
y = y.replace(/[^hw]/gi,"").toLowerCase().split("")[0];
y = (y!="h"&&y!="w")?null:y;
if (y) {
return "<img src='"+b+"' alt='Posted Image "+a+"' class='Rimg_single Rimg_"+y+"' />";
} else {
return x;
}
} else if (!a) {
return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+y+"' />";
} else {
return "<img src='"+b+"' alt='Posted Image' width='"+y+"' height='"+a+"' />";
}
}));

$(".Rimg_single").not("div.spoiler .Rimg_single").each(function() {
Rimg_single(this);
});

$(".Rimg_percent").not("div.spoiler .Rimg_percent").each(function() {
Rimg_percent(this);
});

$(z).find("div.spoiler_toggle").click(function() {
$(this).next().toggle();
$(this).next().find(".Rimg_single").each(function() {
Rimg_single(this);
});
$(this).next().find(".Rimg_percent").each(function() {
Rimg_percent(this);
});
});
}

function Rimg_single(x) {
var oldH = $(x).height();
var oldW = $(x).width();
var newD = $(x).attr("alt").replace(/[^d.]/gi,"");
if ($(x).hasClass("Rimg_h")) {
$(x).height(newD).width((newD/oldH)*oldW);
} else if ($(x).hasClass("Rimg_w")) {
$(x).width(newD).height((newD/oldW)*oldH);
}
$(x).attr("alt","Posted Image").removeAttr("class");
}

function Rimg_percent(x) {
var NewD = $(x).attr("alt").replace(/[^d.]/gi,"")/100;
$(x).height($(x).height()*NewD).attr("alt","Posted Image").removeAttr("class");
}

function Preview() {
var prevQuote;
if ($("#c_post-preview").length || $("#c_post textarea").val() || $("#txt_quote").val()) {
if (!$("#c_post-preview").length) {
$("#c_post").prepend("<div id='c_post-preview'></div>");
}
if ($("#txt_quote").length && $("#txt_quote").val()) {
prevQuote = "[quote]" + $("#txt_quote").val() + "[/quote]";
} else {
prevQuote = "";
}
$.post(main_url + "tasks/", { "task": 5, "post": prevQuote + $("#c_post textarea").val() }, function(s) {
$("#c_post-preview").html(s);
if (window.parse_utube&&typeof window.parse_utube=="function") parse_utube($("#c_post-preview"));
parse_rimg($("#c_post-preview"));
});
}
return false;
}
</script> 



Can someone please help to make the code work correctly so the images are resized properly at least on Firefix and IE?

Thanks for your answers and help!

Hey i am trying to create a BBCode thing, and i need a checker which wont let the users send a reply with out the TAGs being correct

to of my tags are [ php ] and [ /php ] there arnt spaces in it tho, but i am stuck for some reason i cant get it to work, i am not very good with JQuery or Javascript i am more based in PHP and HTML and MySQL

can anyone help

Code:

function Reply_Box_Check(){
	if($("#reply_box").innerHTML().indexOf('[ PHP ]') >= 0 && $("#reply_box").innerHTML().indexOf('[ /PHP ]') < 0){
		 alert("Please Close PHP code");
	}
}

It is ment to:
if the user has inputed [ php ] but not [ /php] then it will alert them of this and will not send there data, and also is there a way to make this post after checking?

Code:

function goBullet()
{

   var formBody = document.getElementById("body");
   var listCount = prompt("Please enter the number of items in the list.", "1");
   
   if (listCount == null || listCount == "")
   {
   
      formBody.value += "";
      
   }
   
   else
   {
   
      var listCountInt = parseInt(listCount);
      var listItem = new Array();
      formBody.value += "[UL]";
      
      for (var i = 0; i < listCountInt; i++);
      {
      
         listItem[i] = prompt("Please enter an item.", "");
         
         if (listItem[i] != null || listItem[i] != "")
         {
         
            formBody.value += "[LI]" + listItem[i] + "[/LI]";
            
         }
         
      }
      
      formBody.value += "[/UL]";
      
   }
   
}

The problem I'm having is no matter what number I'm entering, the for loop only executes once, thus only adding the first list item. Any ideas?

Hi;

I'd like to ask you a question;

why my mouse cursor does not sit in the position of the leftmost and topmost of a bbcode form. Thanks.

my form as following;

bbcode form


PHP Code:
<form action="story_verify1.php" method="post" name="editform" onsubmit="return checkForm(this)">
<table id="editform">
<tr>
        <td id="story">My story</td>
</tr>


<tr>

        <td>
                <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '[b]', 'bold*', '[/b]', 'bold', 'bold');" onmouseover="helpline('bold')" />
                <input type="button" class="button" value="italic" name="italic" onclick="javascript:tag('i', '[i]', 'italic*', '[/i]', 'italic', 'italic');" onmouseover="helpline('italic')" />
                <input type="button" class="button" value="underline" name="underline" onclick="javascript:tag('u', '[u]', 'underline*', '[/u]', 'underline', 'underline');" onmouseover="helpline('underline')" />
                <input type="button" class="button" value="quote" name="quote" onclick="javascript:tag('q', '[quote]', 'quote*', '[/quote]', 'quote', 'quote');" onmouseover="helpline('quote')" />
                <input type="button" class="button" value="code" name="code" onclick="javascript:tag('c', '[code]', 'code*', '[/code]', 'code', 'code');" onmouseover="helpline('code')" />
                <input type="button" class="button" value="url" name="url" onclick="javascript:tag('url', '[url]', 'url*', '[/url]', 'url', 'url');" onmouseover="helpline('url')" />
                <input type="button" class="button" value="img" name="img" onclick="javascript:tag('img', '[img]', 'img*', '[/img]', 'img', 'img');" onmouseover="helpline('img')" />
                <br />
                Font size: <select name="fontsize" onchange="font('[size=' + this.form.fontsize.options[this.form.fontsize.selectedIndex].value + ']', '[/size]'); this.selectedIndex=2;" onmouseover="helpline('fontsize')" class="form_elements_dropdown">

                                <option value="50%" >Tiny</option>
                                <option value="75%" >Small</option>
                                <option value="100%" selected="selected" >Normal</option>
                                <option value="150%" >Large</option>
                                <option  value="200%" >Huge</option>
                        </select>


                Font color: <select name="fontcolor" onchange="font('[color=' + this.form.fontcolor.options[this.form.fontcolor.selectedIndex].value + ']', '[/color]'); this.selectedIndex=0;" onmouseover="helpline('fontcolor')" class="form_elements_dropdown"  >
                                <option value="black" style="color:black">Black</option>
                                <option value="silver" style="color:silver">Silver</option>
                                <option value="gray" style="color:gray">Gray</option>
                                <option value="maroon" style="color:maroon">Maroon</option>
                                <option value="red" style="color:red">Red</option>                                                                                <option value="purple" style="color:purple">Purple</option>
                                <option value="fuchsia" style="color:fuchsia">Fuchsia</option>
                                <option value="navy" style="color:navy">Navy</option>
                                <option value="blue" style="color:blue">Blue</option>
                                <option value="aqua" style="color:aqua">Aqua</option>
                                <option value="teal" style="color:teal">Teal</option>
                                <option value="lime" style="color:lime">Lime</option>
                                <option value="green" style="color:green">Green</option>
                                <option value="olive" style="color:olive">Olive</option>
                                <option value="yellow" style="color:yellow">Yellow</option>
                                <option value="white" style="color:white">White</option>                                                </select>

                                <br />

                <input type="text" name="helpbox" size="75" class="helpbox" readonly="readonly"/>
                </td>
</tr>
<tr>
                <td>
                Post:***<br />
                <textarea rows="10" cols="50" name="Content" class="form_elements_text" id="thread">
                    <?php echo trim(stripslashes($_SESSION['story_content'])); ?>

                </textarea>
                </td>
</tr>


<tr>
                <td colspan="2" class="security_check">
                <?php $_SESSION['fvalue']=rand(0,9); echo $_SESSION['fvalue'];  ?>  +
                <?php $_SESSION['svalue']=rand(0,9); echo $_SESSION['svalue'];   ?> = <input type="text" name="result" /> **

               </td>
</tr>

<tr>

                <td colspan="2" id="post">
                <input type="submit" name="Post" value="Post" class="button" />
                <input type="submit" name="preview" value="Preview" class="button"/>
                <input type="reset" value="Reset" class="button" onclick="javascript:confirm_reset();"/>
                </td>
</tr>
</table>
</form>




bbcode.js

PHP Code:
//Variables for controlling opening and closing tags (function tag)

var b = 2;
var i = 2;
var u = 2;
var q = 2;
var mail = 2;
var url = 2;
var img = 2;

//Function for creating non-font tags

function tag(v, tagadd, newbut, tagclose, oldbut, name)
{


var r = document.selection.createRange().text;

rr = tagadd + r + tagclose;

if(r)
{
 document.selection.createRange().text = rr;
}
else
{
 if (eval(v)%2 == 0)
{
 eval("window.document.editform."+name+".value = newbut;");
 var content = window.document.editform.content.value;
 window.document.editform.content.value =  content + tagadd;
 window.document.editform.content.focus();
}
else
{
 eval("window.document.editform."+name+".value = oldbut;");
 var content = window.document.editform.content.value;
 window.document.editform.content.value = content + tagclose;
 window.document.editform.content.focus();
}

eval(v+"++;");
}
}

//Function for adding font color and size tags

function font(bbopen, bbclose) {
        var r = document.selection.createRange().text;
        rr = bbopen + r + bbclose;

        if(r)
        {
          document.selection.createRange().text = rr;
        }else{
          var post = document.editform.post;
          post.value += bbopen +r+ bbclose;
          post.focus();
        }
        return;
}


function smilie (tag) {
       var myField; 
        tag = ' ' + tag + ' '; 
        if (document.getElementById('thread') && document.getElementById('thread').type == 'textarea') { 
                  myField = document.getElementById('thread'); 
        } else { 
                return false; 
        } 
        if (document.selection) { 
                 myField.focus();  
                sel = document.selection.createRange(); 
                sel.text = tag; 
                myField.focus(); 
        } 
        else if (myField.selectionStart || myField.selectionStart == '0') { 
                var startPos = myField.selectionStart; 
                var endPos = myField.selectionEnd; 
                var cursorPos = endPos; 
                myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length); 
                cursorPos += tag.length; 
                myField.focus(); 
                myField.selectionStart = cursorPos; 
                myField.selectionEnd = cursorPos; 
        } 
        else { 
                myField.value += tag; 
                myField.focus(); 
        } 



}




//Helpbox messages
bold_help = "Bold text: [b]text[/b]";
italic_help = "Italic text: [i]text[/i]";
underline_help = "Underline text: [u]text[/u]";
quote_help = "Quote text: [quote]text[/quote] or [quote=name]text[/quote]";
code_help = "Code display: [code]code[/code]";
img_help = "Insert image: [img]http://image_url[/img]";
url_help = "Insert URL: [url]http://url[/url] or [url=http://url]URL text[/url]";
fontcolor_help = "Font color: [color=red]text[/color]  Tip: you can also use color=#FF0000";
fontsize_help = "Font size: [size=50%]small text[/size]";

//Function for displaying help information

// Shows the help messages in the helpline window
function helpline(help) {
        var helpbox = document.editform.helpbox;
        helpbox.value = eval(help + "_help");
}

//Function to confirm reset

function confirm_reset () {
        if(confirm("If you continue you will loose everything you have entered so far. \n \n" +
                "Click OK to proceed and start again.  \n \n Alternatively click cancel to continue " +
                "working on your post.")) {
                        return true;
                                }
                else {
                        return false;
                                }
}

//Check the form submission for errors

function checkForm() {
        var subject = document.editform.subject;
        var post = document.editform.post;

        //Check to make sure post lengths are sensible

        if (subject.value.length < 2 && post.value.length < 2) {
                alert("This is a short post!" + " \n \n " +
                                "We require that each post (and subject) \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                return false;
        }
        else { if (subject.value.length < 2) {
                        alert("We require that the subject  \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                                return false;
                                }
                        else { if (post.value.length < 2) {
                        alert("We require that each post  \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                                return false;
                                }
                                else {
                                        return true;
                                }
                        }
        }
}