Customize foreColor/backColor in editor toolbar

[Hamza]

Hello, i'm working on kendo UI for jQuery editor and i have a question about forecolor and backcolor in the toolbar.
I'd like to know if it's possible to display 2 modes in same time: palette and gradient, like in this colorPicker example : 
https://dojo.telerik.com/EWahuGuM

Thank you.

[Neli]

Hello Hamza,

The Editor does not have a built-in flat ColorPicker for its fontColor or backColor tools. You could achieve the desired behavior by creating a custom tool. Use tools.template to add elements from which to initialize the custom tools:

 $("#editor").kendoEditor({        
        tools: [          
          {
            name: "text-btn",
            template: "<span>ForeColor: </span><div id='foreColorPicker' class='picker'></div>"
          },
          {
            name: "text-btn2",
            template: "<span>BackColor: </span><div id='backColorPicker' class='picker'></div>"
          }
        ]
      });

And the ColorPickers initialization:

      $("#foreColorPicker").kendoColorPicker({
        preview: false,
        value: "#000",
        view: "palette",
        views: ["gradient", "palette"],
        change: function (e) {
          $("#editor").data("kendoEditor").exec("foreColor", { value: e.value })
        }
      });

      $("#backColorPicker").kendoColorPicker({
        preview: false,
        value: "#e15613",
        view: "gradient",
        views: ["gradient", "palette"],
        change: function (e) {
          $("#editor").data("kendoEditor").exec("backColor", { value: e.value })
        }
      });

Here is a Dojo example where the approach is demonstrated: https://dojo.telerik.com/@NeliKondova/ApUSEcOP

I hope this helps.

Regards,
Neli
Progress Telerik