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 7 of 7
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,828
    Thanks
    21
    Thanked 157 Times in 148 Posts

    Exclamation putting tags around selected text in textarea

    I've been playing around with this code for a while now, and I just can;t seem to figure out a way to get this code to work in Mozilla/Firefox....

    It seems that Mozilla's getSelection() method can only return a variable string value, and can;t actually attach a value to the current form object like IE's document.selection.createRange() can....

    Anyway, it's giving me aheadache, and I can;t find any useful resources on the web to help me...If anyone can give me some tips or direct me towards an online tutorial for this, I would be immensely in your debt!

    Here's my code so far (it only works in IE at the moment):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang=en>
    
    <head>
    
    <title>Add System</title>
    
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    
    <script type="text/javascript">
    <!--
    
    	var isSelected = false;
    	var text;
    
    	function copySelection(workArea)
    	{
    		if (document.selection && document.selection.createRange)
    		{
    			workArea.workText = document.selection.createRange();
    		}
    		else if (document.getSelection)
    		{
    			text = document.getSelection();
    		}
    
    		isSelected = true;
    	}
    
    	function wrapInTags(workArea,isTag)
    	{
      		if (isSelected)
    		{
    			if (document.selection && document.selection.createRange)
    			{
    				workArea.workText.text = "["+isTag+"]"+workArea.workText.text+"[/"+isTag+"]";
    				if (workArea.workText.text==''){isSelected=false;workArea.focus()}
    			}
    			else if (document.getSelection)
    			{
    				workArea.value = "["+isTag+"]"+text+"[/"+isTag+"]";
    			}
      		}
    	}
    
    -->
    </script>
    
    </head>
    
    
    <body>
    
    <form name="main">
    
            <input name="bold" type="button" value="Bold" onclick="wrapInTags(window.document.main.area1,'b'); return false;">
    
            <input name="italic" type="button" value="Italic" onclick="wrapInTags(window.document.main.area1,'i'); return false;">
    
            <input name="underline" type="button" value="Underline" onclick="wrapInTags(window.document.main.area1,'u'); return false;">
    
    		<p><textarea name="area1" cols="53" rows="6" onselect="copySelection(window.document.main.area1)"></textarea></p>
    
    </form>
    
    </body>
    
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,828
    Thanks
    21
    Thanked 157 Times in 148 Posts
    These are good links, and I can certainly sift through the source code of these projects to try to emulate the techniques in my own code....

    But, I was looking for a more comprehensive explanation of how to actually code something like this....A tutorial that explains what the javascript is doing and why it works....

    The point is that I would like to try to write my own textarea editor, and not rely on a pre-packaged solution....I learn more that way

    Plus I really only need some basic functions for my editable text area...nothing fancy, just basic fiunctionality (i.e., the ability to add BB style tags -- Bold, Italic, Underline, URLs, and List tags)...

    Thanks for your response though...I still plan to look through the code of those existing WYSIWYG editors
    Last edited by chump2877; 07-07-2006 at 04:12 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #4
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #5
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,828
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Thanks!

    I used code from here: http://www.sitepoint.com/forums/showthread.php?t=296023

    BTW, it turns out I needed regular html tags instead of BB tags...

    Anyway, I added some of my own code to get the following, which seems to work for me:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html lang=en>
    
    <head>
    
    <title>Add System</title>
    
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    
    <script type='text/javascript'>
    <!--
    
    function ubbc(open, end)
    {
        if (open == "")
        {
    		var txt = prompt("Enter URL for the link.","http://");
    
    		if (txt)
    		{
    			open = '<a href="'+txt+'">';
    		}
    		else
    		{
    			return false;
    		}
        }
    
        if (open == "<ul>")
        {
    		var list_item = prompt("Enter a list item. Press \"Cancel\" when you are done.","");
    
    		if (list_item)
    		{
    			while (list_item)
    			{
    				open = open+"\n<li>"+list_item+"</li>";
    				list_item = prompt("Enter a list item. Press \"Cancel\" when you are done.","");
    			}
    
    			open = open+"\n";
    		}
    		else
    		{
    			return false;
    		}
        }
    
        var tArea = document.main.area1;
        var isIE = (document.all)? true : false;
        var open = (open)? open : "";
        var end = (end)? end : "";
    
        if (isIE)
        {
            tArea.focus();
            var curSelect = document.selection.createRange();
            if (arguments[2])
            {
                curSelect.text = open + arguments[2] + ">" + curSelect.text + end;
            }
            else
            {
                curSelect.text = open + curSelect.text + end;
            }
        }
        else if (!isIE && typeof tArea.selectionStart != "undefined")
        {
            var selStart = tArea.value.substr(0, tArea.selectionStart);
            var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length);
            var curSelection = tArea.value.replace(selStart, '').replace(selEnd, '');
            if (arguments[2])
            {
                tArea.value = selStart + open + arguments[2] + ">" + curSelection + end + selEnd;
            }
            else
            {
                tArea.value = selStart + open + curSelection + end + selEnd;
            }
        }
        else
        {
            tArea.value += (arguments[2])? open + arguments[2] + ">" + end : open + end;
        }
    }
    
    //-->
    </script>
    
    </head>
    
    
    <body>
    
    <form name="main">
        <input type='button' value='Bold' onclick="ubbc('<b>','</b>')" />
        <input type='button' value='Italic' onclick="ubbc('<i>','</i>')" />
        <input type='button' value='Make List' onclick="ubbc('<ul>', '</ul>')" />
        <input type='button' value='Add Link' onclick="ubbc('','</a>')" />
        <input type='button' value='HR' onclick="ubbc('<hr>')" />
        <input type='button' value='Wink' onclick="ubbc(';)')" />
        <p><textarea name='area1' cols='88' rows='6'></textarea></p>
    </form>
    
    </body>
    
    </html>
    Last edited by chump2877; 07-07-2006 at 07:47 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm this could get dangerous. Where will this html be stored. There is a reason why the forum only allows bbcode. Its for security reasons.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,828
    Thanks
    21
    Thanked 157 Times in 148 Posts
    that's true, I didn;t think of that....

    But, this is going to be used in the backend of someone's website, which is already password protected...so I should probably be OK here...

    Plus I suppose I could just add PHP's htmlentities() into the mix to protect me from malicious client side code...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪


  •  

    Posting Permissions

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