Summernote - A Super Simple WYSIWYG Editor on Twitter Bootstrap

Written by Kevin Liew on 23 Dec 2013
34,020 Views • Javascript

Twitter Bootstrap has been a great front-end tools for most web developers. Especially for backend development, it saves us plenty of times and efforts. Backend usually doesn't need fancy design, hence, Bootstrap will be really handy to make the layout rapidly and reuse UI component easily.

Previously, we introduced a WYSIWYG Rich text editor for Bootstrap, this time, we have a new one called Summernote, labelled as super simple WYSIWYG editor. Inspired by Gmail and redactor, Summernote has a simple UI and is easy to integrate to your custom websites and backend server.


  • Lightweight (js + css = 58Kb)
  • Smart User Interaction (Easy to customize keyboard shortcuts)
  • Support both Bootstraps 2 and 3.
  • File upload, online video integration
  • Easy to customize toolbar
  • API for get & set code, destroy editor.
  • Support oninit, onenter, on focus, onblur, onkeyup, onkeydown and onImageUpload callbacks.
  • Responsive


Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.