Source

jquery.textarea / test.html

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="utf-8"/>
    	<title>p3pcontent - Welcome</title>
    	<!--[if IE]>

    		<script>
        		// allow IE to recognize HTMl5 elements
        		document.createElement('section');
        		document.createElement('article');
        		document.createElement('aside');
        		document.createElement('footer');
        		document.createElement('header');
        		document.createElement('nav');
        		document.createElement('time');

    		</script>
    		<![endif]-->
    		<style>
				#markdown_example {  
				    width:100%;  
				    height:200px;  
				} 

				.markdown_toolbar {  
				    position:relative;  
				    list-style:none;  
				    border:1px solid #d7d7d7;  
				    background-color:#F6F6F6;  
				    margin:0;  
				    padding:0;  
				    height:18px;  
				    margin-bottom:2px;  
				} 

				.markdown_toolbar li {  
				    list-style:none;  
				    margin:0;  
				    padding:0;  
				    float:left;  
				} 

				.markdown_toolbar li a {  
				    width:24px;  
				    height:16px;  
				    float:left;  
				    display:block;  
				    background-image:url("images/markdown_icons.gif");  
				    border:1px solid #fff;  
				    border-right-color:#d7d7d7;  
				} 

				.markdown_toolbar li a:hover {  
				    border-color:#900;  
				} 

				.markdown_toolbar li span {  
				    display:none;  
				} 

				.markdown_toolbar li a#markdown_help_button {  
				    position:absolute;  
				    top:0;  
				    rightright:0;  
				    border-left-color:#d7d7d7;  
				    border-right-color:#fff;  
				} 

				.markdown_toolbar li a#markdown_help_button:hover {  
				    border-left-color:#900;  
				    border-right-color:#900;  
				} 

				#markdown_italics_button { background-position: 0 -119px; } 
				#markdown_bold_button { background-position: 0 -102px; } 
				#markdown_link_button { background-position: 0 0; } 
				#markdown_image_button { background-position: 0 -170px; } 
				#markdown_unordered_list_button { background-position: 0 -34px; } 
				#markdown_ordered_list_button { background-position: 0 -51px; } 
				#markdown_quote_button { background-position: 0 -68px; } 
				#markdown_code_button { background-position: 0 -136px; } 
				#markdown_help_button { background-position: 0 -153px; } 
				#markdown_heading_button { background-position: 0 -85px; }
				
				.resizeHandle {
					overflow:hidden;
					width:22px; height:5px;
					margin-left:auto;
					margin-right:auto;
					background-image:url(images/handle.png);
					cursor:n-resize;
				}
				
				</style>
			
  		</head>
	<body>
    	
		<form>
				<textarea id="markdown_example" name="content"></textarea>
				<div id="markdown_formatted"></div>
		</form>
			
  </body>
  <script type="text/javascript" src="lib/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="lib/showdown.js"></script>
	<script type="text/javascript" src="jquery.textarea.js"></script>



  <script type="text/javascript" charset="utf-8">
		var converter = new Showdown.converter;
	  var converter_callback = function(value) {  
	   	$('#markdown_formatted')[0].innerHTML = converter.makeHtml(value);  
	  }
		
		var textarea = $("#markdown_example").TextArea({
			change: converter_callback
		});
	
		
		var toolbar = $.Toolbar(textarea, {
			className: "markdown_toolbar"
		});

		//buttons  
		toolbar.addButton('Italics',function(){ 
		    this.wrapSelection('*','*');  
		},{  
		    id: 'markdown_italics_button'  
		});  

		toolbar.addButton('Bold',function(){  
		    this.wrapSelection('**','**');  
		},{  
		    id: 'markdown_bold_button'  
		});  

		toolbar.addButton('Link',function(){  
		    var selection = this.getSelection();  
		    var response = prompt('Enter Link URL','');  
		    if(response == null)  
		        return;  
		    this.replaceSelection('[' + (selection == '' ? 'Link Text' : selection) + '](' + (response == '' ? 'http://link_url/' : response).replace(/^(?!(f|ht)tps?:\/\/)/,'http://') + ')');  
		},{  
		    id: 'markdown_link_button'  
		});  

		toolbar.addButton('Image',function(){  
		    var selection = this.getSelection();  
		    var response = prompt('Enter Image URL','');  
		    if(response == null)  
		        return;  
		    this.replaceSelection('![' + (selection == '' ? 'Image Alt Text' : selection) + '](' + (response == '' ? 'http://image_url/' : response).replace(/^(?!(f|ht)tps?:\/\/)/,'http://') + ')');  
		},{  
		    id: 'markdown_image_button'  
		});  

		toolbar.addButton('Heading',function(){  
		    var selection = this.getSelection();  
		    if(selection == '')  
		        selection = 'Heading';  
		    this.replaceSelection("\n" + selection + "\n" + $R(0,Math.max(5,selection.length)).collect(function(){'-'}).join('') + "\n");  
		},{  
		    id: 'markdown_heading_button'  
		});  

		toolbar.addButton('Unordered List',function(event){  
		    this.collectFromEachSelectedLine(function(line){  
		        return event.shiftKey ? (line.match(/^\*{2,}/) ? line.replace(/^\*/,'') : line.replace(/^\*\s/,'')) : (line.match(/\*+\s/) ? '*' : '* ') + line;  
		    });  
		},{  
		    id: 'markdown_unordered_list_button'  
		});  

		toolbar.addButton('Ordered List',function(event){  
		    var i = 0;  
		    this.collectFromEachSelectedLine(function(line){  
		        if(!line.match(/^\s+$/)){  
		            ++i;  
		            return event.shiftKey ? line.replace(/^\d+\.\s/,'') : (line.match(/\d+\.\s/) ? '' : i + '. ') + line;  
		        }  
		    });  
		},{  
		    id: 'markdown_ordered_list_button'  
		});  

		toolbar.addButton('Block Quote',function(event){  
		    this.collectFromEachSelectedLine(function(line){  
		        return event.shiftKey ? line.replace(/^\> /,'') : '> ' + line;  
		    });  
		},{  
		    id: 'markdown_quote_button'  
		});  

		toolbar.addButton('Code Block',function(event){  
		    this.collectFromEachSelectedLine(function(line){  
		        return event.shiftKey ? line.replace(/    /,'') : '    ' + line;  
		    });  
		},{  
		    id: 'markdown_code_button'  
		});  

		toolbar.addButton('Help',function(){  
		    window.open('http://daringfireball.net/projects/markdown/dingus');  
		},{  
		    id: 'markdown_help_button'  
		});
		
  </script>
</html>