Here's a new version to try out. It incorporates a lot of the improvements I was talking about. Rather than use a select to determine the insertion point though, it uses the cursor position in the input textarea. There is a section, commented out (highlighted) at the end of the script, that if uncommented will make it so that the hard coded values for textareas and text inputs will go blank onfocus if they haven't been altered, and return onblur if they are blank. Handy if setting instructions/examples as those element's hard coded values. Notice also that the configuration of the various things that might change has all been moved to the top and documented.
Anyways, give this one a shot (try it by itself first to get an idea what's happening):
Code:
<!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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
//set id's of form and various form components:
var form = 'linkForm', codeIn = 'incode', codeOut = 'outcode',
linkURL = 'linkURL', linkText = 'linkText',
//Set text templates:
lb = '\n<div class="navline">.<\/div>\n<div class="navbtn"><a href="', //text before URL
lm = '">', //text after URL and before Link Text
le = '<\/a><\/div>', //text after Link Text
/////////////////// Stop Editing ///////////////////
editText = {
/* editText ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
modified and truncated here for specific purpose
*/
saveCurRng: (function(){return document.selection?
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.selectionEnd, el.selectionEnd) : null;}
})(),
insert: (function(){return document.selection?
function(btag, etag){
this.curRng.collapse(false);
this.el.focus();
if(!window.opera){
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.selectionEnd, 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.selectionStart = el.selectionEnd = startPos + l;
}
};
})()
}; // End editText Object
form = $('#' + form), codeIn = $('#' + codeIn), codeOut = $('#' + codeOut),
linkURL = $('#' + linkURL), linkText = $('#' + linkText);
function dummy(e){e.preventDefault();}
function addCode(e){
e.preventDefault();
var cin = codeIn.val();
editText.saveCurRng(codeIn.get(0));
editText.insert('', [lb, linkURL.val(), lm, linkText.val(), le].join(''));
codeOut.val(codeIn.val());
codeIn.val(cin);
form.unbind('submit', addCode).bind('submit', dummy);
}
form.bind('submit', addCode).get(0).reset();
form.bind('reset', function(){form.unbind('submit').bind('submit', addCode)})
/*.find('textarea, :text').bind('focus blur', function(e){
var v = $.trim(this.value);
if(e.type === 'blur' && v === ''){this.value = this.defaultValue;}
else if(v === $.trim(this.defaultValue)){this.value = '';}
});*/
});
</script>
</head>
<body>
<form id="linkForm" action="#">
<div>
<textarea id="incode" cols="50" rows="5" wrap="off">
<li id="navbox">
whatever was there
</li>
</textarea><br>
<label>Text: <input type="text" id="linkText" value="Google"></label><br>
<label>URL: <input type="text" id="linkURL" value="http://www.google.com/"></label><br>
<textarea id="outcode" cols="50" rows="5" wrap="off">
</textarea><br>
<input type="submit" value="Add Link"> <input type="reset" value="Reset">
</div>
</form>
</body>
</html>
Note: It is possible to use only one textarea for both the input and output code. It's up to you to decide if that would be more convenient or more confusing for your users. It would require a little modification.
jQuery noob question
Reply With Quote
Originally Posted by jscheuer1
works great 
Bookmarks