WYSIWYG Editor

Welcome back, John

New User

17,561
4,5,6,7,6,5,4,3,3,4

My Balance

$21,561.01
4,3,6,3,8,6,4,3,3,4

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

  1. Supports all text editing features such as bold, italic, font size and font name settings, text alignments, links and picture insertion, and more
  2. Builds toolbar automatically. By default, all buttons are built. You can configure which buttons to hide
  3. Triggers 'change' event so you can perform action when html content changes
  4. 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:

  1. To initialise the toolbar, call $(".fresheditable").fresheditor();
  2. To start/stop editing, call $(".fresheditable").fresheditor("edit", true); for editable elements.
  3. To save, call $(".fresheditable").fresheditor("save", function(id, content) { ... }); to have the callback function called for each editable element being saved.
  4. 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.