Possibility to add your own text colors to the WYSIWYG editor #1863

New Issue

OVERLORD · 2026-02-05T02:04:40+03:00

OVERLORD commented

2026-02-05 02:04:40 +03:00

Originally created by @Flight777 on GitHub (Sep 23, 2020).

Currently the WYSIWYG editor only allows a limited selection of text colors. We use Bookstack internally as KB for our company and have some specific company colors. At the moment, the text can be made into this colors via the source code editor.

Would it be possible to either:

Predefine additional colors in the WYSIWYG editor? OR
Add the ability for a colorwheel/color code entry instead?

It would greatly help in picking additional colors during editing 👍

Originally created by @Flight777 on GitHub (Sep 23, 2020). Currently the WYSIWYG editor only allows a limited selection of text colors. We use Bookstack internally as KB for our company and have some specific company colors. At the moment, the text can be made into this colors via the source code editor. Would it be possible to either: - Predefine additional colors in the WYSIWYG editor? OR - Add the ability for a colorwheel/color code entry instead? It would greatly help in picking additional colors during editing 👍

OVERLORD added the 📝 WYSIWYG Editor 🔨 Feature Request labels 2026-02-05 02:04:40 +03:00

OVERLORD commented

2026-02-05 02:04:44 +03:00

@ssddanbrown commented on GitHub (Sep 26, 2020):

Hi @Flight777,
Thanks for the request. I probably won't look to implement such a feature in the short term as we may be looking to move away from the current editor but I'll keep this open for future consideration.

I have implemented some JavaScript hooks that allow editor customisation. For now, as a temporary workaround, these could be use to set you colors in the editor. You can define custom colors with something like this:

<script>
	window.addEventListener('editor-tinymce::pre-init', function(event) {
		const config = event.detail.config;
		config.textcolor_map = [
			"00ACED", "Light Blue",
			"9F7AEA", "Purple",
			"000000", "Black",
			"FFFFFF", "White",
		];
	});
</script>

Just add that to the "Custom HTML Head Content" setting and you'd be good to go. Change the items within the textcolor_map array to be your colors. This array should contain pairs of hex color codes and color names (Shown on mouse over in editor) as reflected above.

@ssddanbrown commented on GitHub (Sep 26, 2020): Hi @Flight777, Thanks for the request. I probably won't look to implement such a feature in the short term as we may be looking to move away from the current editor but I'll keep this open for future consideration. I have implemented some JavaScript hooks that allow editor customisation. For now, as a temporary workaround, these could be use to set you colors in the editor. You can define custom colors with something like this: ```html <script> window.addEventListener('editor-tinymce::pre-init', function(event) { const config = event.detail.config; config.textcolor_map = [ "00ACED", "Light Blue", "9F7AEA", "Purple", "000000", "Black", "FFFFFF", "White", ]; }); </script> ``` Just add that to the "Custom HTML Head Content" setting and you'd be good to go. Change the items within the `textcolor_map` array to be your colors. This array should contain pairs of hex color codes and color names (Shown on mouse over in editor) as reflected above.

OVERLORD commented

2026-02-05 02:04:49 +03:00

@Flight777 commented on GitHub (Sep 26, 2020):

Hi Dan,

Thanks very much for reviewing this and providing a workaround!

Just tested it, the only thing is that above script will override all default colors and basically only display the two colors I've added. Would it be possible to leave the default colors as is and only add/append the custom colors?

Thanks again,

Rob

@Flight777 commented on GitHub (Sep 26, 2020): Hi Dan, Thanks very much for reviewing this and providing a workaround! Just tested it, the only thing is that above script will override all default colors and basically only display the two colors I've added. Would it be possible to leave the default colors as is and only add/append the custom colors? Thanks again, Rob

OVERLORD commented

2026-02-05 02:04:51 +03:00

@ssddanbrown commented on GitHub (Sep 26, 2020):

Hi @Flight777,
Looking in the source files, The below are likely the default options, so you could add those before your own in that map:

[
	"000000", "Black",
	"993300", "Burnt orange",
	"333300", "Dark olive",
	"003300", "Dark green",
	"003366", "Dark azure",
	"000080", "Navy Blue",
	"333399", "Indigo",
	"333333", "Very dark gray",
	"800000", "Maroon",
	"FF6600", "Orange",
	"808000", "Olive",
	"008000", "Green",
	"008080", "Teal",
	"0000FF", "Blue",
	"666699", "Grayish blue",
	"808080", "Gray",
	"FF0000", "Red",
	"FF9900", "Amber",
	"99CC00", "Yellow green",
	"339966", "Sea green",
	"33CCCC", "Turquoise",
	"3366FF", "Royal blue",
	"800080", "Purple",
	"999999", "Medium gray",
	"FF00FF", "Magenta",
	"FFCC00", "Gold",
	"FFFF00", "Yellow",
	"00FF00", "Lime",
	"00FFFF", "Aqua",
	"00CCFF", "Sky blue",
	"993366", "Red violet",
	"FFFFFF", "White",
	"FF99CC", "Pink",
	"FFCC99", "Peach",
	"FFFF99", "Light yellow",
	"CCFFCC", "Pale green",
	"CCFFFF", "Pale cyan",
	"99CCFF", "Light sky blue",
	"CC99FF", "Plum"
];

@ssddanbrown commented on GitHub (Sep 26, 2020): Hi @Flight777, Looking in the source files, The below are likely the default options, so you could add those before your own in that map: ```javascript [ "000000", "Black", "993300", "Burnt orange", "333300", "Dark olive", "003300", "Dark green", "003366", "Dark azure", "000080", "Navy Blue", "333399", "Indigo", "333333", "Very dark gray", "800000", "Maroon", "FF6600", "Orange", "808000", "Olive", "008000", "Green", "008080", "Teal", "0000FF", "Blue", "666699", "Grayish blue", "808080", "Gray", "FF0000", "Red", "FF9900", "Amber", "99CC00", "Yellow green", "339966", "Sea green", "33CCCC", "Turquoise", "3366FF", "Royal blue", "800080", "Purple", "999999", "Medium gray", "FF00FF", "Magenta", "FFCC00", "Gold", "FFFF00", "Yellow", "00FF00", "Lime", "00FFFF", "Aqua", "00CCFF", "Sky blue", "993366", "Red violet", "FFFFFF", "White", "FF99CC", "Pink", "FFCC99", "Peach", "FFFF99", "Light yellow", "CCFFCC", "Pale green", "CCFFFF", "Pale cyan", "99CCFF", "Light sky blue", "CC99FF", "Plum" ]; ```

OVERLORD commented

2026-02-05 02:04:58 +03:00

@Flight777 commented on GitHub (Apr 25, 2023):

Hi @Flight777, Looking in the source files, The below are likely the default options, so you could add those before your own in that map:

This seemed to have stopped working, while it worked for years. Did anything change in naming conventions for tinymce? :)

@Flight777 commented on GitHub (Apr 25, 2023): > Hi @Flight777, Looking in the source files, The below are likely the default options, so you could add those before your own in that map: This seemed to have stopped working, while it worked for years. Did anything change in naming conventions for tinymce? :)

OVERLORD commented

2026-02-05 02:05:02 +03:00

@ssddanbrown commented on GitHub (Apr 25, 2023):

@Flight777 It looks like the option many now just be color_map instead of textcolor_map:

https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#color_map

@ssddanbrown commented on GitHub (Apr 25, 2023): @Flight777 It looks like the option many now just be `color_map` instead of `textcolor_map`: https://www.tiny.cloud/docs/tinymce/6/user-formatting-options/#color_map

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#1863