Is your solution on Episerver 11 with the latest TinyMce nuget package?

In that case you can try this one: https://www.tiny.cloud/docs/plugins/colorpicker/? 

If not I would recommend upgrading to Episerver 11 first and then doing the adjustments in TinyMce. :)

@Goran, he is using the new TinyMCE version 2.x and he wants to be able to pass the JavaScript function callback to the initialization configuration. The problem is that if using the AddSetting the function is passed as a string not a JavaScript function so it will not work.

Hi Joakim,

I'm not sure, but maybe you could use InitializationScript?

config.Default()
    .InitializationScript("alloy/advancedTinyMCEConfig");

In this case, the initialization function should be place under ClientResources/Scripts folder. The initializer has settings parameter. Example implementation:

define([], function () {

    return function (settings) {
        console.log("initialize TinyMCE advanced config");
        return Object.assign(settings, {
            myCallback: function () {}
        });
    }
});

Nice idea from Grzegorz, worth a try.

Yesterday I played a bit around using JRaw, no success. Same with having a custom converter. The problem is that it will blow up when deserializing the settings as the function is writen with raw so it will try to parse it as boolean (anyways, it is kinda wrong to try to serialize javascript functions into JSON, but that is a nother discussion :D).

The InitializationScript should solwe the problem with passing callback arguments. As you mentioned it's hard to serialize the function, that's why you should try the InitializationScript. Let me know if it's working.

What better way to spend saturday when it is raining outside than play around with Episerver.

I can confirm that the suggestion by Grzegorz works.

define([], function () {
    return function (settings) {
        return Object.assign(settings, {
            color_picker_callback: function (callback, value) {
                // add custom color
                callback('#839192');
            }
        });
    };
});

Edited: I initially thought you would return multiple colors from this but re-reading the TinyMCE documentation I believe this is the place where you would show your custom color dialog and then return the selected color from that.

If you just want to have custom colors, then I think you should use the textcolor_map.

Thank you guys for all your help. This works really good!

While this is resolved with the above solution, I wanted to share how I did this in C# using AddSetting() in the default configuration.

I created an initialization module based on EPiServer's documentation [https://world.episerver.com/documentation/developer-guides/CMS/add-ons/customizing-the-tinymce-editor-v2/default-settings/] 

• I created a 2 dimensional array for my custom colors 
  • alternate HEX value and color name
    • first string is the HEX color (no prepended #, just the HEX value)
    • second string is the color name

Custom Color Array

 string[][] customColors = new string[][]
     {
          new string[] { "004fa3"},
          new string[] { "Blue"},
          new string[] { "FFFFFF"},
          new string[] { "White"},
          new string[] { "303030"},
          new string[] { "Smoke"}
     };

• Then in the default configuration (or a clone)
  • in .AddPlugin(), include textcolor
  • in Toolbar(), include forecolor backcolor
  • add an AddSetting() with 2 items, the first is "textcolor_map" and the second is the variable for the array of colors, in my example: customColors
    
    

Default Configuration

 config.Default()
      .ContentCss("/static/css/wysiwyg.css")
      .AddSetting("extended_valid_elements", "a[*|onload|onClick|rel|aria-label]")
      .AddPlugin("epi-dnd-processor epi-link lists textcolor contextmenu image imagetools epi-image-editor link")
      .Toolbar("epi-link unlink anchor image epi-image-editor | forecolor backcolor | searchreplace", "bold italic underline sup sub | alignleft aligncenter alignright | nonbreaking fullscreen")
      .AddSetting("image_caption","true")
      .AddSetting("textcolor_map", customColors)
      .EnableImageTools();

Hope this is helpful for those that want to keep it in the default config or a clone of it.