如何为十六进制颜色代码自定义 Kendo UI 编辑器？答案

【问题标题】：How to customize Kendo UI Editor for Hex color codes?如何为十六进制颜色代码自定义 Kendo UI 编辑器？
【发布时间】：2020-08-04 13:54:38
【问题描述】：

我正在开发一个使用 Kendo ui 的 ASP.NET MVC 应用程序。我们在其中使用了 Kendo UI 编辑器来处理富文本。用途如下：

@(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")
        )
    )

如果我们可以像在 Microsoft Word 字体颜色选择器中那样使用 HEX 代码以某种方式自定义它以显示自定义颜色，这是一个要求。我在他们的论坛和 SO 上也进行了很多搜索，但找不到任何可靠的东西。让我知道我是否遗漏了什么。谢谢

【问题讨论】：

标签： kendo-ui editor kendo-asp.net-mvc rich-text-editor kendo-editor

【解决方案1】：

这不会是一个确切的代码答案，因为我不是 100% 清楚您的确切要求。不过，我认为这可能足以让您走上正轨。

如果您的要求更简单，并且您只需要在 backColor 和 foreColor 工具中包含自定义颜色，则有一种方法可以自定义可用的调色板。如this dojo所示，您可以像这样自定义调色板：

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

但是，我认为您的要求与您提到的使它像 MS Word 一样。万一我错了，我会把它留在里面。

所以，考虑到这一点。还可以创建自定义工具：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>))
     )

您可以为 backColor 和 foreColor 创建一个自定义工具，在其模板中包含 Kendo ColorPicker。这与使用选择器的事件一起允许用户选择任何颜色或输入 HEX 值，并且在单击应用后，您可以适当地设置编辑器的背景颜色/前颜色。

与此类似，但是您必须对其进行调整以在模板中工作：

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

【讨论】：