Editor

This is an experiemental rich text editor that uses contenteditable to transform any html element into an editable area. Contenteditable is slowly being standardised but there are still many inconsistencies across the browser types.

A single instance of the editor is rendered per page and the editor is positioned when you first click on an editable area.

A focus for the editor was to allow easy insertion of code samples for writing blog posts etc. For this the editor uses codemirror by Marijn Haverbeke. It also uses rangy by Tim Down to ensure cross browser selection works.

This is fairly basic as it stands but it works reasonably well. I hope to extend it as bugs are found and the standards converge.

Demo (all text below here is editable)

Heading 1

Heading 2

This is an example blockquote

An example paragraph, with an underlined portion. Experiment with applying different styles and check the html generated at the bottom of this page.

Highlight this and insert an image here

You can insert/edit links by selecting text and clicking the link button

  1. List item 1
  2. List item 2
  3. List item 3

Heading 3

Below is an example of a code block. This is not editable inline, try and highlight the code and click the code button to edit (there are known issues with chrome for this). The resultant markup uses an rss friendly pre element to retain formatting. It also is tagged with the language mode on a data-mode attribute for highlighting when loaded in a none writable mode.

var someFunction = function() {
	var boo = false;
}
  • List item 1
  • List item 2
  • List item 3

Html Generated

The below has been processed by beautify js to make it easier to read. The real markup can be seen by clicking the html button on the editor.