Summernote and jQuery UI

Today I ran into some minor issues when using jQuery UI and Summernote together. The blunders are totally my fault though, nothing to do with these two awesome libraries. I thought I’d share my mistakes here for the world to see though.

Basically, I had forgotten to include jquery-ui’s css. So whenever I hovered over buttons on the Summernote editor it was adding these weird “logs” to the body of my page.

1
2
3
4
5
<div role="log" aria-live="assertive" 
aria-relevant="additions"
class="ui-helper-hidden-accessible">
...
</div>

I assume these are for screen readers like Orca. Orca will speak the words to blind people whenever they focus on a button. At first I thought the problem was with Summernote. Eventually I found out it was jquery ui causing those div logs to be inserted.

To make it short… when using jquery ui with summernote just watch out for some quirkiness. Another gotcha is below…

Here is html

1
2
3
4
5
6
<div class="sortable">
<div class="item">
<h2>Title <i class="fa fa-reorder sortable-handle"></i></h2>
<div class="summernote wysiwyg"></div>
</div>
</div>

Here is javascript

1
2
3
4
5
6
7
8
$('.sortable').sortable({
handle: '.sortable-handle',
items: ".item"
});

// this.$el.disableSelection(); // don't disable selections
// or you won't be able to
// click on summernote

jQuery UI has this disableSelection in examples, so being the bright gentlemen I am, I simply copied and pasted. After thinking about it though I realized that I need to be able to select stuff. And when I say “select stuff” I mean, select text inside the summernote editor.