Comment puis-je ajouter un nouveau bouton dans l'éditeur WMD, comme le bouton code? Si je clique sur le bouton <info></info> tag va ajouter sur le texte sélectionné comme bouton de code.Ajout d'un bouton personnalisé à l'éditeur WMD (Stack Overflow)
Il existe une version plus récente du référentiel appelée wmd-new. Comme décrit sur le blog StackOverflow cette version uses CSS sprites pour de meilleures performances. Ainsi, la barre d'outils est un graphique:
Il y a un fichier PSD (Photoshop) pour la barre d'outils dans le référentiel que vous pouvez modifier. Fondamentalement, vous devez ajouter un nouveau bouton dans les fichiers wmd.css et wmd.js. Regardez autour de la ligne 93 dans le CSS et vous verrez:
/* 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;}
Notez comment le style original de la manière dont wmd-button-bar et left est utilisé ci-dessus.