I found this on dynamic drive and another forum in my searches. It doesn't work in Firefox for some reason, but I don't expect to be using Firefox to edit my files much in the future. I hope to learn enough JavaScript to be able to recreate this code later.
<script type="text/javascript">
function insertAtCursor(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 == �e0�Œ) {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}</script>
<script type="text/javascript">
function saveCurRng() {
curRng = document.selection.createRange().duplicate();
}
function surround(btag, etag){
if (curRng) {
document.editform.article.focus();
curRng.text= btag + curRng.text + etag;
return false;
}
}
</script>
</head>
<body>
<form name="editform">
<textarea rows=5 cols=40 name="article" onKeyup="saveCurRng()" onMouseup="saveCurRng()"></textarea>
</form>
<a href="#" onclick="return surround('<b>', '</b>');">bold</a><br>
<a href="#" onclick="return surround('<i>', '</i>');">italic</a>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/* editText Script ©2009 - 2010 John Davenport Scheuer
as first seen in <a href="http://www.dynamicdrive.com/forums/">http://www.dynamicdrive.com/forums/</a>
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
var editText = {
init: function(){return;}
};
(function(){
if(!document.getElementById){
return;
}
window.opera = typeof opera !== 'undefined'? opera : null;
editText = {
saveCurRng: (function(){return document.selection && !opera?
function(el){this.el = el; el.focus(); this.curRng = document.selection.createRange();}:
function(el){this.el = el, this.curRng = typeof el.selectionStart === 'number'?
el.value.substring(el.selectionStart, el.selectionEnd) : null;}
})(),
insert: (function(){return document.selection && !opera?
function(btag, etag){
this.el.focus();
document.selection.empty();
this.curRng.text = btag + this.curRng.text + etag;
this.el.blur();
this.el.focus();
}:function(btag, etag){
if (typeof this.el.selectionStart === 'number'){
var el = this.el, startPos = el.selectionStart, endPos = el.selectionEnd,
l = [btag, this.curRng, etag].join('').length; el.focus();
el.value = [el.value.substring(0, startPos), btag, this.curRng, etag,
el.value.substring(endPos, el.value.length)].join('');
el.selectionEnd = el.selectionStart = startPos + l;
}
};
})(),
controlsFront: function(el, cfg, area){
var t = el[cfg.controlInfo].split(cfg.controlDelimit);
if(window.opera && t.length === 1 && !/^<.*>$/.test(t[0])){
t = el.value.split(cfg.controlDelimit);
}
if(cfg.controlDelimit === '><' && t.length === 2){
t[0] += '>';
t[1] = '<' + t[1];
}
else if(t.length === 1){
t.unshift('');
}
this.saveCurRng(area);
this.insert(t[0], t[1]);
},
addEvent: (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, f);
}:function(){return;};
})(),
init: function(cfg){
this.addEvent(window, 'load', function(){
var ctrls = document.getElementById(cfg.controls).getElementsByTagName(cfg.controlTag), i = 0,
area = document.getElementById(cfg.el);
editText.addEvent(area, 'change', function(){editText.saveCurRng(area);});
for(i; i < ctrls.length; ++i){
(function(el){
editText.addEvent(el, 'click', function(e){
editText.controlsFront(el, cfg, area);
if(e && e.preventDefault){
e.preventDefault();
}
return false;
});
})(ctrls[i]);
}
});
}
};
})();
editText.init({
el: 'myArea',
controls: 'myControls',
controlTag: 'input',
controlInfo: 'title',
controlDelimit: '><'
});
</script>
</head>
<body>
<form action="#">
<div>
<textarea id="myArea" rows=5 cols=40>The Slow Pink Fox Jumped Over the Quick Green Dog.</textarea><br>
<input type="reset" value="Reset">
</div>
</form>
<div id="myControls">
<input type="button" title="Code" value="Code">
<input type="button" title="<span style='text-decoration:underline;'></span>" value="underline">
<input type="button" title="<div class='q'></div>" value="quote">
<input type="image" src="/images/pops/icon_smile.gif" title=":)" value=":)"/>
<input type="image" src="/images/pops/icon_confused.gif" title=' :/' value=" :/"/>
</div>
</body></html>
Below is a working example of the second script listed above. It is not exactly the same as the one I use; the submit and delete buttons have been removed for example, but it is a very close likeness to the script I use on a daily basis on my site.