scribe-editor
v3.3.0
Published
A rich text editor framework for the web platform, with patches for browser inconsistencies and sensible defaults.
Downloads
10,858
Maintainers
Keywords
Readme
#Scribe
A rich text editor framework for the web platform, with patches for browser inconsistencies and sensible defaults.
Status
Description
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.
Scribe only actively supports a sub-set of browsers.
Core
At the core of Scribe we have:
- Patches for many browser inconsistencies surrounding
contenteditable
; - Inline and block element modes.
Patches
Scribe patches many browser inconsistencies in the native command API.
Installation
bower install scribe
Alternatively, you can access the distribution files through GitHub releases.
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
scribe.use(scribePluginBlockquoteCommand());
var toolbarElement = document.querySelector('.toolbar');
scribe.use(scribePluginToolbar(toolbarElement));
});
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.
Options
For detailed documentation see the wiki page on options.
Architecture
- Everything is a plugin.
- No runtime dependencies.
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
:
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:
function myPlugin(scribe) {
scribe.transactionManager.run(function () {
// Do some fancy DOM manipulation
});
}
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
FAQ
See the wiki's FAQ