WYSIWYG Editor
Welcome back, JohnNew User
17,561
My Balance
$21,561.01
- Home
- WYSIWYG Editor
fresherEditor is a light-weight WYSIWYG rich text editor plugin that uses contentEditable support in modern browsers for in-place HTML editing.
Click on this text to edit right away!
Features
- Supports all text editing features such as bold, italic, font size and font name settings, text alignments, links and picture insertion, and more
- Builds toolbar automatically. By default, all buttons are built. You can configure which buttons to hide
- Triggers 'change' event so you can perform action when html content changes
- Uses Twitter Bootstrap
Dependencies
- jQuery (1.7.1 or higher is recommended)
- shortcut.js
- farbtastic colorpicker plugin
- Twitter bootstrap.css and bootstrap-dropdown.js
jQuery ContentEditable depends on jQuery and shortcut.js for keyboard shortcuts, as given below.
Some jQuery Calls:
- To initialise the toolbar, call $(".fresheditable").fresheditor();
- To start/stop editing, call $(".fresheditable").fresheditor("edit", true); for editable elements.
- To save, call $(".fresheditable").fresheditor("save", function(id, content) { ... }); to have the callback function called for each editable element being saved.
- To perform action on change event $(".fresheditable").on('change', function() { ... });
Keyboard Shortcuts
- Tab indents the selected content
- Shift+Tab outdents selected content
- Ctrl+B makes text bold
- Ctrl+I makes text italic
- Ctrl+U underlines text
- Ctrl+L inserts a link
- Ctrl+Alt+0 formats a paragraph
- Ctrl+Alt+1 through Ctrl+Alt+5 adds headings 1 through 5
- Ctrl+J creates an unordered list, like this one
- Ctrl+K creates an ordered list.