TinyMce custom settings. Addsetting( ) with callback

Joakim Olsson

Vote:

Hi,

When configuring tiny we can customize it like this

context.Services.Configure(config =>
{
    config.Default()
        .AddSetting("media_dimensions", false);
});

But how do I configure if I want to customize an callback for exampke color picker?

In JS:

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "textcolor colorpicker",
  toolbar: "forecolor backcolor"
  color_picker_callback: function(callback, value) {
    callback('#FF00FF');
  }
});

In C# ?

context.Services.Configure(config =>
{
    config.Default()
        .AddSetting("media_dimensions", false)
        .AddSetting("color_picker_callback", );
});

I tried returning an javascript function as string for "color_picker_callback" but the TinyMce editor is then throwing an error. I guess it wont work to return an javascript function as a string, since it wont work to set values as "true" or "false" as strings.

#196927

Edited, Sep 17, 2018 14:00

Goran Solomonovic

Vote:

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. :)

#197058

Edited, Sep 20, 2018 12:01

Vote:

@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.

#197073

Sep 20, 2018 19:28

Grzegorz Wiecheć

Vote:

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 () {}
        });
    }
});

#197088

Sep 21, 2018 8:43

Vote:

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).

#197089

Sep 21, 2018 8:50

Grzegorz Wiecheć

Vote:

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.

#197090

Sep 21, 2018 9:26

Vote:

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.

#197113

Edited, Sep 22, 2018 10:09

Joakim Olsson

Vote:

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

#197160

Sep 25, 2018 9:25

Leslie R

Vote:

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.

#201962

Edited, Mar 08, 2019 15:20