Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: BBCode buttons

  1. #1
    Regular Coder
    Join Date
    Oct 2003
    Posts
    603
    Thanks
    2
    Thanked 1 Time in 1 Post

    BBCode buttons

    i have my BBCode buttons working so when i am typing, i can press the B button and it puts [BOLD] where i am right then, but how do i get it so that in the Edit form of that same text, i can highlight some text and click the same B button and it will put [BOLD] and [/BOLD] tags before and after the highlighted text?

    and also, when i click the B button, it doesnt put the [BOLD] where my cursor currently is... it puts it at the end of the textarea's value
    Last edited by boeing747fp; 08-30-2004 at 09:51 AM.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here, this should get you started...

    It is currently IE only... To make it Mozilla compatable you will need to add support for: setSelectionRange, selectionStart, selectionEnd... If you can not do this yourself... Perhaps someone else would be willing to do this for you... But ATM, I do not have the time nor do I know what your form looks like so I am not going to waste my time writing something else which may not be what you are looking for....

    Code:
    <script type="text/javascript">
     <!--//
      function setCaretPos(input){ 
        if(input.createTextRange){
           input.caretPos = document.selection.createRange().duplicate();
        }
      }
    
      function insertAtCaret (input,button) { 
        if(document.all && input.createTextRange){
          if(input.caretPos && button.value.match(/(\*)?(\w+)/)){
            if(input.caretPos.text.length == 0){
               input.caretPos.text = '['+RegExp.$1.replace('*','/')+RegExp.$2+']';
               button.value = (button.value == '*'+RegExp.$2) ? RegExp.$2 : '*'+RegExp.$2;
            }  else{ input.caretPos.text = '['+RegExp.$2+']'+input.caretPos.text+'[/'+RegExp.$2+']' };
          }  
        }
      }
     //-->
    </script>
    </head>
    
    <body>
    <form>
         <input type="button" value="B" onclick="insertAtCaret(this.form.text,this)">
         <input type="button" value="I" onclick="insertAtCaret(this.form.text,this)">
    
      <p>
         <textarea name="text" 
                   style="width:600px;height:200px;"
                   onselect="setCaretPos(this);"
                   onclick="setCaretPos(this);"
                   onkeyup="setCaretPos(this);" >
         Click in this input anywhere and then press the buttons above. It will insert the BBcode at the caret position and change the button to indicate that the BBcode is open. Click anywhere again and it will close the open tag or you may choose another tag to open.
    
         Additionally, you may highlight text and choose one of the buttons above and the selected text will be wrapped in the corresponding BBcode.</textarea>
       </form>
    .....Willy

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Gecko and IE compatible with nesting error checking:
    www.vladdy.net/Demos/TextAreaInsertion.html
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

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