How to get Hex Code color in Kendo UI Editor ForeColors?

[Harris]

I'm working on an ASP.NET MVC application which is using Kendo ui in it. We have used a Kendo UI Editor in it for rich texts. It is being used as follows:

@(Html.Kendo().Editor()
   .Name("textControl-Source")
   .Tools(tools => tools.Clear()
   .Bold().Italic().Underline().Strikethrough()
   .FontSize().FontColor().BackColor()
   .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
   .InsertUnorderedList().InsertOrderedList().Indent().Outdent()
   .SubScript().SuperScript())
   .HtmlAttributes(new { style = "height:240px;width:98.5%", data_mintextlength = "1" })
          .Events(events => events
          .Change("mediaBoardEditNS.textControlChange")
          .Select("mediaBoardEditNS.textControlSelect")
        )
    )

 

There is a requirement if we can somehow customize it to show custom colors by using HEX codes like we can do in Microsoft Word font color picker.

Such feature is present in color picker as present here is custom colors: https://demos.telerik.com/aspnet-mvc/colorpicker

I have searched a lot on Telerik forum and SO as well, but couldn't find anything solid. Let me know if i'm missing something. Thanks

[Petar]

Hi Harris,

The targeted functionality can only be implemented using the JavaScript version of the Editor component. Here is a Dojo example demonstrating how we can configure a ColorPicker inside the Editor to work with HEX codes. 

The Editor in the example is defined as follows:

$(".editor").kendoEditor({
    tools: [
      {
        name: "foreColor",
        palette: null
      },
      {
        name: "backColor",
        palette: [
                   "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
                  "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
                  "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
                  "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
                  "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"]

      }
    ]
  });

The code in yellow initializes a ColorPicker with a HEX code input field. The code in Green defines a component with pre-defined colors.

I hope the provided example will help you implement the targeted functionality in the application you are working on.

Regards,
Petar
Progress Telerik