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.
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/]
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"}
};
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.
Hi,
When configuring tiny we can customize it like this
But how do I configure if I want to customize an callback for exampke color picker?
In JS:
In C# ?
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.