I am slowly building my own cms for my site(s). As part of it I am creating a WYSIWYG which basically is a form that I use to write artilces in and then add them to the db. I use common tags HR, H1, BR etc so I have buttons that i click of ass that code into the form. Here is the very simple function for example: function addtext($value) { document.write_articles.article_body.value += $value; } <input onClick="addtext('<h1></h1>');" type="button" name="insert" value="H1"> As you can see this just adds the text in. BUT, I want it to add the text where my curser is (when Im editing articles). How do you do that in JS? or can you do it?
Heres what I use for my forum system: function s_c(textEl) { if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate(); } function addText(text){ var message=document.post.message; if(message.caretPos && message.createTextRange){ var cp=message.caretPos; cp.text=text; message.focus(); }else{ message.value+=text; message.focus(); } } Code (markup): Then on your editor form (textarea) copy the onclick and onkeyup commands: <textarea name="message" onclick="s_c(this);" onkeyup="s_c(this);"></textarea> Code (markup): That should do the trick
i am trying to do the same thing but cant get the above code to work. Would you mind posting the form as well so I can see the whole thing. Im sure i am just missing something small or huge, who knows. I tired with the script in the head as well but the below has it in the body tag. Thanks for any help!!! here is what i tried... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <script>function s_c(textEl) { if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate(); } function addText(text){ var message=document.post.message; if(message.caretPos && message.createTextRange){ var cp=message.caretPos; cp.text=text; message.focus(); }else{ message.value+=text; message.focus(); } }</script> <form action="" method="get" name="form"> <input onClick="addtext('<h1></h1>');" type="button" name="insert" value="H1"> <textarea name="message" id="message" onclick="s_c(this);" onkeyup="s_c(this);"></textarea> </form> </body> </html> Code (markup):
Hey, Your form name is called form. The javascript is looking for a form called post EG: var message=document.post.message; So either change the above line to: var message=document.form.message; Or change your form name to "post"
i got it to work, thanks. See very simple oversight, but in firefox it insert the code at the end rather than the middle and in both IE and firefox it doesn't wrap the selected text with the code, it just inserts it at the cursor. Also another mistake i had was on the call to the addtext function the function is addText and my call was addtext lower case 't'. Thanks for the fast reply.
<script type="text/javascript"> function blah() { var ta = document.getElementById("test"); if (document.selection) { str = document.selection.createRange().text document.selection.createRange().text = "<B>" + str + "</B>"; return true; } else if (ta.selectionStart) { var startPos = ta.selectionStart; var endPos = ta.selectionEnd; var str = ta.value.substring(startPos, endPos); ta.value = ta.value.substring(0, startPos) + "<B>" + str + "</B>" + ta.value.substring(endPos, ta.value.length); return true; } else { return false; } } </script> <input type="button" value="Bold" onclick="blah()" /> <br /> <textarea id="test" style="height:150px"> This is a test to see if the bold tags will work. </textarea> Code (markup):
Sorry for bumping. Question: How do you manage to replace all those UBB codes with HTML codes? LIKE: with <B> and so on...