SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
-
Oct 21, 2002, 18:07 #1
- Join Date
- Jul 2002
- Location
- Atlanta, Georgia
- Posts
- 132
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
adding html to a textarea by clicking image
So this is what I want to do. I want my client to be able to highlight text in a textarea, then press a button, and have the html for italic, bold, underline, etc insert around the highlighted text. I also want it to work the same way for hyperlinks, with a popup in which to enter the URL.
I've been searching around for a solution but I know very little Javascript and don't know how to make alot of that stuff work for me.
What fabulous Javascript genius wants to hook me up?
-
Oct 21, 2002, 20:01 #2
- Join Date
- Mar 2002
- Location
- Svíþjóð
- Posts
- 4,080
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Why press a button, when you can use Ctrl + B (for example) to make the text bold?
Code:<html> <head> <script language="javascript"> document.onkeydown = addTag; var ctl = false; function load() { str = 'Select some text in the textarea, press Ctl + B and view the result in the div below...'; frm.txt.value = str; div.innerHTML = frm.txt.value; } function addTag() { if(window.event.srcElement.id == 'txt') { if(window.event.keyCode == 17) { ctl = true; return true; } if(ctl && window.event.keyCode == 66) { var range = document.selection.createRange(); range.text = '<b>' + range.text + '</b>'; div.innerHTML = frm.txt.value; ctl = false; return false; } } } </script> <style> #txt { width: 600px; height: 200px; } #div { width: 600px; height: 200px; background-color: #ffffe1; border: 1px solid #000000; } </style> </head> <body onload="load();"> <form id="frm"> <textarea id="txt" rows="5" cols="80"></textarea> </form> <div id="div"> </div> </body> </html>
-
Oct 21, 2002, 20:08 #3
- Join Date
- Mar 2002
- Location
- Svíþjóð
- Posts
- 4,080
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmmm... must add code to remove overlapping tags
You don't want the text to look like
<b>Select <b>some</b> text</b> ...
-
Oct 21, 2002, 20:14 #4
- Join Date
- Mar 2002
- Location
- Svíþjóð
- Posts
- 4,080
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmmm, again... if the user press Ctrl and then doesn't press B, I, U or whatever...
Code:document.onkeyup = checkCtrl; function checkCtrl() { if(window.event.srcElement.id == 'txt') { if(window.event.keyCode == 17) { ctl = false; return true; } } }
-
Oct 22, 2002, 13:06 #5
-
Oct 22, 2002, 16:33 #6
- Join Date
- Mar 2002
- Location
- Svíþjóð
- Posts
- 4,080
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
As you like it
Code:<html> <head> <script language="javascript"> function load() { str = 'Select some text in the textarea and use the buttons to change style'; frm.txt.value = str; update(); } function update() { div.innerHTML = frm.txt.value; } function addTag(tag) { var range = document.selection.createRange(); if(range.parentElement().id == 'txt') { var text = '<' + tag; var attr = new Array(); if(tag == 'a') { var url = prompt('URL?', 'http://www.mysite.com'); if(!url) return false; attr[attr.length] = 'href=\\'' + url + '\\''; } for(var i = 0; i < attr.length; i++) { text += ' ' + attr[i]; } text += '>' + range.text + '</'+tag+'>'; range.text = text; update(); } } </script> <style> #cmdB { width: 24px; height: 24px; font-weight: bold; } #cmdI { width: 24px; height: 24px; font-style: italic; } #cmdU { width: 24px; height: 24px; text-decoration: underline; } #txt { width: 600px; height: 200px; } #div { width: 600px; height: 200px; background-color: #ffffe1; border: 1px solid #000000; } </style> </head> <body onload="load();"> <form id="frm"> <input type="button" id="cmdB" value="B" onclick="addTag('b');"/> <input type="button" id="cmdI" value="I" onclick="addTag('i');"/> <input type="button" id="cmdU" value="U" onclick="addTag('u');"/> <input type="button" id="cmdA" value="Link" onclick="addTag('a');"/> <br/> <textarea id="txt" rows="5" cols="80" onkeyup="update();"></textarea> </form> <div id="div"> </div> </body> </html>
Last edited by jofa; Oct 23, 2002 at 09:13.
-
Oct 22, 2002, 16:50 #7
- Join Date
- Mar 2002
- Location
- Svíþjóð
- Posts
- 4,080
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
To use your cool looking button images, change the <style> like this (and remove the value attribute for each input)...
#cmdB
{
width: 24px;
height: 24px;
background-image: url("my_cool_B_button.gif");
}Last edited by jofa; Oct 22, 2002 at 16:53.
-
Oct 22, 2002, 22:42 #8
- Join Date
- Jul 2002
- Location
- Atlanta, Georgia
- Posts
- 132
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks so much for the code,
jofa. But eek, I get an error.
I copy and pasted the stuff in <head></head>. This is my form:
Code:<BODY onload="load();"> <div class="admin"> <form method="post" action="editbio2.php" id="frm"> <input type="button" id="cmdB" value="B" onclick="addTag('b');"/> <input type="button" id="cmdI" value="I" onclick="addTag('i');"/> <input type="button" id="cmdU" value="U" onclick="addTag('u');"/> <input type="button" id="cmdA" value="Link" onclick="addTag('a');"/> <textarea COLS="70" ROWS="12" name="newContents" id="txt" onkeyup="update();"> <?php echo $contents;?> </textarea><br> <INPUT TYPE="SUBMIT" NAME="action" VALUE="Edit"> </form> <div id="div"> </div> </div> </FONT> </BODY>
-
Oct 23, 2002, 09:11 #9
- Join Date
- Mar 2002
- Location
- Svíþjóð
- Posts
- 4,080
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry...
This line:
attr[attr.length] = 'href='' + url + ''';
should be:
attr[attr.length] = 'href=\\'' + url + '\\'';
(backslash + single quote for single quotes inside the strings)
-
Oct 23, 2002, 09:17 #10
- Join Date
- Mar 2002
- Location
- Svíþjóð
- Posts
- 4,080
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Take a look a this:
http://msdn.microsoft.com/workshop/a...tml_editor.asp
Works in IE5.5+ only, but is kind of cool anyway
-
Oct 24, 2002, 09:09 #11
Bookmarks