WMD (स्टैक ओवरफ़्लो) संपादक को कस्टम बटन जोड़ना

Question

code बटन जैसे WMD संपादक में नया बटन कैसे जोड़ सकता हूं? यदि मैं बटन <info></info> बटन पर क्लिक करता हूं तो टैग बटन जैसे चयनित टेक्स्ट पर टैग जोड़ देगा।

Answer 1

wmd-new नामक भंडार का एक नया संस्करण है। जैसा कि बेहतर प्रदर्शन के लिए StackOverflow ब्लॉग पर इस संस्करण uses CSS sprites पर वर्णित है। तो उपकरण पट्टी एक भी ग्राफिक है:

एक PSD (फ़ोटोशॉप) भंडार है कि आप संपादित कर सकते हैं में उपकरण पट्टी के लिए फ़ाइल नहीं है। असल में आपको wmd.css और wmd.js फ़ाइलों में एक नया बटन जोड़ने की आवश्यकता है। सीएसएस में लाइन 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 ऊपर किया जा रहा है।