如何在WMD编辑器中添加新按钮,例如code
按钮?如果我单击按钮<info></info>
标记,则会在所选文本上添加代码按钮。
问问题
1906 次
1 回答
3
有一个名为wmd-new的更新版本的存储库。如 StackOverflow 博客中所述,此版本使用 CSS 精灵以获得更好的性能。所以工具栏是一个单一的图形:
存储库中有一个工具栏的 PSD (Photoshop) 文件,您可以对其进行编辑。基本上,您需要向 wmd.css 和 wmd.js 文件添加一个新按钮。查看 CSS 中的第 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
使用方式。
于 2011-05-31T15:56:09.023 回答