Search code examples
javascriptvaadinquill

How to add my own color list in quill editor font-color menu?

I have added Quill Editor as Vaadin component so i can access it in Java and i have customized it little bit because all i need is BOLD, ITALIC and font-color buttons and that is working fine.

I am struggling with one thing. I want to set my own colors and only mine in color-menu. How can i achieve this?

in my custom quilleditor.js i have this:

const ColorClass = Quill.import('attributors/class/color');
Quill.register(ColorClass, true);
const ColorStyle = Quill.import('attributors/style/color');
Quill.register(ColorStyle, true);

which i think basically somehow imports this from node_modules/quill/themes/base.js :

const COLORS = [
  "#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff",
  "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff",
  "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff",
  "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2",
  "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466"
];

because the color-menu looks exactly like this and the count and the colors match the list above:

enter image description here

How can i get rid of those colors and add my own list when creating the editor?

I have tried using whitelist but with no success.

I am totally not a javascript developer and i am trying to do something i dont fully understand thus i ask for help.

Solution

  • Thanks to @Ian H. i figured it out.

    While initializing editor i had this:

    this.colors = [{ 'color': [] }];

    And according to https://quilljs.com/docs/modules/toolbar/ "Themes may also specify default values for dropdowns. For example, Snow provides a default list of 35 colors for the color and background formats, if set to an empty array."

    So i just added my colors to the array:

    this.colors = [{ 'color': ['#e60000', '#9933ff', '#00ff00'] }];

    and it works! Thanks a lot :)