angel333/look_editor.html

## look_editor.html
<html>
<head>
	<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
	<script>
		$(document).ready(function() {
			$('#lookEditorToggler').click(function(e) {
				e.preventDefault();

				var output = document.body.innerHTML;
				output = output.replace(/<!-- b\[(.+?)\] -->/g, '<a class="lookEditationLink">$1</a><div>');
				output = output.replace(/<!-- e\[(.+?)\] -->/g, '</div>');
				document.body.innerHTML = output;

				$('a.lookEditationLink').each(function()
				{
					// Uncomment these two lines to redirect user to an editor..
					//$(this).attr('target', '_blank');
					//$(this).attr('href', 'editor.php?' + $(this).text());

					// Using a javascript event.. Comment if you've uncommented the above two lines
					$(this).attr('href', '#');
					$(this).click(function(e) {
						//e.preventDefault();
						alert($(this).text());
					});

					// Fading the element
					$(this).hover(function() {
						$(this).next().fadeTo('fast', 0.5);
					}, function () {
						$(this).next().fadeTo('fast', 1);
					});
				});
			});
		});
	</script>
	<style>
		.lookEditationLink { margin: 0; font-size: .7em; }
		p { border: 1px solid black; margin: 0; margin-bottom: 5px; }

	</style>
</head>
<body>

	<div style='background: black; color: white;'>
		<a href='#' id='lookEditorToggler'>click to edit</a>
	</div>

	<!-- b[header] -->
	<p>the header code, blablabla</p>
	<!-- e[header] -->

	<!-- b[menu] -->
	<p>the menu code, blablabla</p>
	<!-- e[menu] -->

	<p>
		CONTENT<br/>
		CONTENT<br/>
		CONTENT<br/>
		CONTENT
	</p>

	<!-- b[footer] -->
	<p>the footer code, blablabla</p>
	<!-- e[footer] -->

</body>
</html>
	<html>
	<head>
	<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
	<script>
	$(document).ready(function() {
	$('#lookEditorToggler').click(function(e) {
	e.preventDefault();

	var output = document.body.innerHTML;
	output = output.replace(/<!-- b\[(.+?)\] -->/g, '<a class="lookEditationLink">$1</a><div>');
	output = output.replace(/<!-- e\[(.+?)\] -->/g, '</div>');
	document.body.innerHTML = output;

	$('a.lookEditationLink').each(function()
	{
	// Uncomment these two lines to redirect user to an editor..
	//$(this).attr('target', '_blank');
	//$(this).attr('href', 'editor.php?' + $(this).text());

	// Using a javascript event.. Comment if you've uncommented the above two lines
	$(this).attr('href', '#');
	$(this).click(function(e) {
	//e.preventDefault();
	alert($(this).text());
	});

	// Fading the element
	$(this).hover(function() {
	$(this).next().fadeTo('fast', 0.5);
	}, function () {
	$(this).next().fadeTo('fast', 1);
	});
	});
	});
	});
	</script>
	<style>
	.lookEditationLink { margin: 0; font-size: .7em; }
	p { border: 1px solid black; margin: 0; margin-bottom: 5px; }

	</style>
	</head>
	<body>

	<div style='background: black; color: white;'>
	<a href='#' id='lookEditorToggler'>click to edit</a>
	</div>

	<!-- b[header] -->
	<p>the header code, blablabla</p>
	<!-- e[header] -->

	<!-- b[menu] -->
	<p>the menu code, blablabla</p>
	<!-- e[menu] -->

	<p>
	CONTENT<br/>
	CONTENT<br/>
	CONTENT<br/>
	CONTENT
	</p>

	<!-- b[footer] -->
	<p>the footer code, blablabla</p>
	<!-- e[footer] -->

	</body>
	</html>