Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/guardian/scribe

DEPRECATED: A rich text editor framework for the web platform
https://github.com/guardian/scribe

Last synced: 3 months ago
JSON representation

DEPRECATED: A rich text editor framework for the web platform

Awesome Lists containing this project

README 

        
**THIS PROJECT IS DEPRECATED** - You can find more information about this in our blog post, [Leaving Scribe](https://www.theguardian.com/info/2019/jan/24/leaving-scribe). In summary:



- We have no plans to add features to Scribe but may make critical updates throughout the period that we continue to use instances of Scribe internally

- We recommend forking the project in order to do any feature work as we will not be moving the Scribe repository out of the Guardian organisation

- In time we hope to be able to open source the new text editor we are working on



# Scribe



A rich text editor framework for the web platform, with patches for

browser inconsistencies and sensible defaults.



## Status



 [![Build Status](https://travis-ci.org/guardian/scribe.svg?branch=master)](https://travis-ci.org/guardian/scribe)  [![Join the chat at https://gitter.im/guardian/scribe](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/guardian/scribe?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)



## Description



For an introduction, you may want to read the blog post [Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor](http://www.theguardian.com/info/developer-blog/2014/mar/20/inside-the-guardians-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](https://groups.google.com/forum/#!forum/scribe-editor).



[See an example][example].



Scribe only actively supports a [sub-set of browsers](https://github.com/guardian/scribe/wiki/Browser-support).



## Core



At the core of Scribe we have:



* [Patches for many browser inconsistencies surrounding `contenteditable`](#patches);

* [Inline and block element modes](https://github.com/guardian/scribe/wiki/Modes#).



### Patches



Scribe patches [many browser inconsistencies][browser inconsistencies] in the [native command API][Executing Commands].



## Installation

```

bower install scribe

```



Alternatively, you can [access the distribution files through GitHub releases](https://github.com/guardian/scribe/releases).



## Usage Example



Scribe is an AMD module:



``` js

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

  scribe.use(scribePluginBlockquoteCommand());

  var toolbarElement = document.querySelector('.toolbar');

  scribe.use(scribePluginToolbar(toolbarElement));

});

```



You can [see a live example here][example], or [view the code here](https://github.com/guardian/scribe).



Also be sure to check the [`examples`](./examples) directory for an

AMD syntax example as well as a CommonJS (browserify) example.



## Options





  
allowBlockElements


  
Enable/disable block element mode (enabled by default)


  
undo: { enabled: false }


  
Enable/disable Scribe's custom undo manager


  
defaultCommandPatches


  
Defines which command patches should be loaded by default


  
defaultPlugins


  
Defines which of Scribe's built-in plugins should be active


  
defaultFormatters


  
Defines which of Scribe's default formatters should be active





For detailed documentation see the [wiki page on options](https://github.com/guardian/scribe/wiki/Scribe-configuration-options).



## Architecture



* [Everything is a plugin](https://github.com/guardian/scribe/tree/master/src/plugins).

* No runtime dependencies.



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



``` js

function myPlugin(scribe) {}

```



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



``` js

scribe.use(myPlugin);

```



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:



``` js

function myPlugin(scribe) {

  scribe.transactionManager.run(function () {

    // Do some fancy DOM manipulation

  });

}

```



### Browser Support



[Moved to the Github Wiki](https://github.com/guardian/scribe/wiki/Browser-support)



## Plugins



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](https://github.com/guardian/scribe/wiki/Plugins)



## FAQ



See the wiki's [FAQ](https://github.com/guardian/scribe/wiki/FAQ)



[browser inconsistencies]: https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md

[Executing Commands]: https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla#Executing_Commands

[Range API]: https://developer.mozilla.org/en-US/docs/Web/API/Range

[Selection API]: https://developer.mozilla.org/en-US/docs/Web/API/Selection

[example]: http://guardian.github.io/scribe