Добавление пользовательской кнопки в редактор WMD (Stack Overflow) - PullRequest
Новая
       13

Добавление пользовательской кнопки в редактор WMD (Stack Overflow)

11 голосов
/ 10 ноября 2010

Как добавить в редактор WMD новую кнопку, например кнопку code? Если я нажму на кнопку <info></info>, тег добавит к выделенному тексту, как код кнопки.

1 Ответ

3 голосов
/ 31 мая 2011

Существует более новая версия репозитория с именем wmd-new .Как описано в блоге StackOverflow, эта версия использует CSS-спрайты для повышения производительности.Таким образом, панель инструментов представляет собой один графический объект:

enter image description here

В репозитории имеется файл PSD (Photoshop) для панели инструментов, который можно редактировать.По сути, вам нужно добавить новую кнопку в файлы wmd.css и wmd.js.Посмотрите на линию 93 в CSS и вы увидите: 

/* 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 выше.

...