Quill - DevDream

버전 정보 : v2.0.2
 <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>Quill</title>
        <style>
            /* height 설정 */
            .ql-container {
                height: 500px !important;
            }
 
            .ql-editor { 
                height: 100% !important;
            }
        </style>
    </head>
    <body>
        <!-- Quill editor container -->
        <div id="contents"></div>
 
        <!-- Include stylesheet -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css">
 
        <!-- Include the Quill library -->
        <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
                
        <script>
            const toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],
                ['link', 'image', 'video', 'formula'],
    
                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
                [{ '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
            ];
            const quill = new Quill('#contents', {
                modules: {
                    toolbar: toolbarOptions
                },
                theme: 'snow'
            });
        </script>
    </body>
</html>
quill
wysiwygeditor
Template Customizer

Theming

Layout
