کد HTML:
<!DOCTYPE html>
<html>
<title>text area</title>
<head>
<script type="text/javascript">
/**
* @author Ryan Johnson <http://syntacticx.com/>
* @copyright 2008 PersonalGrid Corporation <http://personalgrid.com/>
* @package LivePipe UI
* @license MIT
* @url http://livepipe.net/control/textarea
* @require prototype.js, livepipe.js
*/
/*global window, document, Prototype, Class, $, $A, Control */
if(typeof(Prototype) == "undefined") {
throw "Control.TextArea requires Prototype to be loaded."; }
if(typeof(Object.Event) == "undefined") {
throw "Control.TextArea requires Object.Event to be loaded."; }
Control.TextArea = Class.create({
initialize: function(textarea){
this.onChangeTimeout = false;
this.element = $(textarea);
$(this.element).observe('keyup',this.doOnChange.bindAsEventListener(this));
$(this.element).observe('paste',this.doOnChange.bindAsEventListener(this));
$(this.element).observe('input',this.doOnChange.bindAsEventListener(this));
if(!!document.selection){
$(this.element).observe('mouseup',this.saveRange.bindAsEventListener(this));
$(this.element).observe('keyup',this.saveRange.bindAsEventListener(this));
}
},
doOnChange: function(event){
if(this.onChangeTimeout) {
window.clearTimeout(this.onChangeTimeout); }
this.onChangeTimeout = window.setTimeout(function(){
this.notify('change',this.getValue());
}.bind(this),Control.TextArea.onChangeTimeoutLength);
},
saveRange: function(){
this.range = document.selection.createRange();
},
getValue: function(){
return this.element.value;
},
getSelection: function(){
if(!!document.selection) {
return document.selection.createRange().text; }
else if(!!this.element.setSelectionRange) {
return this.element.value.substring(this.element.selectionStart,this.element.selectionEnd); }
else {
return false; }
},
replaceSelection: function(text){
var scroll_top = this.element.scrollTop;
if(!!document.selection){
this.element.focus();
var range = (this.range) ? this.range : document.selection.createRange();
range.text = text;
range.select();
}else if(!!this.element.setSelectionRange){
var selection_start = this.element.selectionStart;
this.element.value = this.element.value.substring(0,selection_start) + text + this.element.value.substring(this.element.selectionEnd);
this.element.setSelectionRange(selection_start + text.length,selection_start + text.length);
}
this.doOnChange();
this.element.focus();
this.element.scrollTop = scroll_top;
},
wrapSelection: function(before,after){
var sel = this.getSelection();
// Remove the wrapping if the selection has the same before/after
if (sel.indexOf(before) === 0 &&
sel.lastIndexOf(after) === (sel.length - after.length)) {
this.replaceSelection(sel.substring(before.length,
sel.length - after.length));
} else { this.replaceSelection(before + sel + after); }
},
insertBeforeSelection: function(text){
this.replaceSelection(text + this.getSelection());
},
insertAfterSelection: function(text){
this.replaceSelection(this.getSelection() + text);
},
collectFromEachSelectedLine: function(callback,before,after){
this.replaceSelection((before || '') + $A(this.getSelection().split("\n")).collect(callback).join("\n") + (after || ''));
},
insertBeforeEachSelectedLine: function(text,before,after){
this.collectFromEachSelectedLine(function(line){
},before,after);
}
});
Object.extend(Control.TextArea,{
onChangeTimeoutLength: 500
});
Object.Event.extend(Control.TextArea);
Control.TextArea.ToolBar = Class.create( {
initialize: function(textarea,toolbar){
this.textarea = textarea;
if(toolbar) {
this.container = $(toolbar); }
else{
this.container = $(document.createElement('ul'));
this.textarea.element.parentNode.insertBefore(this.container,this.textarea.element);
}
},
attachButton: function(node,callback){
node.onclick = function(){return false;};
$(node).observe('click',callback.bindAsEventListener(this.textarea));
},
addButton: function(link_text,callback,attrs){
var li = document.createElement('li');
var a = document.createElement('a');
a.href = '#';
this.attachButton(a,callback);
li.appendChild(a);
Object.extend(a,attrs || {});
if(link_text){
var span = document.createElement('span');
span.innerHTML = link_text;
a.appendChild(span);
}
this.container.appendChild(li);
}
});
document.observe('dom:loaded',function(){
//setup
var textarea = new Control.TextArea('markdown_example');
var toolbar = new Control.TextArea.ToolBar(textarea);
toolbar.container.id = 'markdown_toolbar'; //for css styles
//preview of markdown text
var converter = new Showdown.converter;
var converter_callback = function(value){
$('markdown_formatted').update(converter.makeHtml(value));
} ;
converter_callback(textarea.getValue());
textarea.observe('change',converter_callback);
//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 Image 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('.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>
<style type="text/css">
#markdown_example {
width:600px;
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("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;
right: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; }
</style>
</head>
<body>
<textarea id="markdown_example"></textarea>
<div id="markdown_formatted"></div>
</body>
</html>
عکی در کنار فایل html باشد.(به خاطر #markdown_toolbar li a در کد های css)
نحوه استفاده از ادیتور جاوا اسکریپت که تو اموزش سایت livepipe.net وجود داره، در سایت
پاسخ با نقل قول
