quill

Basic Text Formatting

This code initializes a Quill editor with basic text formatting options such as bold, italic, underline, and strike-through, as well as blockquote and code block formatting.

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

Adding Custom Toolbar Buttons

This code demonstrates how to add a custom button to the Quill toolbar and define a custom event handler for it.

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '#toolbar',
      handlers: {
        'customButton': function() {
          console.log('Custom button clicked!');
        }
      }
    }
  },
  theme: 'snow'
});

// Assuming there is a button with class 'ql-customButton' in the toolbar

Handling Content Changes

This code sets up an event listener to log changes to the content of the Quill editor, providing the delta of the change.

var quill = new Quill('#editor', {
  theme: 'snow'
});

quill.on('text-change', function(delta, oldDelta, source) {
  console.log('Text was changed!', delta);
});

Setting and Getting Content

This code shows how to set the content of a Quill editor using a delta and how to retrieve the content as a delta.

var quill = new Quill('#editor', {
  theme: 'snow'
});

// Set content
var delta = quill.clipboard.convert('<h1>Quill Rocks</h1>');
quill.setContents(delta);

// Get content
var content = quill.getContents();
console.log(content);