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

admin管理员组

文章数量:1395248

I have added Quill Editor as Vaadin ponent 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:

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.

I have added Quill Editor as Vaadin ponent 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:

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.

• javascript
• vaadin
• quill

Share Improve this question Follow asked Feb 26, 2022 at 17:39 MariMari 21333 silver badges1212 bronze badges 3

• 1 How are you initializing the editor? Because Quill provides some customizeability for the colors inside the toolbar module. – Ian H. Commented Feb 26, 2022 at 17:48
• 1 Thanks a lot for pushing me into right direction ! What i had was this: this.colors = [{ 'color': [] }]; And the website you just showed says "Note 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 added my colors to the array and it works! Thanks a lot :) – Mari Commented Feb 26, 2022 at 17:52
• @Mari It's perfectoy fine to provide your own answer on SO. This helps other users with the same problem to find the answer easier than just some ment. – cfrick Commented Feb 26, 2022 at 18:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Thanks to @Ian H. i figured it out.

While initializing editor i had this:

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

And according to https://quilljs./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 :)

本文标签： javascriptHow to add my own color list in quill editor fontcolor menuStack Overflow