Text Editor

Quill Rich Text Editor - Its modular architecture and expressive API, it is completely customizable to fit any need.

help

Basic Demo

Hello World!

Some initial bold text


                                                    
<div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
</div>
                                                    
                                                
                                                    
var quill = new Quill('#editor', {
    theme: 'snow'
});
$('.ql-snow select').addClass('browser-default');
                                                    
                                                

Extented Demo

Hello World!

Some initial bold text


                                                    
<div id="extented-editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
</div>
                                                    
                                                
                                                    
var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }], // custom button values
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
    [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
    [{ 'direction': 'rtl' }], // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'] // remove formatting button
];

var extentedEditor = new Quill('#extented-editor', {
    modules: {
        toolbar: toolbarOptions
    },
    theme: 'snow'
});
$('.ql-snow select').addClass('browser-default');