Guide to Summernote

A collection of known limitations, quirks and workarounds for the Summernote editor.

Bugs

When typing @ mentions, some users can’t escape the mention block (e.g. by pressing Space or Escape or moving back and forth with the arrow keys). The fastest workaround is to use the End key to move the cursor to the end of the line, which Summernote considers to be outside the mention. Another option is to press Enter to type on a new line, then delete the line break.

Quirks

Tables

Summernote does not allow setting header rows directly anywhere except the first row, or defining specific cells as headers (th). You will need to go into Code View and replace the intended td tags manually.
It also does not handle complex layouts like colspan and rowspan (merged cells). However, instead of manipulating those in Code View, note that you can copy-paste entire tables from other websites in Visual mode and they will work just fine, so it can be worth building them elsewhere and copying the result over.

Entity mentions

When you start typing a mention with @ or [, a dropdown appears after three characters to suggest existing entities or create a new one. What do you do if you’re trying to mention an entity whose title has only one or two characters? You can prefix the name with = signs, which are technically used to limit the prompter to exact matches but conveniently don’t mind being repeated:

HTML tags

HTML tags can be written in plain text in the WYSIWYG editor and will be saved and displayed correctly initially. However, the next time you edit your entry, the editor will try to render your code as part of its normal process and you may lose sight of certain elements, or it may try to complete them for you. Unfortunately, even the Code (pre or code) format does not prevent this behavior, nor does using HTML entities to "obscure" the tags (unless you do so in Code View). The only workarounds, currently, are therefore to copy and re-enter all code snippets in the WYSIWYG editor every time you edit the entry, or type your code using HTML entities such as < in Code View.

Last updated 1 month ago

Bugs

When typing @ mentions, some users can’t escape the mention block (e.g. by pressing Space or Escape or moving back and forth with the arrow keys). The fastest workaround is to use the End key to move the cursor to the end of the line, which Summernote considers to be outside the mention. Another option is to press Enter to type on a new line, then delete the line break.

Quirks

Tables

Summernote does not allow setting header rows directly anywhere except the first row, or defining specific cells as headers (th). You will need to go into Code View and replace the intended td tags manually.

It also does not handle complex layouts like colspan and rowspan (merged cells). However, instead of manipulating those in Code View, note that you can copy-paste entire tables from other websites in Visual mode and they will work just fine, so it can be worth building them elsewhere and copying the result over.

Entity mentions

When you start typing a mention with @ or [, a dropdown appears after three characters to suggest existing entities or create a new one. What do you do if you’re trying to mention an entity whose title has only one or two characters? You can prefix the name with = signs, which are technically used to limit the prompter to exact matches but conveniently don’t mind being repeated:

HTML tags

HTML tags can be written in plain text in the WYSIWYG editor and will be saved and displayed correctly initially. However, the next time you edit your entry, the editor will try to render your code as part of its normal process and you may lose sight of certain elements, or it may try to complete them for you. Unfortunately, even the Code (pre or code) format does not prevent this behavior, nor does using HTML entities to "obscure" the tags (unless you do so in Code View). The only workarounds, currently, are therefore to copy and re-enter all code snippets in the WYSIWYG editor every time you edit the entry, or type your code using HTML entities such as < in Code View.