如何为Hex颜色代码自定义Kendo UI编辑器

Question

我正在开发一个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上搜索了很多，但找不到任何可靠的东西。如果我遗漏了什么，请告诉我。感谢

Answer 1

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

如果你的要求更简单，并且你只需要在backColor和foreColor工具中包括自定义颜色，那么有一种方法可以自定义可用的调色板。如这个dojo所示，您可以自定义调色板，如下所示：

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

然而，我不认为这正是你的要求，正如你提到的那样，让它像MS Word。不过我会把它留着，以防我错了。

所以，考虑到这一点。还有创建自定义工具的能力：示例1示例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值，单击应用后，您可以适当地设置编辑器backColor/foreColor。

类似的东西，但是你必须调整它以在模板中工作：

@(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论坛参考最初的dojo