jQuery addClass example

Setting QuillJs editor height and fixed toolbar position

by tmtron

HTML

<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.snow.css">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

   <div id="editor" style="min-height:100%; height:auto;"></div>

CSS

.ql-container.ql-snow {
    height: auto;
}
.ql-editor {
    height: 150px;
    overflow-y: scroll;
}

JavaScript

var quill = new Quill("#editor",{
            modules: {
              toolbar: [
               ['bold', 'italic', 'underline', {
                 'color': []
                 }, {
                      "background": []
                    }, {
                        "font": []
                    }, {
                        "size": []
                    }, {
                        align: []
                    }, 'image', 'code-block']]
                },
                scrollingContainer: "#editorcontainer",
                theme: "snow"
            });