Wie kann ich eine neue Schaltfläche im WMD Editor hinzufügen, wie die Schaltfläche code
? Wenn ich auf die Schaltfläche klicke <info></info>
Tag wird auf den ausgewählten Text wie Code-Schaltfläche hinzufügen.Hinzufügen einer benutzerdefinierten Schaltfläche zum WMD (Stack Overflow) Editor
11
A
Antwort
3
Es gibt eine neuere Version des Repositorys namens wmd-new. Wie im StackOverflow-Blog beschrieben, ist diese Version uses CSS sprites für bessere Leistung. So ist die Symbolleiste eine einzige Grafik:
Es gibt eine PSD (Photoshop-Datei) für die Symbolleiste im Repository, die Sie bearbeiten können. Im Grunde müssen Sie den Dateien wmd.css und wmd.js eine neue Schaltfläche hinzufügen. Schauen Sie sich um Linie 93 in der CSS und Sie werden sehen:
/* 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;}
Hinweis, wie die ursprüngliche Styling von wmd-button-bar
und wie left
wird oben verwendet wird.