向WMD（堆棧溢出）編輯器添加自定義按鈕

Question

如何在WMD編輯器中添加新按鈕，如code按鈕？如果我點擊按鈕<info></info>標籤將添加到選定的文本，如代碼按鈕。

Answer 1

有更新的版本庫，名爲wmd-new。正如StackOverflow博客中所描述的，該版本爲uses CSS sprites以獲得更好的性能。因此，工具欄是一個圖形：

有一個PSD（Photoshop中）文件中，您可以編輯資源庫中的工具欄。基本上你需要在wmd.css和wmd.js文件中添加一個新按鈕。環顧四周，在CSS線93，你會看到：

/* sprite button slicing style information */ 
#wmd-button-bar #wmd-bold-button {left: 0px; background-position: 0px 0;} 
#wmd-button-bar #wmd-italic-button {left: 25px; background-position: -20px 0;} 
#wmd-button-bar #wmd-spacer1  {left: 50px;} 
#wmd-button-bar #wmd-link-button {left: 75px; background-position: -40px 0;} 
#wmd-button-bar #wmd-quote-button {left: 100px; background-position: -60px 0;} 
#wmd-button-bar #wmd-code-button {left: 125px; background-position: -80px 0;} 
#wmd-button-bar #wmd-image-button {left: 150px; background-position: -100px 0;} 
#wmd-button-bar #wmd-spacer2  {left: 175px;} 
#wmd-button-bar #wmd-olist-button {left: 200px; background-position: -120px 0;} 
#wmd-button-bar #wmd-ulist-button {left: 225px; background-position: -140px 0;} 
#wmd-button-bar #wmd-heading-button {left: 250px; background-position: -160px 0;} 
#wmd-button-bar #wmd-hr-button  {left: 275px; background-position: -180px 0;} 
#wmd-button-bar #wmd-spacer3  {left: 300px;} 
#wmd-button-bar #wmd-undo-button {left: 325px; background-position: -200px 0;} 
#wmd-button-bar #wmd-redo-button {left: 350px; background-position: -220px 0;} 
#wmd-button-bar #wmd-help-button {right: 0px; background-position: -240px 0;} 

注意如何wmd-button-bar原來的造型和如何left被上面使用。