Font colour tools not avaiable

[ShamzDevOps]

Font colour and backgroud colour tools are not available with this plugin

[codewithtyler]

I don't believe this can be easily achieve cross platform. According to the W3C documentation the foreground color is requires a different implementation for each browser. The table on the right of this page demonstrates that you have to speciify the color differently depending on what browswers you want to support.

This same issue exists for the background color. If we want to have something like this in the future then we would either have to make our own implementation of this. Ideally we would let the user decide what browsers they want to support and get them to pass us the colors as a string and then we just use that as the color for each option.

@steveathon what are your thoughts on this issue?

[techmag]

+1 to add some ability to colour text and add a background (highlight) as well

[codewithtyler]

Going back over the commands for the document.execCommands() it looks like the foreColor command will allow us to do this. If anyone wants to test this out by updating one of the HTML files in the examples folder. If it works then we can update all the examples and this will be ready to go with the current code.

[techmag]

Works as expected.

<a style="background-color: #40ff00;" class="btn btn-default" data-edit="foreColor #40ff00" title="" data-original-title="Font Color: #40ff00"><i class="fa"></i></a> <a style="background-color: #0080ff;" class="btn btn-default" data-edit="foreColor #0080ff" title="" data-original-title="Font Color: #0080ff"><i class="fa"></i></a> <a style="background-color: #ff0040;" class="btn btn-default" data-edit="foreColor #ff0040" title="" data-original-title="Font Color: #ff0040"><i class="fa"></i></a>

Real ugly example with inline styling (yuck) just towhee the color. I suppose this is best down with a pull down perhaps?

Do browsers have a standard color picker we can use?

[techmag]

backColor also works as expected: E.g. a "highlighter" could be implemented now as follows:

<a style="background-color: #ffff00;" class="btn btn-default" data-edit="backColor #ffff00" title="" data-original-title="Font Color: #ffff00">Highlight</a>

[codewithtyler]

I suppose this is best down with a pull down perhaps?

Yes, ideally you'd want to do this with a drop down menu like we did for the font size.

Do browsers have a standard color picker we can use?

No, but if you use Chrome or Firefox there are color picker extensions that you can add. I use the ColorZilla color picker for Chrome. I'd probably just pick 2 to 3 colors and stick with that. I don't really seeing many people use more than black, blue, or red for their font colors. At least not on a web page I don't.

As for the back colors, it should also be setup using a drop down menu as well. I'd probably pick yellow, light green, aqua, red for the highlighter.

[techmag]

There are many different ways to pick colours.

Use cases for me are Marketing, Content Curation and Corporate Announcements in which specific colours (sorry colors) (headers etc) might be needed.

As long as anyone can see how the "pick" is actually made -- e.g. how to use a pick list versus a button -- then to each his own as you say.

[codewithtyler]

Right each person can pick the colors; however, they wish.

Anyways, I'll look into creating a PR that adds a drop down example of for font colors. I think the biggest challenge will be actually putting a color beside it's name in the drop down.

[codewithtyler]

@steveathon would this work for the font color example?

I considered making it into a 3 or 4 column drop down kind of like you'd see in Microsoft Word, but thought that would be a lot of wasted time just to show that the font color works.

[techmag]

As an example that would be just fine. (Assuming your are asking me?)

I have no problems implementing this one.

[codewithtyler]

Actually the examples I made runs utilizes pieces of the snippets you shared above.

[steveathon]

It'd be great if we could have a block of colour next to it, with a CSS Prepend. This code example uses a circle from font awesome to display a circle of color right before the text:

.fontColourSelectorButtonBlack::before { content: '\f111'; font-family: FontAwesome; font-style: normal; font-weight: normal; color: #000; font-size: 18px; top: 10px; left: 0; }

[codewithtyler]

Awesome, I'll see if I can't work your snippet into the code so that it shows the correct color for each one.

[codewithtyler]

@steveathon using you're code snippet I was able add a block of color to each as shown in the screenshots below. What do you think?

[techmag]

Awesome!

[codewithtyler]

Yep, just gotta find a better FontAwesome icon for the highlighter now. Any suggestions @techmag?

[steveathon]

That looks freaking awesome!

[codewithtyler]

@steveathon glad you like it..any suggestions on what FontAwesome icon I should use for the text highlighter?

[steveathon]

Paintbrush?