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
  1. #1
    New Coder
    Join Date
    Jun 2011
    Location
    Algeirs,Algeria
    Posts
    43
    Thanks
    5
    Thanked 3 Times in 3 Posts

    Unhappy How to wrap a selected text in a TextArea?

    I searched about this problem over Internet and found the same result many times, I found this example on stackoverflow but this example didn't work in my project; I am making a toolbar with buttons that insert HTML tags around the selected text in a <textarea>, this exemple didn't work because when the user click on a button the selected text won't be selected anymore because <textarea> loses focus and selected text will be unselected, I am targeting Firefox and compatible browsers so you don't need to give me the IE code; jQuery codes are accepted; so, have you any idea?
    Last edited by Hamza7; 07-27-2011 at 11:09 PM. Reason: spell mistake

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    well something like this I guess ?


    Code:
    <script>
    function getSelText()
    {
        var txt = '';
         if (window.getSelection)
        {
            return window.getSelection();
                 }
        else if (document.getSelection)
        {
            return document.getSelection();
                }
        else if (document.selection)
        {
            return document.selection.createRange().text;
                }
        else return;
    document.aform.selectedtext.value =  txt;
    }
    
    function doIt(arg){
    if (!arg || getSelText() == ""){
    	document.getElementById('dsply').innerHTML="";
    	return
    	}
    if (arg == 1){
    	document.getElementById('dsply').innerHTML="<h1>"+getSelText()+"</h1>";
    	return
    	}
    if (arg == 2){
    	document.getElementById('dsply').innerHTML="<bold>"+getSelText()+"</bold>";
    	return
    	}
    if (arg == 3){
    	document.getElementById('dsply').innerHTML="<i>"+getSelText()+"</i>";
    	return
    	}
    
    }
    
    </script>
    
    <form name=aform >
    <textarea name="selectedtext" rows="5" cols="20">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus tristique nunc suscipit dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi a risus non diam porta pulvinar vitae eu massa. Aliquam et odio vel massa aliquet cursus. Pellentesque sed vehicula dolor. Sed vel metus mi. Phasellus sed hendrerit erat. Vivamus fringilla posuere ante ac laoreet. Vivamus hendrerit tristique cursus. Ut at vehicula felis. Nunc mollis orci id tortor porttitor ultrices. Etiam quis consectetur ipsum. Mauris pharetra ullamcorper augue, non mollis sapien gravida ut. 
    </textarea>
    <select onchange="doIt(selectedIndex);selectedIndex=0">
    <option>pick a tag
    <option>H1
    <option>BOLD
    <option>ITALISIZE
    </select>
    </form><div id=dsply></div>


    document.getElementById('dsply').innerHTML="<bold>"+getSelText()+"</bold>";
    There is no <bold> tag, just another typo,
    of course there is a <b> tag.
    Last edited by DaveyErwin; 07-28-2011 at 02:36 AM. Reason: correcting typo

  • #3
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Hamza7 View Post
    How to wrap a selected text in a TextArea?
    Check this out: http://www.massless.org/mozedit

    Should be all you need plus a little more.

    Edit: Do a "view source" to grab all the code.
    Last edited by Krupski; 07-28-2011 at 04:24 PM.
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov


  •  

    Posting Permissions

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