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 vertical headers directly, or defining specific cells as headers (th). You will need to go into Code View and replace the intended td tags manually.

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