Font color picker in TinyMCE

<%- if @topic_view.topic.tags.present? %>
<%= t 'js.tagging.tags' %>: <%- @topic_view.topic.tags.each do |t| %> <%= t %> <%- end %>
<% end %>
#1

Silverstripe 4.2

I tried to add the font color picker in the toolbar in TintMCE like the way I did in SilverStripe 3.

in /app/_config.php:

use SilverStripe\Forms\HTMLEditor\HtmlEditorConfig;

HtmlEditorConfig::get('cms')->ButtonsBefore('formatselect', 'forecolor');

But this doesn’t work anymore. Checked already:
https://docs.silverstripe.org/en/4/developer_guides/forms/field_types/htmleditorfield/

But doesn’t give me the solution (but maybe it’s me… :wink: )

#4

Finally I found it, very simple :blush:

use SilverStripe\Forms\HTMLEditor\HtmlEditorConfig;

HtmlEditorConfig::get('cms')->enablePlugins('textcolor');
HtmlEditorConfig::get('cms')->insertButtonsBefore('formatselect', 'forecolor');

Then you get this:

image

2 Likes
#2

To add some basic styles like color, etc…this is what you’re looking for (Custom style dropdown):
https://docs.silverstripe.org/en/4/developer_guides/customising_the_admin_interface/typography/#custom-style-dropdown

Add this to your app/_config.php

use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;

TinyMCEConfig::get('cms')
    ->addButtonsToLine(1, 'styleselect')
    ->setOption('importcss_append', true);

Then add your styles to editor.css

And make sure to include editor.css to your page.ss template as well.

If you need more than that the ‘further customization’ section below that goes into greater detail about customizing the entire toolbar.

Chris

#5

Oh! My bad, I was careless in reading your original post. I actually didn’t know the color picker was a feature. So thank you for that! :slight_smile:

EDIT: Is the color selections customizable?

#3

Hi Chris.
Thanks for reply. Unfortunately this is not exact what I was looking for, but maybe the easy font color picker is not available anymore in this version of TinyMCE.

#6

Chris,
Yes I guess it is customizable according the documentation of TinyMCE: TinyMCE | Text Color Plugin (section textcolor_map).
But haven’t figured out how to do this in SilverStripe yet.

#7

For what it’s worth, I have an interest in figuring this out…so I tried this.

Instead of using HTMLEditorConfig I’m using TinyMCEConfig and getting the color picker, but no luck with the formats.

Without the setOptopns() it works as expected. Seems like this code is close though.

<?php
use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;

$formats = [
        "000000" => "Black",
        "993300" => "Burnt orange",
        "333300" => "Dark olive",
        "003300" => "Dark green",
        "003366" => "Dark azure",
        "000080" => "Navy Blue"
];

TinyMCEConfig::get('cms')->enablePlugins('textcolor');
TinyMCEConfig::get('cms')->insertButtonsBefore('formatselect', 'forecolor backcolor');
TinyMCEConfig::get('cms')->setOptions([
    'textcolor_map' => $formats
]);
#8

And as soon as I posted that I see the problem.

$formats should look like this:

$formats = [
    "000000", "Black",
    "993300", "Burnt orange",
    "333300", "Dark olive",
    "003300", "Dark green",
    "003366", "Dark azure",
    "000080", "Navy Blue"
];

Works as expected.

EDIT: Complete code example

<?php
use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;

$formats = [
    "000000", "Black",
    "993300", "Burnt orange",
    "333300", "Dark olive",
    "003300", "Dark green",
    "003366", "Dark azure",
    "000080", "Navy Blue"
];

TinyMCEConfig::get('cms')->enablePlugins('textcolor');
TinyMCEConfig::get('cms')->insertButtonsBefore('formatselect', 'forecolor backcolor');
TinyMCEConfig::get('cms')->setOptions([
    'textcolor_map' => $formats
]);
2 Likes
#9

Great, thanks! I’m gonna use this as well.