WMD'ye (Stack Overflow) düzenleyici için özel bir düğme ekleme

Question

code editöründe code düğmesi gibi yeni bir düğme nasıl ekleyebilirim? Düğmeye tıklarsam <info></info> etiketi, kod gibi seçilen metne eklenir.

Answer 1

wmd-new denilen depo daha yeni bir sürümü var. Daha iyi performans için StackOverflow blogunda bu sürüm uses CSS sprites açıklandığı gibi. Yani araç çubuğu tek sansürlenmemişse:

PSD (Photoshop) düzenleyebileceğiniz depoda araç çubuğu için dosya yoktur. Temel olarak wmd.css ve wmd.js dosyalarına yeni bir düğme eklemeniz gerekir. CSS'deki hattı 93 etrafına bak ve göreceksiniz:

/* 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;} 

Not nasıl orijinal wmd-button-bar stil ve left yukarıda nasıl kullanıldığını.