Menu
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, CKeditor or other JS editor replacement, just something to play with for the holidays!
I tried posting on another forum … lots of lookers, but no suggestions.
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. Some of the JS could be put into external files, but I put inline for ease of viewing.
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 textarea longer than display?
[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:
// [url]http://www.codingforums.com/showthread.php?t=134113[/url] – Author Kor
// [url]http://www.codingforums.com/showthread.php?t=182713[/url]
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>