tabs in textarea

[redkevin11]

I haven't had time to play around in the CMSMS Forge and figure out how to get involved, but here's something I always add to cmsms.  It simply makes the tab button functional within a textarea when formatting html or css in the admin.  Of course this has an accessiblilty issue, but it's just for the admin section when coding.  I generally use an external text editor (textMate) but sometimes I want to edit something on-the-fly and am a bit anal particular about well-formatted text.

Add this to the bottom of /admin/themes/default/includes/standard.js

Code: Select all

function getCharTab(e) {

	// IE and Firefox
	// tab => 9
	// return => 13
	// up => 38
	// down => 40
	
	if (window.event)
	{
		e = window.event;
	}

	var charCode = (!e.which || e.which == 0) ? e.keyCode : e.which;
	
	if (charCode != 9) return true;
	
	addTab();

	return false;
}

function addTab()
{
	var theField = document.getElementById('content');
	var theInsert = "\t";
	
	// Is this a Windows user?  If so, add tags around selection

	if (document.selection) 
	{
		theField.focus();
	
		document.selection.createRange().text = theInsert;
		
		theField.blur();
		theField.focus();
	}
	else if ( ! isNaN(theField.selectionEnd))
	{
		var selLength = theField.textLength;
		var selStart = theField.selectionStart;
		var selEnd = theField.selectionEnd;
		if (selEnd <= 2)
			selEnd = selLength;

		var s1 = (theField.value).substring(0,selStart);
		var s2 = (theField.value).substring(selStart, selEnd)
		var s3 = (theField.value).substring(selEnd, selLength);
		
		var newStart = selStart + theInsert.length;
		
		theField.value = s1 + theInsert + s3;
		
		theField.focus();
		theField.selectionStart = newStart;
		theField.selectionEnd = newStart;
	}
}


document.onkeypress = getCharTab;

It works automatically when editing templates (edittemplate.php), for it to work when editing css, you must simply modify the following code to editcss.php

Code: Select all

<textarea class="pagebigtextarea" name="css_text" cols="" rows="" id="content"><?php echo $css_text?></textarea>

  ...just search form "textarea" in the page and add the id.

Forgot to add that the javascript is from http://www.pmachine.com/developers/blog/1048/

[millo]

Nice one redkevin11!

Just what I was looking (hoping) for.

Thanks!

[Dee]

Very nice. I was about to commit this to SVN, but there's one issue: when the cursor is on the first position of the template or CSS and the tab key is pressed, the whole code disappears.