Introduction
In my technical articles I sometimes use inline fragments typed in a monospace font to highlight code or filenames that appear within floating paragraph text. Back in the days I did this with the <tt> element, nowadays I use <span class="tt"> and a CSS style like
.tt { font-family: monospace; }
I wanted to extend the tinyMCE in WordPress with a toggle button that behaves like the Bold or Italic buttons and surrounds selected text with such a <span class="tt"> element or, when pressed while an already surrounded text is selected, removes that surrounding again. Also, when the cursor is inside such an element, the button should switch to an „active“ state that indicates that the character format can be deselected.
