jQuery addClass example

Setting QuillJs editor height and fixed toolbar position

by starbuck2511

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 style="position:relative;margin-top:5em;border:solid 1px red;">
   <div id="editorcontainer" style="height:3em; min-height:100%; overflow-y:auto;margin-top:3em">
     <div id="editor" style="min-height:100%; height:auto;"></div>
   </div>
</div>

CSS

.ql-toolbar { position: absolute; top: 0;left:0;right:0}

JavaScript

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