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.
Verwandte Themen
- 1. Wie Upload-Dienstprogramm zum Wmd-Editor hinzufügen?
- 2. WMD Editor Bereinigen
- 3. Wie kombiniert man WMD und verschönern, wie Stack Overflow?
- 4. Magento - WYSIWYG-Editor zum benutzerdefinierten Widget hinzufügen
- 5. Anpassen der WMD-Editor-Schaltfläche von der Standardeinstellung - kann den wmd-prompt-background nicht loswerden
- 6. Wmd-Editor bricht in IE8
- 7. Stack Overflow mit Fortran
- 8. Stack Overflow-esque Quellcode
- 9. Lua Stack Overflow
- 10. Hinzufügen einer offensichtlichen (benutzerdefinierten) Schaltfläche zu UIActivityViewController
- 11. Gibt es eine Open-Source-Alternative zum Stack Overflow-Modell?
- 12. Stack Overflow bei Zeile 0
- 13. WMD Abschlag Editor - HTML zu Markdown Umwandlung
- 14. Stack Overflow Exploit in C
- 15. Stack Overflow Ausnahme vor Main()
- 16. Hinzufügen einer benutzerdefinierten Validierung zum Eingabefeld
- 17. Inhalt des WMD-Editor-Steuerelements speichern
- 18. Hinzufügen eines benutzerdefinierten Stil zu Content-Editor
- 19. So implementieren Sie Suche wie Stack Overflow
- 20. Hinzufügen einer Gruppenmitgliedschaft zum benutzerdefinierten Mitgliedschafts-/Rollenanbieter
- 21. Hinzufügen einer Schaltfläche zum Entfernen einer Spalte in einer Tabelle
- 22. Schaltfläche zum Frame hinzufügen
- 23. Zeichnen einer benutzerdefinierten Schaltfläche
- 24. Stack Overflow in sehr einfachen Code
- 25. C# Riesige Objektinitialisierer wirft Stack Overflow Fehler
- 26. Sitecore - Hinzufügen von benutzerdefinierten Feldern zum Benutzereditor
- 27. Hinzufügen von benutzerdefinierten Button zu Joomla Artikel Editor (TinyMCE)
- 28. wmd - Markdown-Editor - Wie man es einem beliebigen Textfeld zuweist?
- 29. Stack Overflow/Reddit-Voting-System in PHP
- 30. Wie werden URLs wie Stack Overflow bereinigt?