向 WMD（堆栈溢出）编辑器添加自定义按钮答案

【问题标题】：Adding a custom button to WMD (Stack Overflow) editor向 WMD（堆栈溢出）编辑器添加自定义按钮
【发布时间】：2011-05-07 18:49:01
【问题描述】：

如何在WMD 编辑器中添加新按钮，例如code 按钮？如果我点击按钮<info></info> 标签将添加到所选文本上，如代码按钮。

【问题讨论】：

标签： editor wmd

【解决方案1】：

有一个更新版本的存储库，名为wmd-new。如 StackOverflow 博客中所述，此版本 uses CSS sprites 以获得更好的性能。所以工具栏是一个单一的图形：

存储库中有一个工具栏的 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。

【讨论】：