How to customize Kendo UI Editor for Hex color codes?

Question

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. I have searched a lot on their forum and SO as well, but couldn't find anything solid. Let me know if i'm missing something. Thanks

Answer 1

This isn't going to be an exact-code answer, as I'm not 100% clear of your exact requirement. I think this may be enough to get you on the right track though.

If you requirement is simpler and you only need to include custom colors in the backColor and foreColor tools, there is a way to customize the palette that is available. As shown in this dojo, you can customize the palette's like so:

<script>
$("#editor").kendoEditor({
    tools: [{
        name: "backColor",
              palette: ["#f0d0c9", "#e2a293", "#d4735e", "#65281a"],
            },
        { 
          name: "foreColor",
          palette: ["red", "green", "#d47eee", "#65281a"]
        } ]
});
</script>

However, I don't think that's what your requirement is exactly as you mention making it like MS Word. I'll leave it in though in case I'm wrong.

So, with that in mind. there is also the ability to create custom tools: Example 1 Example 2

    @(Html.Kendo().Editor()
          .Name("editor")

          //other settings trimmed for brevity

          .Tools(tools => tools
            .Clear()
            .CustomTemplate(ct => ct.Template("<label for='templateTool' style='vertical-align:middle;'>Background:</label> <select id='templateTool'><option value=''>none</option><option value='\\#ff9'>yellow</option><option value='\\#dfd'>green</option></select>"))
            .CustomButton(cb => cb.Name("custom").ToolTip("Insert a horizontal rule").Exec(@<text>
                        function(e) {
                        var editor = $(this).data("kendoEditor");
                        editor.exec("inserthtml", { value: "<hr />" });
                        }
            </text>))
     )

You can create a custom tool for both backColor and foreColor that consists of a Kendo ColorPicker in it's template. That along with using the events of the picker would allow the user to select any color or enter a HEX value, and upon clicking apply, you can then set the Editor backColor/foreColor appropriately.

Something along the lines of this, however you'd have to adapt it to work within a template:

        @(Html.Kendo().ColorPicker()
                .Name("hsv-picker")
                .Value("#22cc22")
                .Events(events => events
                    .Select("pickerSelect")
                    .Change("pickerChange")
                    .Open("pickerOpen")
                    .Close("pickerClose")
                )
        )

<script>
    function pickerChange(e) {
        console.log("Change in color palette :: " + e.value);
        //UPDATE EDITOR backcolor/forecolor with e.value here
    }
</script>

Telerik forum reference for the initial dojo