Twitter Bootstrap HTML5 WYSIWYG Rich Text Editor

Written by Kevin Liew on 28 Jun 2013
151,286 Views • Javascript

As a big fan of Twitter Bootstrap and constantly dealing with custom Content Management System, I always find some essential javascript plugins aren't available for Bootstrap. Especially a good rich text editor.

MindMup sees the flaws in most of the rich text editors and decided to create a HTML5 WYSIWYG version that removes all those "unnecessary magics" such as iFrame and backup textareas, old browser supports and make it plays well with bootstrap. The result? with HTML5, they manage to create this editor in less than 5k with everything you need!

Features

  • Automatically binds standard hotkeys for common operations on Mac and Windows
  • Drag and drop files to insert images, support image upload (also taking photos on mobile devices)
  • Allows a custom built toolbar, no magic markup generators, enabling the web site to use all the goodness of Bootstrap, Font Awesome and so on...
  • Does not force any styling - it's all up to you
  • Uses standard browser features, no magic non-standard code, toolbar and keyboard configurable to execute any supported browser command
  • Does not create a separate frame, backup text areas etc - instead keeps it simple and runs everything inline in a DIV
  • (Optionally) cleans up trailing whitespace and empty divs and spans
  • Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6)
  • Supports mobile devices (tested on IOS 6 Ipad/Iphone and Android 4.1.1 Chrome)

Screenshots

SPECIFICATIONS & DOWNLOAD

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.

6 comments
Rudd 11 years ago
Awesome. We can even upload an image simply by drag and drop it in the editor! (I've tried it myself)
Reply
Piet Botha 11 years ago
Hi can you tel me how to save the html and n foto in data base (mysql)
Reply
Stepahead 11 years ago
nice one :)
here is an other wysiwyg bootsrap solution
http://thewebground.net/summernote-super-simple-wysiwyg-editor-on-bootstrap
Reply
Maxim 10 years ago
NIce, but i can not use several Editors on page - all ToolBars activates at the same time on click any Editor on page? How to bind exect ToolBar to exect Editor?
Reply
Shahroq 10 years ago
Hi,
I need "show source" feature too, is this possible?
Reply
Jon 10 years ago
How to apply Font colors and Fonts height to all text?
Reply