Text Editor (WYSIWYG)

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need. Read the Official Quill Documentation for a full list of instructions and other options.

Basic Format

By default all formats are enabled and allowed to exist within a Quill editor and can be configured with the formats option.

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

<div id="toolbar-container">
  <span class="ql-formats">
    <select class="ql-font"></select>
    <select class="ql-size"></select>
  </span>
  <span class="ql-formats">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="ql-underline"></button>
    <button class="ql-strike"></button>
  </span>
  <span class="ql-formats">
    <select class="ql-color"></select>
    <select class="ql-background"></select>
  </span>
  <span class="ql-formats">
    <button class="ql-script" value="sub"></button>
    <button class="ql-script" value="super"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-header" value="1"></button>
    <button class="ql-header" value="2"></button>
    <button class="ql-blockquote"></button>
    <button class="ql-code-block"></button>
  </span>
  <span class="ql-formats mg-t-5">
    <button class="ql-list" value="ordered"></button>
    <button class="ql-list" value="bullet"></button>
    <button class="ql-indent" value="-1"></button>
    <button class="ql-indent" value="+1"></button>
  </span>
  <span class="ql-formats mg-t-5">
    <button class="ql-direction" value="rtl"></button>
    <select class="ql-align"></select>
  </span>
  <span class="ql-formats mg-t-5">
    <button class="ql-link"></button>
    <button class="ql-image"></button>
    <button class="ql-video"></button>
    <button class="ql-formula"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-clean"></button>
  </span>
</div>

<div id="editor-container" class="ht-200">
  <strong>Quill</strong> is a free, <a href="#">open source</a> WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.
</div>

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: '#toolbar-container'
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

Show/Hide Format

By default, all formats are enabled and allow to exist within the toolbar but you can configure it by including only formats that are needed. Below is an example of enabling formats only for what it's needed.

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

var quill2 = new Quill('#editor-container2', {
  modules: {
    toolbar: [
      ['bold', 'italic'],
      ['link', 'blockquote', 'code-block', 'image'],
      [{ list: 'ordered' }, { list: 'bullet' }]
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

Inline Edit

Quill text editor that can inline edit in a page.

Try to highlight me and edit

Pippin looked out from the shelter of Gandalf"s cloak. He wondered if he was awake or still sleeping, still in the swift-moving dream in which he had been wrapped so long since the great ride began. The dark world was rushing by and the wind sang loudly in his ears. He could see nothing but the wheeling stars, and away to his right vast shadows against the sky where the mountains of the South marched past. Sleepily he tried to reckon the times and stages of their journey, but his memory was drowsy and uncertain.

<div class="pos-relative ht-350 mg-b-25">
  <div id="scrolling-container" class="pos-relative ht-100p mn-ht-100p bd bd-gray-300 overflow-hidden">
    <div id="quillInline" class="pd-50 pd-l-35 ht-auto">
      <h2>Try to highlight me and edit</h2>
      <p><br></p>
      <p>Pippin looked out from the shelter...</p>
    </div>
  </div>
</div>

var quillInline = new Quill('#quillInline', {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ 'header': 1 }, { 'header': 2 }, 'blockquote'],
      ['link', 'image', 'code-block'],
    ]
  },
  bounds: '#quillInline',
  scrollingContainer: '#scrolling-container',
  placeholder: 'Write something...',
  theme: 'bubble'
});

Inside Modal

Quill text editor that wrap inside a modal.

<div id="modalEditor" class="modal">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header pd-y-15 pd-x-20 bd-b-0">
        <h6 class="modal-title">Editor in Modal</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div><!-- modal-header -->
      <div class="modal-body pd-0">
        <div class="d-flex flex-column ht-250">
          <div id="quillEditorModal" class="flex-1 overflow-y-auto">
            ...
          </div>
        </div>
      </div><!-- modal-body -->
      <div class="modal-footer pd-y-15 pd-x-20 bd-t-0 tx-13">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
      </div>
    </div><!-- modal-content -->
  </div><!-- modal-dialog -->
</div>

Components