--- layout: v0.20 permalink: /0.20/examples/ title: Examples - Quill v0.20 ---

# 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);
      }
    });