1

我正在开发一个使用 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 上也进行了很多搜索，但找不到任何可靠的东西。让我知道我是否遗漏了什么。谢谢

4

1 回答 1

0

这不会是一个确切的代码答案，因为我不是 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 论坛参考

于 2020-08-04T17:00:53.973 回答