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.
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/katex.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" />Snow Theme
Use property {theme : "snow"} to create a snow styled 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.
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.
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'
});