Bootstrap Based HTML5 WYSIWYG Editor
Click me to edit!
The Problem
There are many text editors out there, yet nothing feels right:
- TinyMCE, CKEdit etc: For industrial strength editing.
- Aloha, Mercury: Web 2.0, but still missing something.
- Boostrap WYSIWYG By Mindmup: Nice but too light.
Here is the feature list we wanted:
- Bootstrap themed
- Lightweight and easy to configure
- For fixed (
contenteditable) + inline editing - HTML editing
- Image insertion
The Solution
We built a simple editor based on Boostrap WYSIWYG By Mindmup and added
- HTML editing and beautify_html
- Inline and fixed options
- Simple API
- Extendable
Dependencies (bundled in repository)
- Bootstrap
- JQuery
- JQuery.Hotkeys
- Beautify HTML
- Class (by John Resig)
Fixed Editor
Pass editor option with content to be edited
// fixed editor
var fixed = new bsEditor({
editor: $(".editable-content"),
toolbar_style: {
"background-color": "black"
}
});Inline Editor
Pass parent option pointing to the parent element.
// inline
var inline = new bsEditor({
parent: $("#inline-parent"),
});
inline.set_input("Write Something!")
Options
| Option | Description |
|---|---|
editor |
For fixed mode, this element will become contenteditable |
parent |
For inline mode, make editor in this element |
toolbar_style |
CSS for toolbars |
onsave |
Function to be called on saving (fixed mode) |
oncancel |
Function to be called on cancel (fixed mode) |
change |
Function to be called on change (inline mode) |
Methods
| Method | Description |
|---|---|
set_input(html) |
Set HTML in Editor |
get_value() |
Get Inner HTML |
