This is just a goofy little project to add to my learning,
but I've come across a problem that would be nice to solve.
It is not a TinyMCE or other JS editor replacement, just something to play with for the holidays!

In the following program, you can create an HTML template then add/modify common elements
and display the results. I can place tags around highlighted areas and insert/append functions where the cursor is positioned.

Works OK so far.

The problem is when the text exceeds the <textarea> boundaries and I try to tag or insert at cursor,
the display reverts to the first line of the <textarea> display. I would like to keep the displayed area
within the boundaries and just push down the inserted text.

Problem:
Is there a simple way to accomplish this task or do I just have to put-up with the bouncy display whenever I insert code into the area?

Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Simple JS Editor</title>
<!--
One annoyance:  When <textarea> content exceeds size of element
	additional entries cause display to JUMP to beginning
	of the area being edited.
-->

<style type="text/css">
.tags { background-Color:lightblue; }
.objs { background-Color:pink; }
.ctrl { background-Color:lime; }
</style>

<script type="text/javascript" language="javascript"> <!-- External: src="InsertText.js"></script -->
// function insertAtCursor(myField, myValue) {
function InsertText(myField, myValue) {
//IE support
  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
  }
//MOZILLA/NETSCAPE support
  else if (myField.selectionStart || myField.selectionStart == '0') {
//  else if (myField.selectionStart != 'undefined') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
    myField.selectionStart = startPos + myValue.length;
    myField.selectionEnd = startPos + myValue.length;
  } else { myField.value += myValue; }

  myField.focus();  // new entry here
}
// calling the function
// insertAtCursor(document.formName.fieldName, value);
</script>

<script type="text/javascript"> <!-- External: src="InsertCode.js"></script -->
// Modified from: 
// http://www.codingforums.com/showthread.php?t=134113 - Author Kor
// http://www.codingforums.com/showthread.php?t=182713

var HTMLstart = ['<!DOC HTML>',
		 '<html>','<head>','<title> Untitled </title','',
		 '<style type="text\/css"><\/style>','',
		 '<script type="text\/javascript">',
		 ' function $_(IDS) { return document.getElementById(IDS); }',
		 '<\/script>','',
		 '</head>','<body>','','<h1> Test </h1><hr>','',
		 '</body>','</html>'
];
var RBtnStart = ['<input type="radio" name="RBtn" value="0">RBtn 1',
    		 '<input type="radio" id="RBtn" name="RBtn" value="1">RBtn 2',
		 '<input type="radio" id="RBtn" name="RBtn" value="2">RBtn 3',''
];
var CBoxStart = ['<input type="checkbox" id="CBox0" name="CBox0" value="A">CBox A',
		 '<input type="checkbox" id="CBox1" name="CBox1" value="B">CBox B',''
];
var SBoxStart = ['<select id="SBox" name="SBox">',' <option value="">Pick</option>',
		 ' <option value="1">1</option>',' <option value="2">2</option>',
		 ' <option value="3">3</option>',' <option value="4">4</option>',
		 ' <option value="5">5</option>',' <option value="6">6</option>',
		 '</select>',''
];
var TblsStart = ['<table border="1">','<caption> Table </caption',
		 ' <tr>','  <td> 1 </td>','  <td> 2 </td>',' </tr>',
		 ' <tr>','  <td> 3 </td>','  <td> 4 </td>',' </tr>',
		 '</table>',''
];
var ULstart = ['<ul>',' <li> 1 </li>',' <li> 2 </li>',' <li> 3 </li>','</ul>',''];
var OLstart = ['<ol>',' <li> A </li>',' <li> B </li>',' <li> C </li>','</ol>',''];
var DLstart = ['<dl>',' <dt> A </dt>',' <dt> B </dt>',' <dt> C </dt>','</dl>',''];

function formatText(el,tag){
  var selectedText = document.selection
                   ?document.selection.createRange().text
                   :el.value.substring(el.selectionStart,el.selectionEnd);	// IE:Moz
  if (selectedText == "") {return false}
  var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
  if(document.selection) { document.selection.createRange().text=newText; }	// IE
  else {									// Moz
    el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
  }
}

</script>
</head>
<body>
<form name="myForm" onsubmit="return false">
<textarea id="myTextarea" name="myTextarea" rows="18" cols="80"
 style="font-family: monospace; font-size: 12pt; float: left;"></textarea>

<div style="float: left;"><h3 class="tags">Enclose (highlighted)</h3>
<input class="tags" value="Bold" onclick="formatText (myTextarea,'b');" type="button">
<input class="tags" value="Italic" onclick="formatText (myTextarea,'i');" type="button">
<input class="tags" value="Underline" onclick="formatText (myTextarea,'u');" type="button">
<br>
<input class="tags" value="h1" onclick="formatText (myTextarea,'h1');" type="button">
<input class="tags" value="h2" onclick="formatText (myTextarea,'h2');" type="button">
<input class="tags" value="h3" onclick="formatText (myTextarea,'h3');" type="button">
</div>

<div style="float: left;"><h3 class="objs">Insert</h3>
<button class="objs" onClick="InsertText(this.form.myTextarea,RBtnStart.join('\n'))">RBtn</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,CBoxStart.join('\n'))">CBox</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,SBoxStart.join('\n'))">SBox</button>

<br>
<!-- 
<button class="objs" onclick="alert('Not coded yet')">1D-Array</button>
<button class="objs" onclick="alert('Not coded yet')">2D-Array</button>
<button class="objs" onclick="alert('Not coded yet')">Populate</button>
<br>
 <button class="objs" onclick="alert('Not coded yet')">Toggle</button>
-->
<button class="objs" onClick="InsertText(this.form.myTextarea,TblsStart.join('\n'))">Tabel</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,'<br>')">br</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,'<p>')">p</button>

<br>
<button class="objs" onClick="InsertText(this.form.myTextarea,ULstart.join('\n'))">ul-li</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,OLstart.join('\n'))">ol-li</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,DLstart.join('\n'))">dl-dt</button>
</div>

<div style="float: left;"><h3 class="ctrl">Control</h3>
<button class="ctrl" onclick="document.getElementById('myTextarea').value=HTMLstart.join('\n')">Template</button>
<button class="ctrl" onClick="javascript:this.form.myTextarea.focus();this.form.myTextarea.select();">
 Highlight Text to Copy</button>
<button class="ctrl" onclick="document.getElementById('myTextarea').value=''">
 Clear</button>

<p>
<button class="ctrl" onclick="document.getElementById('myEditResults').innerHTML = document.getElementById('myTextarea').value">
 Display</button>
</div>

<div id="myEditResults" style="float:left; border: 1px solid red; height: 20em; width: 70em; overflow:auto;">
</div>
<br style="clear: both;">
</form>

</body>
</html>