Web實戰之Markdown編輯器

2021-06-28 00:15:31 字數 4018 閱讀 9833

由於想在自己的頁面裡嵌入markdown編輯器,搜了不少現成的,感覺都不是很滿意:

- epiceditor:太醜,**不高亮,沒有工具欄

- bootstrap-markdown:不能多行**,沒有實時預覽

- pagedown:不能多行**,使用不方便

- zempto(沒記錯的話):太重,是乙個框架

所以萌生了自己寫乙個的想法

/**

* * created by suemi on 14-12-5.

*/var sumarkdown=function(option);

$(dst).each(function(i,e);

}) ||

// internet explorer

(document.selection && function();}

var re = e.createtextrange();

var rc = re.duplicate();

re.movetobookmark(r.getbookmark());

rc.setendpoint('endtostart', re);

return ;

}) ||

// not supported

function()

)();

if(result.select)

else return true;

});return result;

};var replace= function (target,text,option)

else

return $(e);

}) ||

// internet explorer

(document.selection && function()

) ||

// not supported

function()

)();

if(tmp) return false;

else return true;

});return tmp;

};var methods=[^\0]*\*$/m;

var target=get($('textarea',mark));

var dst;

if(!reg.test(target.select.text))

dst=replace(target.container,'**'+target.select.text+'**');

else dst=replace(target.container,target.select.text.split('**')[1]);

return dst;

},italic:function(),

head:function()[^\0]*/m;

var target=get($('textarea',mark));

var dst;

if(!reg.test(target.select.text))

dst=replace(target.container,'###'+target.select.text);

else dst=replace(target.container,target.select.text.split(/#/)[1]);

return dst;

},link:function()

else dst=replace(target.container,target.select.text.split('[')[1].split(']')[0]);

return dst;

},img:function()

else dst=replace(target.container,target.select.text.split('[')[1].split(']')[0]);

return dst;

},list:function(),

orderlist:function(),

code:function(),

block:function(),

tab:function(),

preview:function(event));

$('.sueditor',mark).css('display','none');

blank.css('display','block');

}else}};

//set the hotkey

$('textarea',mark).attr('data-state','0').on('keyup',function(event));

$('textarea:input',mark).on('keydown',function(event)

break;

case 73:

tmp=$(this).attr('data-state');

if(tmp=='1')

break;

case 71:

tmp=$(this).attr('data-state');

if(tmp=='1')

break;

case 72:

tmp=$(this).attr('data-state');

if(tmp=='1')

break;

case 75:

tmp=$(this).attr('data-state');

if(tmp=='1')

break;

case 76:

tmp=$(this).attr('data-state');

if(tmp=='1')

break;

case 79:

tmp=$(this).attr('data-state');

if(tmp=='1')

break;

case 81:

tmp=$(this).attr('data-state');

if(tmp=='1')

break;

case 85:

tmp=$(this).attr('data-state');

if(tmp=='1')

break;

default : break;

}});

$('.su-******* > *',mark).each(function(i,element));}}

return true;

});if(!option.clean));

$('.sueditor',mark).css();

$('textarea',mark).css();

$('textarea:focus',mark).css('background','#fff');

}if(option.preview));

});}

else);

$('.sueditor',mark).css();

$('.su-tool-preview',mark).on('click',function());

}if(option.css) mark.css(option.css);

if(option.textcss) $('.textarea',mark).css(option.textcss);

if(option.previewcss) $('.supreview',mark).css(option.previewcss);

if(option.textheight)

};if(!option.target) option.target=$('.sumarkdown');

if(!option.insert)

else,'html');

}};

使用時

$(function();

sumarkdown(option);

});

為了便於理解,附上基本模板的**

preview

Unittest之介面實戰編

為什麼要使用unittest?前面我們已經寫 實現了註冊介面的處理呼叫,但是乙個介面往往需要多條測試用例才能完整的覆蓋到每一種情況,針對於單介面多條測試用例需要執行的情況,我們該如何處理呢?在unittest的測試類中定義多個測試方法來完成測試,這可能是大家最先想到的乙個解決方法,當然也是能夠達到目...

讓Emeditor支援markdown編輯部落格

用慣了emeditor,最近又開始學習用markdown寫部落格,怎麼讓emeditor支援markdown呢?參見 中藥鋪子 胖大海說胡話 選擇 工具 選單下的 選擇配置 在列表的底部,單擊 定義配置 點選 新建 按鈕,選擇使用 預設配置 然後單擊 確定 輸入乙個描述性的名稱,並單擊enter鍵。...

Atom 打造無懈可擊的 Markdown 編輯器

1.安裝 atom 2.增強預覽 markdown preview plus atom 自帶的 markdown 預覽外掛程式 markdown preview 功能比較簡單,markdown preview plus 對其做了功能擴充套件和增強。支援預覽實時渲染。ctrl shift m 支援 l...