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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts

    Javascript text editor script

    Hi guys, i stumbled onto this looking for something completely different, but I can't stop wanting to make it work. I'm sure there's some simple mistake, but I can't spot it. Can you look at the code and see it you can spot the problem?
    It's a text editor test script that I found using google and I'd really like to get the tags working.
    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"><html>
    <head>
    <title>HTML Editor</title>
    <script lang="javascript" type="text/javascript" >
     
    var area;
    var showDiv;
    var formattedStr = "";
    startPosition = 0;
    var endPosition = 0;
    
    window.onload = function()
    {
    	 area = document.getElementById("area");
    	 showDiv = document.getElementById("showDiv");
    };
    
    function publish()
    {
    formattedStr = document.getElementById('area').value;
    	//formattedStr = "<pre>"+document.getElementById('area').value+"</pre>";
    	showDiv.innerHTML = formattedStr;
    }
    
    function insertsBoldTag()
    {
    	findPositions();
    
    	var text = area.value;
    	if (startPosition!=endPosition) {
    		var sbStr = text.substring(startPosition,endPosition);
    		sbStr = "<b>"+sbStr+"</b>";
    
    		fillsFormattedString(text,sbStr);
    	}
    }
    
    function insertsItalicTag()
    {
    	findPositions();
    
    	var text = area.value;
    	if (startPosition!=endPosition) {
    		var sbStr = text.substring(startPosition,endPosition);
    		sbStr = "<i>"+sbStr+"</i>";
    
    		fillsFormattedString(text,sbStr);
    	}
    }
    
    function insertsUnderlineTag()
    {
    	findPositions();
    
    	var text = area.value;
    	if (startPosition!=endPosition) {
    		var sbStr = text.substring(startPosition,endPosition);
    		sbStr = "<u>"+sbStr+"</u>";
    
    		fillsFormattedString(text,sbStr);
    	}
    }
    
    function insertsDeleteTag()
    {
    	findPositions();
    
    	var text = area.value;
    	if (startPosition!=endPosition) {
    		var sbStr = text.substring(startPosition,endPosition);
    		sbStr = "<del>"+sbStr+"</del>";
    
    		fillsFormattedString(text,sbStr);
    	}
    }
    
    function findPositions()
    {
    	var text = area.value;
    
    	if (document.selection) {
    		// Internet Explorer
    		var range = document.selection.createRange();
    		var dpl = range.duplicate();
    		if (range.text.length > 0) {
    			dpl.moveToElementText(area);
    			dpl.setEndPoint("EndToEnd", range);
    			startPosition = dpl.text.length-range.text.length;
    			endPosition = startPosition + range.text.length;
    		}
    	}
    	else {
    		// Mozilla Firefox
    		startPosition = area.selectionStart;
    		endPosition = area.selectionEnd;
    	}
    }
    
    function fillsFormattedString(text, selectedText)
    {
    	// split textarea value into three pieces: before startPosition,
            // startPosition until endPosition, and after endPosition
    	var str1 = text.substring(0,startPosition);
    	var str2 = text.substring(startPosition,endPosition);
    	var str3 = text.substring(endPosition,text.length);
    
    	// replace str2 with formatted substring (selectedText)
    	str2 = selectedText;
    	// form the new string
    	formattedStr = str1+str2+str3;
    	area.value = formattedStr;
    }
    </script>
    </head>
    <body>
    <input type="button" id="btnBold" value="B" onclick="insertsBoldTag()" >
    <input type="button" id="btnItalic" value="I" onclick="insertsItalicTag()" >
    <input type="button" id="btnUnderline" value="U" onclick="insertsUnderlineTag()">
    <input type="button" id="btnDelete" value="Del" onclick="insertsDeleteTag()" >
    <br>
    <textarea id="area" cols="35" rows="12">
    </textarea>
    <p>
    <input type="button" id="btn" value="Publish" onclick="publish()" >
    
    </p>
    <div id="showDiv">
    </div>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Heheh, I guess I did work, i just didn't know how to use it. But once i did figure it out, I got it working pretty good. I'm going to add more stuff to it. Any suggestions for what would be useful? I have to figure out a set of instructions to make menus,headers and other stuff too so it can be an element builder.
    http://h1.ripway.com/tinyscript/html...tmleditor.html
    here's the script so far


  •  

    Posting Permissions

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