Examples

The two examples below demonstrate what is possible with Quill. Check out how they interact with each other!

Basic Example

A basic editor with just a few formats to get started.

One Ring to Rule Them All

https://en.wikipedia.org/wiki/One_Ring

Three Rings for the Elven-kings under the sky,

Seven for the Dwarf-lords in halls of stone,

Nine for Mortal Men, doomed to die,

One for the Dark Lord on his dark throne.

In the Land of Mordor where the Shadows lie.

One Ring to rule them all, One Ring to find them,

One Ring to bring them all and in the darkness bind them.

In the Land of Mordor where the Shadows lie.

Show/Hide Code

var basicEditor = new Quill('#basic-editor');
basicEditor.addModule('toolbar', {
  container: '#basic-toolbar'
});

Full Example

Uses all the features of Quill, including Modules and Themes.

One Ring to Rule Them All

https://en.wikipedia.org/wiki/One_Ring

Three Rings for the Elven-kings under the sky,

Seven for the Dwarf-lords in halls of stone,

Nine for Mortal Men, doomed to die,

One for the Dark Lord on his dark throne.

In the Land of Mordor where the Shadows lie.

One Ring to rule them all, One Ring to find them,

One Ring to bring them all and in the darkness bind them.

In the Land of Mordor where the Shadows lie.

Show/Hide Code

// Initialize editor with custom theme and modules
var fullEditor = new Quill('#full-editor', {
  modules: {
    'authorship': { authorId: 'galadriel', enabled: true },
    'multi-cursor': true,
    'toolbar': { container: '#full-toolbar' },
    'link-tooltip': true
  },
  theme: 'snow'
});

// Add basic editor's author
var authorship = fullEditor.getModule('authorship');
authorship.addAuthor('gandalf', 'rgba(255,153,51,0.4)');

// Add a cursor to represent basic editor's cursor
var cursorManager = fullEditor.getModule('multi-cursor');
cursorManager.setCursor('gandalf', fullEditor.getLength()-1, 'Gandalf', 'rgba(255,153,51,0.9)');

// Sync basic editor's cursor location
basicEditor.on('selection-change', function(range) {
  if (range) {
    cursorManager.moveCursor('gandalf', range.end);
  }
});

// Update basic editor's content with ours
fullEditor.on('text-change', function(delta, source) {
  if (source === 'user') {
    basicEditor.updateContents(delta);
  }
});

// basicEditor needs authorship module to accept changes from fullEditor's authorship module
basicEditor.addModule('authorship', {
  authorId: 'gandalf',
  color: 'rgba(255,153,51,0.4)'
});

// Update our content with basic editor's
basicEditor.on('text-change', function(delta, source) {
  if (source === 'user') {
    fullEditor.updateContents(delta);
  }
});