Twitter Bootstrap HTML5 WYSIWYG Rich Text Editor

Twitter Bootstrap HTML5 WYSIWYG Rich Text Editor


Twitter Bootstrap HTML5 WYSIWYG Rich Text Editor

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

More Details

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

3 comments

Rudd
Fri, 28th June 2013
Awesome. We can even upload an image simply by drag and drop it in the editor! (I've tried it myself) Reply
Piet Botha
Thu, 29th August 2013
Hi can you tel me how to save the html and n foto in data base (mysql) Reply
Stepahead
Sat, 18th January 2014
nice one :)
here is an other wysiwyg bootsrap solution
http://thewebground.net/summernote-super-simple-wysiwyg-editor-on-bootstrap Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement