open source rich text editor based on HTML5 technology and the progressive-enhancement approach.
It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
The code is completely library agnostic: No jQuery, Prototype or similar is required.
The editor is already in use on XING.com – a social network with more than 10 million members.

Features:

Auto linking of urls as-you-type
Generates valid and semantic HTML5 markup (no <font>)
Uses class-names instead of inline styles
Unifies line-break handling across browsers (hitting enter will create <br> instead of <p> or <div>)
Auto-parses content inserted via copy & paste (from Word, Powerpoint, PDF, other web pages, …)
Converts invalid or unknown html tags into valid/similar tags
Source code view for users with HTML skills
Uses sandboxed iframes in order to prevent identity theft through XSS
Editor inherits styles and attributes (placeholder, autofocus, …) from original textarea (you only have to style one element)
Speech-input for Chrome 11+

CKEDITOR.plugins.add( 'tokens',
{
requires : ['richcombo'], //, 'styles' ],
init : function( editor )
{
var config = editor.config,
lang = editor.lang.format;

// Gets the list of tags from the settings.
var tags = []; //new Array();
//this.add('value', 'drop_text', 'drop_label');
tags[0]=["[contact_name]", "Name", "Name"];
tags[1]=["[contact_email]", "email", "email"];
tags[2]=["[contact_user_name]", "User name", "User name"];

// Create style objects for all defined styles.

editor.ui.addRichCombo( 'tokens',
{
label : "Insert tokens",
title :"Insert tokens",
voiceLabel : "Insert tokens",
className : 'cke_format',
multiSelect : false,

panel :
{
css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
voiceLabel : lang.panelVoiceLabel
},

init : function()
{
this.startGroup( "Tokens" );
//this.add('value', 'drop_text', 'drop_label');
for (var this_tag in tags){
this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
}
},

onClick : function( value )
{
editor.focus();
editor.fire( 'saveSnapshot' );
editor.insertHtml(value);
editor.fire( 'saveSnapshot' );
}
});
}
});

A cross-browser JavaScript range and selection library. It provides a simple standards-based API for performing common DOM Range and Selection tasks in all major browsers, abstracting away the wildly different implementations of this functionality between Internet Explorer up to and including version 8 and DOM-compliant browsers.

For manipulating selections in <textarea> and <input type="text"> elements, see Rangy's poorly-named and svelter twin project, Rangyinputs.

Hosted files for the current stable release can always be found at http://rangy.googlecode.com/svn/trunk/currentrelease/. These are intended for use in demos using tools such as jsFiddle.

WCTeditor
A super-simple text editor for modern browsers. Supports:

bold
italic
underline
numbered lists
bulleted lists
links
stripping html (except line breaks/paragraphs)
spell-check via callback
Tested so far and works ok in:

FF 3.6
Chrome 8
Safari 5
Opera 11
IE 7+
NOT mobile WebKit
Usage

Requires jQuery and the jQuery templates plugin (there's also a version with no template dependency). Get those and then apply the WCTeditor plugin to a textarea with some options:

$("#myTextArea").WCTeditor({
showNumList: true,
showBullList: true,
pathToPlugin:"../"
});
Yay! Done.

Options

showBold

boolean: Whether or not you'd like the bold button to be shown. On by default.

showItalic

boolean: Whether or not you'd like the italicize button to be shown. On by default.

showUnderline

boolean: Whether or not you'd like the underline button to be shown.

showNumList

boolean: Whether or not you'd like the ordered list button to be shown.

showBullList

boolean: Whether or not you'd like the unordered list button to be shown.

showLink

boolean: Whether or not you'd like the link button to be shown. On by default.

showStripHtml

boolean: Whether or not you'd like the strip/clean up HTML button to be shown.

showSpellCheck

boolean: Whether or not you'd like the spellcheck button to be shown.

userClasses

array of strings: CSS class(es) you'd like to have applied to the div that wraps the editor.

defaultText

string: Text you want the editor to display with, if different than what's in your textarea.

showCharCount

boolean: Whether or not you'd like to show a character counter. See below for where to change the way the character counter works.

charCountTmpl

string: The template for your character counter. This can be just text or some HTML, but you need to insert "{{html chars}}" where you want the count to actually appear.

maxLength

integer: The maximum length of the user's input, including HTML, if different than the maxlength of your textarea.

spellcheckUrl

string: Path to the spellchecking service you'd like to call.

pathToPlugin

string: Location of this plugin (i.e., location of WCTeditor.js) relative to the file it's being implemented in.

theme

string: A directory name. The plugin will look for a stylesheet at [pathToPlugin]/themes/[theme]/WCTeditor.css

placeholderText

string: Helpful text that will display within the editor while it is empty, if defaultText is not set and the textarea is empty.

Functions

You may want to override some of these to change the default functionality.

applyFormatting

Applies the basic designMode commands.

updateTextarea

Pushes changes to the editor to your textarea, then calls updateCharCount if it's enabled.

updateCharCount

Updates the character count. Counts down from your specified maximum, then goes to negative. Assigns the CSS class "tooLong" to the count only once it goes negative.

updateButtons

Updates the state of the formatting buttons depending on the cursor location.

setLink

args: leftPosition (left position of formatting button)

Displays the interface to set a URL and wires up the button in that interface to update the editor markup.

stripHTML

Removes all markup except paragraphs and line breaks.

stripHTMLComments

Removes HTML comments from content pasted into the editor.

spellcheck

IE-only implementation, because other browsers include spellcheck. Sends the text within the editor to the service specified by the spellcheckUrl property, and expects an array of results in the format:

{originalWord: string, suggestions: []}
Wraps each misspelling in a font tag, and wires up an event handler to display a small window with the suggestions and an option to ignore the misspelling. Clicking a suggestion replaces the misspelling and removes the font tag, clicking ignore simply removes the font tag.

function getRange() {
return window.getSelection ?
window.getSelection().getRangeAt(0) :
document.selection.createRange();
}
function setSelection(range) {
if (range.select) {
range.select();
} else {
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}

This tutorial describes how to use features found in Microsoft Internet Explorer 5.5 or later to create an HTML Editor Application. The application you create in this tutorial contains an editable region where users can type and format text using all of the standard formatting commands. For example, users can make the text bold or italic, change the font size, and make bulleted or numbered lists. A toolbar provides the formatting buttons, buttons for opening and saving files, and drop-down list boxes for font and block formatting selections. A menu allows alternate access to the functionality provided by the toolbar. As of Internet Explorer 6, you can also use the HtmlDlgSafeHelper object to change the face or color of the font.

With this HTML Editor Application, users can create HTML documents and save them to disk in either HTML or text format. If saved as an .htm file, the documents are viewable in Windows Internet Explorer or in the HTML Editor Application. Files saved as .txt can be viewed in any text editor.

This tutorial demonstrates how to do the following:

Create and use editable regions with the CONTENTEDITABLE attribute.
Use formatting Command Identifiers and the execCommand method.
Use the Internet Explorer WebControls toolbar element behavior, as well as a menu element behavior and an HTML+TIME (Timed Interactive Multimedia Extensions) time2 behavior that displays a splash screen.
Use the HtmlDlgSafeHelper object to access the fonts and block formats on a user's machine, and to display the color dialog box. Internet Explorer 6 introduces the HtmlDlgSafeHelper object.
Create an HTML Application (HTA).
You can use this kind of application to allow "what you see is what you get" (WYSIWYG) content editing of Web sites by users. You can also use this type of application as an editor for an Internet e-mail program.

Requirements and Dependencies 
Implementation Steps 
Step 1: Create the HTML file 
Step 2: Create the Toolbars 
Step 3: Create the Text Formatting Functions 
Step 4: Create the File New, File Open, and File Save Functions 
Step 5: Create the Menu 
Step 6: Create the Splash Screen 
Final Wrap-up 
Related Topics

Sets or gets a value that indicates whether the document can be edited.

Syntax

Copy
[ sMode = ] object.designMode
Possible Values

sMode String that specifies or receives one of the following values.
On
Document can be edited.
Off | Inherit
Default. Document cannot be edited.
The property is read/write. The property has a default value of Off | Inherit.

DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

You can use the designMode property to put Windows Internet Explorer into a mode so that you can edit the current document.

While the browser is in design mode, objects enter a UI-activated state when the user presses ENTER, clicks an object that has focus, or double-clicks the object. Objects that are UI-activated have their own window in the document. You can modify the UI only when the object is in a UI-activated state.

You cannot execute script when the value of the designMode property is set to On.

advanced

In the very first browser, created by Tim Berners-Lee in 1990, web pages could be edited directly in the browser in WYSIWYG mode. The web was conceived as a read-write medium. Later browsers however, were basically read-only. Only plain text could be entered through form controls.

WYSIWYG editing in the browser returned to the mainstream with Internet Explorer 5: The new designMode property allowed a whole document to become editable by the user. At first the feature was somewhat overlooked, possible because it came among a flurry of equally underspecified, Windows-specific, proprietary extensions to IE.

In recent years the other competing browsers—Mozilla, Safari and Opera—have followed the lead and implemented editing similar to the implementation in IE. The WHATWG-group is working on standardizing the editing system—the designMode and contentEditable DOM properties intoduced in HTML 5. It seems in-browser WYSIWYG editing at last is about to become an integral part of the Web.

This article looks at the basic concepts and challenges involved in utilizing the HTML 5 editing features in recent browsers. The subjects covered are:

* The different ways of enabling editing
* The editing commands
* The HTML generated by editing
* The interaction with the DOM

The article is the first part of two. The second part will cover a detailed example of how to implement an editor.

Note: I am only considering the editing features in the latest major browser versions: Opera 9.5, Firefox 2+ and Safari 3, since previous versions are simply too buggy and inconsistent. The implementation in IE hasn’t changed significantly since IE 5.5)

Note: This condensed tutorial assumes you are working with WordPress 2+ and are familiar with editing .php and/or .js files.

WordPress quicktags1 provide shortcuts for adding certain bits of code to your posts. The default set of quicktags includes some handy shortcut buttons for tags such as <strong>, <a>, and <img>, as well as a few others. While the default set of quicktag buttons is occasionally useful, a quick bit of quicktag customization can easily transform your personal set of quicktag buttons into a deadly arsenal of time-saving code shortcuts.

First, open the quicktags.js file, usually located in the wp-includes/js directory. Next, scroll down to around line #40 and look for the following chunk of code:

add_editor_style() which allows you to assign a CSS file for the TinyMCE when editing posts, pages and the new custom post types. This is very handy to get closer to a WYSIWYG experience in WordPress’ editor and not having to preview the posts all the times while writing, to check where line breaks end up and so on (if you care about those things).

I’m also loving the new Custom Post Types, and on one of my sites, I have setup a few different post types. On the frontend I have different widths for posts, pages and my new WordPress 3.0 custom post type ‘portfolio. I wanted to reflect the different widths in my admin editor style sheet as well. The posts are the narrowest ones, while pages are wider and my custom post type portfolio is the widest, so I have made 3 style sheets which are pretty much the same, with the exception of the