Customizing the Summernote Editor

We’re moving NixMash Spring Posts to the Summernote WSYWYG Editor. We went with Summernote because it is relatively lightweight, easily customized, and supports not only Bootstrap but Bootswatch as well. NixMash Spring uses the United Bootswatch theme, so that was another win in going with Summernote. Here’s a screenshot of the editor in action.

We’ll no doubt be posting a lot of code in our posts and link descriptions so we need the ability to quickly WYSIWYG-up some Java, JavaScript, HTML and CSS. Another requirement is that we’re using Highlight.js for code formatting which uses the tag structure:

<pre><code class="[language]">...</code></pre>

So we need buttons to generate the above HTML in the Editor.

The JavaScript

On to the JavaScript! We’ll look at three blocks of JavaScript, the first to initialize the Editor, the second to create the buttons, and the third to generate the DOM Elements in the Editor.

Being control freaks we define exactly which buttons we want to see and remove those we don’t need. We add our custom “codebuttons” at the bottom of the code block.

As we see next, each button definition is a function called JavaButton, JavaScriptButton and so on. To economize, each function passes button-specific parameters to makeButton().

Finally we use an addCodeBlock() function to add the <PRE> and <CODE> DOM Elements to the editor.

And the payoff.

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.