先晒一下它的样子。当然，我一开始就企图做到这四点：随时随地可以自动保存草稿内容到服务器；键盘快捷键进行Markdown格式编辑；可以分段编辑（万一文章比较长呢）；还有就是手机上也能用大部分功能。现在这四个目标基本现在实现了。
先让人看看它的样子。
第一个按钮是新建文件。第二个按钮是设置文件日期。第三个按钮是插入图片。第四个按钮是查找替换文本。第五个按钮是用来预览内容。第六个按钮是保存内容。第七个按钮是发布内容。第八个按钮是返回到文档列表。
我还给努力做到让它插入图片特别方便，可以直接从本地硬盘中把图片文件拖放到淡黄色区域中，也可以复制图片之后直接粘贴，就会用html5上传功能自动上传到服务器上了。
另外我还利用百度翻译API和百度词典做了键盘快捷键翻译文档功能（Ctrl+小键盘上的小数点），在淡黄色区域中双击一个单词，立即显示这个单词的翻译。
小晒部分代码。
function onKeydown(e){
if(e.ctrlKey && e.keyCode == 80){ // Ctrl+P 保存并发布
e.preventDefault();save();
}
if(e.ctrlKey && e.keyCode == 83){ // Ctrl+S 保存草稿
e.preventDefault();save();
}
if(e.ctrlKey && e.keyCode ==110) { // translate
e.preventDefault();translate();
}
if(e.ctrlKey&&e.keyCode==73){ // Ctrl+B
e.preventDefault();toggleT('*','*',true);
}
if(e.ctrlKey&&e.keyCode==66){ // Ctrl+I
e.preventDefault();toggleT('**','**',true);
}
if(e.ctrlKey&&e.keyCode==80){
e.preventDefault();showPreview();
}
if(e.ctrlKey&&e.keyCode==89){ // Ctrl+Y
e.preventDefault();toggleT('`','`',true);
}
if(e.ctrlKey&&e.keyCode==70){ // Ctrl+F
e.preventDefault();toggleFind();
}
if(e.shiftKey&&e.keyCode==13){
insertT('\n','\n',false);
return false;
};
if(e.ctrlKey&&e.keyCode==13){
insertT('\n','\n',false);
return false;
};
if(e.keyCode==13){ // Enter
var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;
var tmpStr = Editor.value;
var str1=tmpStr.substring(0,startPos);
var ss=str1.lastIndexOf('\n')+1;
var str2=str1.substr(ss);
//if(!/^[\s]+/.test(str2))return true;
if(/^(> )?\s*?\d+\.\s\s*/.test(str2)){
var str3=str2.match(/^(> )?\s*?\d+\.\s\s*/)[0];
if(str3==str2){Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(startPos);
Editor.selectionStart=Editor.selectionEnd=startPos+1-str3.length;return false;}; // 点两次回车终止自行加前缀符
var ss2=str3.match(/\d+/),ss3=parseInt(ss2);ss3++
str3=str3.replace(/\d+/g,ss3);
Editor.value=str1+'\r\n'+str3+tmpStr.substr(startPos);
Editor.selectionStart=Editor.selectionEnd=startPos+1+str3.length;
return false;
}
if(/^(> )?[-*]\s\s*/.test(str2)){
str3=str2.match(/^(> )?[-*]\s\s*/)[0];
//console.log('[['+str2+']]');
if(str2==str3){Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(startPos);
Editor.selectionStart=Editor.selectionEnd=startPos+1-str3.length;return false;}// 点两次回车终止自行加前缀符
Editor.value=str1+'\r\n'+str3+tmpStr.substr(startPos);
Editor.selectionStart=Editor.selectionEnd=startPos+1+str3.length;
return false;
}
if(/^> /.test(str2)){
str3=str2.match(/^> /)[0];
if(str2==str3){Editor.value=tmpStr.substring(0,ss-1)+'\r\n'+tmpStr.substr(startPos);
if(/^\n\n/.test(tmpStr.substr(startPos)))Editor.selectionStart=Editor.selectionEnd=startPos-1;
else Editor.selectionStart=Editor.selectionEnd=startPos-3;
return false;}// 点两次回车终止自行加前缀符
Editor.value=str1+'\r\n'+str3+'\r\n'+str3+tmpStr.substr(startPos);
Editor.selectionStart=Editor.selectionEnd=startPos+2+str3.length*2;
return false;
}
}
if(e.shiftKey&&e.keyCode==9){ // Shift+Tab
e.preventDefault();
var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;
var tmpStr = Editor.value;
var str1=tmpStr.substring(0,startPos);
var ss=str1.lastIndexOf('\n')+1;
if(startPos==endPos){
var str2=str1.substr(ss);
str2=str2.match(/^\s*/)[0];
if(str2.length>=2){
Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(ss+2);
Editor.selectionStart=Editor.selectionEnd=startPos-2;
}else if(str2.length==1){
Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(ss+1);
Editor.selectionStart=Editor.selectionEnd=startPos-1;
}
}
else{
var str2=tmpStr.substring(ss,endPos);
//console.log(str2);
str2=str2.replace(/^\s{1,2}/,'').replace(/\n\s{1,2}/g,'\n')
Editor.value=tmpStr.substring(0,ss)+str2+tmpStr.substr(endPos);
Editor.selectionStart=ss;
Editor.selectionEnd=ss+str2.length;
}
//if(!/^[\s]+/.test(str2))return true;
}
else if(e.keyCode == 9){ // Tab
e.preventDefault();
var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;
var tmpStr = Editor.value;
var str1=tmpStr.substring(0,startPos);
var ss=str1.lastIndexOf('\n')+1;
if(startPos==endPos){
Editor.value=tmpStr.substring(0,ss)+' '+tmpStr.substr(ss);
Editor.selectionStart=Editor.selectionEnd=startPos+2;
}
else{
var str2=tmpStr.substring(ss,endPos);
var ss2=/\n/g.test(str2)?str2.match(/\n/g).length:0;
str2=str2.replace(/\n/g,"\n ");
Editor.value=tmpStr.substring(0,ss)+' '+str2+tmpStr.substr(endPos);
Editor.selectionStart=startPos+2;
Editor.selectionEnd=endPos+2+ss2*2;
//cursorPos=Editor.selectionEnd;
//insertT(' ','',false);
}
}
else if(e.ctrlKey&&e.keyCode==222){ // Ctrl+'
e.preventDefault();
var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;
var tmpStr = Editor.value;
var str1=tmpStr.substring(0,startPos);
var ss=str1.lastIndexOf('\n')+1;
var ss2=tmpStr.substring(0,endPos).lastIndexOf('\n')+1
if(ss==ss2){
if(str1.substr(ss,2)=='> '){
Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(ss+2);
Editor.selectionStart=startPos-2<ss?startPos-2:ss;
Editor.selectionEnd=endPos-2;
}
else{
Editor.value=tmpStr.substring(0,ss)+'> '+tmpStr.substr(ss);
Editor.selectionStart=startPos+2;
Editor.selectionEnd=endPos+2;
}
}
else{
if(str1.substr(ss,2)=='> '){
var str2=tmpStr.substring(ss,endPos);
var ss3=/\n> /g.test(str2)?str2.match(/\n> /g).length:0;
str2=str2.replace(/\n> /g,"\n");
str2=str2.substr(2);
Editor.value=tmpStr.substring(0,ss)+str2+tmpStr.substr(endPos);
Editor.selectionStart=ss?startPos-2:ss;
Editor.selectionEnd=endPos-ss3*2-2;
}
else{
var str2=tmpStr.substring(ss,endPos);
var ss3=/\n/g.test(str2)?str2.match(/\n/g).length:0;
str2=str2.replace(/\n/g,"\n> ");
Editor.value=tmpStr.substring(0,ss)+'> '+str2+tmpStr.substr(endPos);
Editor.selectionStart=startPos+2;
Editor.selectionEnd=endPos+ss3*2+2;
}
}
}
}function imgReader(item){
if(item.kind=='file'&&item.type.indexOf('image')==0){
var file = item.getAsFile(),reader = new FileReader();
reader.onload = function(e){
//var img = new Image();img.src = e.target.result;document.body.appendChild( img );
var filename=file.name?file.name:'';
//$.post(_uploadUrl,{'upload':e.target.result},function(data){insertT('\n',false);});
uploadFile(e.target.result,filename);
};
reader.readAsDataURL(file);
}
}
function textReader(file){
//var sText=file.name+'Date'+file.lastModifiedDate+'content'+file.contents;
var reader=new FileReader();
reader.onload=function(e){
insertT('',e.target.result,false);
}
reader.readAsBinaryString(file)
//insertT('',sText,false);
}
function onDblClick(e){
var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;
var tmpStr = Editor.value;
var word=tmpStr.substring(startPos,endPos);
if(/^[a-zA-Z]*$/.test(word))
{
word=word.toLowerCase();
var x=e.pageX,y=e.pageY;
y=Math.floor((y-6)/24)*24+20;
x=x-100;x<0?x=1:x;
$('#fanyi').css({left:x,top:y+10}).show().text(word);
$.ajax({
type : "get",
async : true,
dataType : "jsonp",
url : "http://openapi.baidu.com/public/2.0/translate/dict/simple",
data: {"client_id":"tSg0IcodQGIpm9U8neWsQ11g","from":"en","to":"zh","q":word},
success : function(data){
//$("#showcontent").text("Result:"+data.result)
if(data.data.length==0)return false;
if(data.data.symbols.length==0)return false;
var dst=data.data.symbols[0].parts;
var str='<span style="color:#c00;font-weight:bold;font-family:Cambria">'+data.data.word_name+'</span>'
if(data.data.symbols[0].ph_am)str+='<br />`en-us`['+data.data.symbols[0].ph_am+']';
for(var i=0;i<dst.length;i++){
dst[i].part?str=str+'<br />'+dst[i].part+','+dst[i].means.join(','):str=str+'<br />'+dst[i].means.join(',');
}
$('#fanyi').html(str);
},
})
}
else
$('#fanyi').hide();
}function onPaste(e){
var Data=window.clipboardData||e.originalEvent.clipboardData;
if(!Data)return true;
if(Data.types.length==1&&Data.types[0]=='text/plain')return true;
else if((Data.types.length==2&&Data.types[1]=='text/html')||(Data.types.length==3&&Data.types[2]=='text/rtf')){
e.preventDefault();
var html=Data.getData('text/html');
html=html.replace(/<html>(\r?\n)+<body>(\r?\n)+<!--StartFragment-->(.*?)<!--EndFragment-->(\r?\n)+<\/body>(\r?\n)+<\/html>/,"$3");
//var _div=$(document.createElement('div')).appendTo(document.body);_div.text(html);
html=toMarkdown(html);
insertT(html,'',false);
}
else if((Data.types.length==2&&Data.types[1]=='text/rtf')||(Data.types.length==3&&Data.types[2]=='text/rtf')){
e.preventDefault();
html=Data.getData('text/plain');
//html=html.replace(/■+/g,'-').replace(/'/g,'\'');
insertT(html,'',false);
}
else if(Data.types=='text/html,Files'){
e.preventDefault();imgReader(Data.items[1])
}
else if(Data.types=='Files'){
e.preventDefault();imgReader(Data.items[0]);
}
}
function onDrop(e){
e.stopPropagation();e.preventDefault();
if(e.type=='drop'&& e.dataTransfer.types=='Files'){
Editor.selectionStart=Editor.selectionEnd
for(var i=0;i<e.dataTransfer.items.length;i++){
if(e.dataTransfer.items[i].type.indexOf('image')==0)imgReader(e.dataTransfer.items[i]);
//else if(e.dataTransfer.items[i].type.indexOf('text')==0)textReader(e.dataTransfer.items[i].getAsFile());
}
}
}function find(isdesc){
var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;
var str=document.se.find.value;
if(str=='')return false;
var tmpStr=Editor.value,len=str.length;
if(tmpStr=='')return false;
//console.log(startPos+','+endPos+','+tmpStr.length);
if(!isdesc){
if(startPos==tmpStr.length)startPos=Editor.selectionStart=endPos=Editor.selectionEnd=0;
var ss=tmpStr.indexOf(str,endPos);
if(ss>-1){Editor.selectionStart=ss;Editor.selectionEnd=ss+len;}else {alert('已搜到底部');Editor.selectionStart=Editor.selectionEnd=0;}
}
else{
var ss=tmpStr.lastIndexOf(str,startPos-len);
if(ss>-1){Editor.selectionStart=ss;Editor.selectionEnd=ss+len;}else{alert('已搜到顶部');Editor.selectionStart=Editor.selectionEnd=tmpStr.length;}
}
}
function replace(isall){
var str=document.se.find.value,str2=document.se.for.value;
if(str=='')return false;
var tmpStr=Editor.value,len=str.length;
if(tmpStr=='')return false;
if(isall){
Editor.value=tmpStr.replace(new RegExp(str,"g"),str2);
Editor.selectionStart=Editor.selectionEnd=0;
}
else{
var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;
var ss=tmpStr.indexOf(str,startPos);
if(ss>-1){
Editor.value=tmpStr.substring(0,ss)+str2+tmpStr.substr(ss+str.length);
Editor.selectionStart=ss;Editor.selectionEnd=ss+str2.length;}else {alert('已搜到底部');Editor.selectionStart=Editor.selectionEnd=0;
}
}
}
function translate(){
var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;
var tmpStr = Editor.value;
var q=tmpStr.substring(startPos,endPos);
q=q.replace(/[\*_#`]/g,'').replace(/!?\[(.*?)\](.*?)/g,'$1');
//alert(q);
$.ajax({
type : "get",
async : true,
dataType : "jsonp",
url : "http://openapi.baidu.com/public/2.0/bmt/translate",
data: {"client_id":"tSg0IcodQGIpm9U8neWsQ11g","from":"en","to":"zh","q":q},
success : function(data){
//$("#showcontent").text("Result:"+data.result)
var dst=data.trans_result[0].dst;
Editor.value=tmpStr.substring(0,endPos)+dst+tmpStr.substr(endPos);
Editor.selectionStart=Editor.selectionEnd=endPos;
},
})
//alert(dest);
}现在这个文件editor.js文件内容已经超过21K了，全都是我自己动脑筋写出来的，没有抄袭任何人。之前我看到有个MarkDown在线编辑器 http://lab.lepture.com/editor/，觉得很喜欢。但是又觉得它不够完美。现在我自己设计出了自己想要的在线编辑器，editor.js文件的大小只有http://lab.lepture.com/editor/的editor.js的十分之一。但是它有的功能我基本都做了，而且还做了很多它不具备的功能，比如说Ctrl+.翻译文章，以及双击一个单词给出它的词典释义。
我打算用它好好翻译点资料，特别是跟HTML5 API和SVG、其它前端开发方面的资料，以提升自己。我觉得为了翻译资料，不得不经常地把文字拷贝到百度翻译里，再从百度翻译拷贝到自己的文本框中，挺费时费力的。
再放一张这个在线编辑器点下“Ctrl+F”或者点下那个放大镜按钮之后产生的结果：
可惜这个在线编辑器目前还不能用正则表达式搜索替换。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。