AdRock Posted September 3, 2007 Share Posted September 3, 2007 I have a javscript BBcode text editor and everything works fine except and i can't get the font and color tags to wrap around the text properly. Currently, if i highlight the text and click ont the font size button or try and change the font color, the BB tags appear after the text. I did get it working sort of but when I clicked those buttons the rest of the form was wiped out and the other time it would do what I wanted but it copied the text and then applied the tags. Basically, I just want to be able to increase the font-size or change color of the text. The text editor form <html><head> <title>Editor</title> <script src="editor.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head><body> <form action="bbcode2.php" method="post" name="editform" onsubmit="return checkForm(this)"> <table id="editform"> <tr> <td colspan="2" id="header">Post a new message</td> </tr> <tr id="subject"> <td>Subject:</td> <td><input type="text" name="subject" size="50" class="form_elements_text"/></td> </tr> <tr> <td rowspan="2" id="smilies">Smilies <a href="javascript:smilie('')"> <img src="smile.gif" alt="smile" title="smile" /></a> <a href="javascript:smilie('')"> <img src="biggrin.gif" alt="big grin" title="big grin"/></a> <a href="javascript:smilie('')"> <img src="razz.gif" alt="razz" title="razz" /></a></td> <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="mail" name="mail" onclick="javascript:tag('mail', '[mail]', 'mail*', '[/mail]', 'mail', 'mail');" onMouseOver="helpline('mail')" /> <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');" 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 >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="post" class="form_elements_text"></textarea> </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="Start over" class="button" onclick="javascript:confirm_reset();"/> </td> </tr> </table> </form> </body></html> The JavaScript //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 post = document.editform.post; post.value += bbopen + bbclose; post.focus(); return; } //Function for adding smilies function smilie (smilie) { var post = document.editform.post; post.value += smilie; post.focus(); return; } //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]"; email_help = "Insert email: [mail]email[/mail]"; img_help = "Insert image: [img=http://image_url]"; 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; } } } } Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.