adding html to a textarea by clicking image

**Jenna** · Oct 21, 2002, 18:07

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?

**jofa** · Oct 21, 2002, 20:01

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>

ToDo: Make it work in Mozilla too...

**jofa** · Oct 21, 2002, 20:08

Hmmm... must add code to remove overlapping tags
You don't want the text to look like
<b>Select <b>some</b> text</b> ...

**jofa** · Oct 21, 2002, 20:14

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;
          }
        }
      }

**Jenna** · Oct 22, 2002, 13:06

Originally posted by jofa
Why press a button, when you can use Ctrl + B (for example) to make the text bold?

I really, reeeally want to use cool looking buttons though. It's all about presentation, you know.

I know it can be done. Pretty please, with a cherry on top?

**jofa** · Oct 22, 2002, 16:33

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>

**jofa** · Oct 22, 2002, 16:50

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");
}

**Jenna** · Oct 22, 2002, 22:42

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>

**jofa** · Oct 23, 2002, 09:11

Sorry...
This line:
attr[attr.length] = 'href='' + url + ''';
should be:
attr[attr.length] = 'href=\\'' + url + '\\'';

(backslash + single quote for single quotes inside the strings)

**jofa** · Oct 23, 2002, 09:17

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

**Jenna** · Oct 24, 2002, 09:09

Neato.

Thanks so much for your help, I know very little javascript and certainly couldn't have done this without you.

The SitePoint Forums have moved.

User Tag List

Thread: adding html to a textarea by clicking image

Thread Tools

Display

adding html to a textarea by clicking image

Bookmarks

Bookmarks

Posting Permissions