How to get custom colors in quilljs
I want to be able to use custom hex values in quilljs using formatting. Is there any way I can do this? Currently when I use the following method the hex color is displayed in the toolbar but does not work in the editor. Is there anything I can do to resolve this?
var BackgroundClass = Quill.import('attributors/class/background'); var ColorClass = Quill.import('attributors/class/color'); var SizeStyle = Quill.import('attributors/style/size'); Quill.register(BackgroundClass, true); Quill.register(ColorClass, true); Quill.register(SizeStyle, true); var quill = new Quill('#editor-container', { modules: { toolbar: '#toolbar-container' }, placeholder: 'Compose an epic...', theme: 'snow' }); <div id="toolbar-container"> <span class="ql-formats"> <select class="ql-size"> <option value="10px">Small</option> <option selected>Normal</option> <option value="18px">Large</option> <option value="32px">Huge</option> </select> </span> <span class="ql-formats"> <select class="ql-color"> <option selected></option> <option value="red"></option> <option value="orange"></option> <option value="yellow"></option> <option value="green"></option> <option value="blue"></option> <option value="purple"></option> <option value="#a7f542"></option> // want to do something like this. It displays in the toolbar but doesn't work in the editor </select> <select class="ql-background"> <option selected></option> <option value="red"></option> <option value="orange"></option> <option value="yellow"></option> <option value="green"></option> <option value="blue"></option> <option value="purple"></option> </select> </span> </div> <div id="editor-container"> <p>Quill uses classes for most inline styles.</p> <p><br></p> <p>The exception is <span class="ql-bg-yellow">background</span> and <span class="ql-color-purple">color</span>,</p> <p>where it uses inline styles.</p> <p><br></p> <p>This <span style="font-size: 18px">demo</span> shows how to <span style="font-size: 32px">change</span> this.</p> </div> 
