SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Zealot Jenna's Avatar
    Join Date
    Jul 2002
    Location
    Atlanta, Georgia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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?

  2. #2
    Sultan of Ping jofa's Avatar
    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>
    ToDo: Make it work in Mozilla too...

  3. #3
    Sultan of Ping jofa's Avatar
    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> ...

  4. #4
    Sultan of Ping jofa's Avatar
    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;
              }
            }
          }

  5. #5
    SitePoint Zealot Jenna's Avatar
    Join Date
    Jul 2002
    Location
    Atlanta, Georgia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    Sultan of Ping jofa's Avatar
    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 08:13.

  7. #7
    Sultan of Ping jofa's Avatar
    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 15:53.

  8. #8
    SitePoint Zealot Jenna's Avatar
    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>

  9. #9
    Sultan of Ping jofa's Avatar
    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)

  10. #10
    Sultan of Ping jofa's Avatar
    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

  11. #11
    SitePoint Zealot Jenna's Avatar
    Join Date
    Jul 2002
    Location
    Atlanta, Georgia
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neato.

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •