Editor

We are using Quill Editor as Editor component. 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.


Usage

In order to use Quill on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

<link rel="stylesheet" href="assets/vendor/libs/quill/typography.css" />
<link rel="stylesheet" href="assets/vendor/libs/quill/editor.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/quill/katex.js" />
<script src="assets/vendor/libs/quill/quill.js" />

Examples

Snow Theme

Use property {theme : "snow"} to create a snow styled editor.

Quill Rich Text Editor

Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love.

<div id="snow-toolbar">
  <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>
</div>
<div id="snow-editor">
  <h6>Quill Rich Text Editor</h6>
  <p>Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love.</p>
</div>
const snowEditor = new Quill('#snow-editor', {
  bounds: '#snow-editor',
  modules: {
    formula: true,
    toolbar: '#snow-toolbar'
  },
  theme: 'snow'
});

Bubble Theme

Use property {theme : "bubble"} to create a bubble styled editor.

Quill Rich Text Editor

Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love.

<div id="bubble-toolbar">
  <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>
</div>
<div id="bubble-editor">
  <h6>Quill Rich Text Editor</h6>
  <p>Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love.</p>
</div>
const bubbleEditor = new Quill('#bubble-editor', {
  modules: {
    toolbar: '#bubble-toolbar'
  },
  theme: 'bubble'
});

Full Editor

You can create an editor with full toolbar or custom toolbar by defining an array of the tools you want.

Quill Rich Text Editor

Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love.

<div id="full-editor">
  <h6>Quill Rich Text Editor</h6>
  <p>Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love.</p>
</div>
const fullToolbar = [
  [
    {
      font: []
    },
    {
      size: []
    }
  ],
  ['bold', 'italic', 'underline', 'strike'],
  [
    {
      color: []
    },
    {
      background: []
    }
  ],
  [
    {
      script: 'super'
    },
    {
      script: 'sub'
    }
  ],
  [
    {
      header: '1'
    },
    {
      header: '2'
    },
    'blockquote',
    'code-block'
  ],
  [
    {
      list: 'ordered'
    },
    {
      list: 'bullet'
    },
    {
      indent: '-1'
    },
    {
      indent: '+1'
    }
  ],
  [
    'direction',
    {
      align: []
    }
  ],
  ['link', 'image', 'video', 'formula'],
  ['clean']
];

const fullEditor = new Quill('#full-editor', {
  bounds: '#full-editor',
  placeholder: 'Type Something...',
  modules: {
    formula: true,
    toolbar: fullToolbar
  },
  theme: 'snow'
});
© 2017- ThemeSelection, Hand-crafted & Made with ❀