Adding a Text Wrap Selection Button in CKEditor

Using <SAMP /> tags to denote technical terms like in the following example is a pretty standard practice.

As you can imagine for a blog on coding I use the <SAMP /> tag a lot, so I wanted a one-click button on my CKEditor Toolbar to perform the text wrapping selection and tagging for me. Here's the new basketball Sample Text icon on the NixMash Blog Editor.

The JavaScript

Here's the JavaScript in the CKEditor startup script added to the editor.html Thymeleaf fragment. We're adding an Editor Command Function with editor.addCommand and an Editor UI Button with editor.ui.addButton then assigning its command to our new function.

Source Code Notes for this Post

Source code discussed in this post can be found in my NixMash Blog project located on GitHub.