Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A rich text editor framework for the web platform
JavaScript Other
Latest commit 6eeded8 @rrees rrees v2.1.1
Failed to load latest commit information.
examples add bower install
src Creates a check over window that deals with the situation that the se…
test Creates some tests for the class element test function
.editorconfig Add EditorConfig
.gitignore Restores the freezing
.jshintrc Add eqeqeq JSHint option
.tern-project term-project: update "lodash-amd" require path
.travis.yml Updates the readme with a link to a wiki page about browser support. … Added line about unexpected error with commandQueryState in Firefox w… v2.1.1 Updates Contributing to explain how to start contributing to Scribe
LICENSE add Apache License
PLUGINS Add file with plugin ideas/requests
Plumbing.js Changes the require path alias for immutable Updates the readme with a link to a wiki page about browser support. …
TODO Do not encrypt Sauce Labs username/access key
bower.json Updates the Immutable library and replaces a contains with an includes
circle.yml Tries an alternative track to download Selenium
package.json v2.1.1 Added the optional values for the release script Accept args for test specs to run Update

Scribe Build Status

Join the chat at

A rich text editor framework for the web platform, with patches for browser inconsistencies and sensible defaults.

For an introduction, you may want to read the blog post Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor.

Please note: There is a lot of missing documentation for Scribe and many of its plugins. We plan to improve this, however in the meantime we encourage you to look at the code. Scribe is very small in comparison to other libraries of its kind.

You can join us on IRC at [#scribejs] on freenode, or via the Google Group.

See an example.

Scribe only actively supports a sub-set of browsers.


At the core of Scribe we have:


Scribe patches many browser inconsistencies in the native command API.


Natively, contenteditable will produce DIVs for new lines. This is not a bug. However, this is not ideal because in most cases we require semantic HTML to be produced.

Scribe overrides this behaviour to produce paragraphs (Ps; default) or BRs (with block element mode turned off) for new lines instead.


bower install scribe

Alternatively, you can access the distribution files through GitHub releases.


Enable/disable block element mode (enabled by default)
Defines which command patches should be loaded by default
undo: { enabled: false }
Enable/disable Scribe's custom undo manager

Usage Example

Scribe is an AMD module:

require(['scribe', 'scribe-plugin-blockquote-command', 'scribe-plugin-toolbar'],
  function (Scribe, scribePluginBlockquoteCommand, scribePluginToolbar) {
  var scribeElement = document.querySelector('.scribe');
  // Create an instance of Scribe
  var scribe = new Scribe(scribeElement);

  // Use some plugins
  var toolbarElement = document.querySelector('.toolbar');

You can see a live example here, or view the code here.

Also be sure to check the examples directory for an AMD syntax example as well as a CommonJS (browserify) example.


A plugin is simply a function that receives Scribe as an argument:

function myPlugin(scribe) {}

A consumer can then use your plugin with Scribe.use:


Plugins may package whatever functionality you desire, and you are free to use native APIs to do so. However, you are required to wrap any DOM manipulation in a transaction, so that we can capture state changes for the history. For example:

function myPlugin(scribe) { () {
    // Do some fancy DOM manipulation

Browser Support

Moved to the Github Wiki


Commands are objects that describe formatting operations. For example, the bold command.

Commands tell Scribe:

  • how to format some HTML when executed (similar to document.queryCommand);
  • how to query for whether the given command has been executed on the current selection (similar to document.queryCommandState);
  • how to query for whether the command can be executed on the document in its current state (similar to document.queryCommandEnabled)

To ensure a separation of concerns, commands are split into multiple layers. When a command method is called by Scribe, it will be filtered through these layers sequentially.

Where custom behaviour is defined.
Scribe Patches
Where patches for browser inconsistencies in native commands are defined.


Scribe has a rich plugin ecosystem that expands and customises what it can do.

See the wiki for a list of plugins and how to create new ones


Is it production ready?

Yes. The Guardian is using Scribe as the basis for their internal CMS’ rich text editor.

It is likely that there will be unknown edge cases, but these will be addressed when they are discovered.

How do I run tests?

See for information about running tests.

Why does Scribe have a custom undo manager?

The native API for formatting content in a contenteditable has many browser inconsistencies. Scribe has to manipulate the DOM directly on top of using these commands in order to patch those inconsistencies. What’s more, there is no widely supported command for telling contenteditable to insert Ps or BRs for line breaks. Thus, to add this behaviour Scribe needs to manipulate the DOM once again.

The undo stack breaks whenever DOM manipulation is used instead of the native command API, therefore we have to use our own.

Scribe's undo manager can be turned off by configuration eg:

var scribe = new Scribe(scribeElement, {
  undo: {
    enabled: false
Something went wrong with that request. Please try again.