ltvolks/freshereditor

freshereditor is an html editor built base on the jQuery ContentEditable plugin with the following improvements:

plugin automatically builds toolbar, have option to specify buttons to hide (see example)
support text alignment
support font size and name selection
support foreground and background selection with built-in color picker (using farbtastic color picker plugin)
minor rewrite to make code less redundant since lots of command have the form: document.execCommand(cmd, false, null);
image sprite for toolbar buttons

Quickstart:

<html> <head> <script src=“ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js” type=“text/javascript”></script> <script src=“shortcut.js” type=“text/javascript”></script> <script src=“farbtastic/farbtastic.js” type=“text/javascript”></script> <script src=“freshereditor.js” type=“text/javascript”></script> <script type=“text/javascript”> $(document).ready(function() { $(‘#content-editor’).freshereditor({toolbar_selector: “#toolbar”, excludes: [‘removeFormat’, ‘insertheading4’]}); $(“#content-editor”).freshereditor(“edit”, true); }); </script> <link href=“freshereditor.css” rel=“stylesheet” type=“text/css” /> <link href=“farbtastic/farbtastic.css” rel=“stylesheet” type=“text/css” /> </head> <body> <div id=“toolbar”></div> <div id=“content-editor” class=“clear”> <span>Edit me here</span> </div> </body> </html>

Some excellent relevant references:

About

fresherEditor is a rich text editor jQuery plugin built using contentEditable attribute

Languages

Language:JavaScript 100.0%