在MVC的Kendo EditorFor中使用支持Hex输入的颜色选择器

可以将支持直接输入Hex值的ColorPicker集成到Kendo Editor的文本/背景色设置中，具体实现步骤如下：

1. 配置Editor并替换默认颜色工具 #

在MVC视图中，初始化EditorFor时，隐藏默认的foreColor和backColor工具，添加自定义按钮：

@Html.Kendo().EditorFor(model => model.Content)
    .Name("editor")
    .Tools(tools => tools
        .Clear()
        // 保留你需要的其他工具
        .CustomButton(btn => btn
            .Name("customForeColor")
            .Tooltip("文本颜色")
            .Icon("fore-color")
        )
        .CustomButton(btn => btn
            .Name("customBackColor")
            .Tooltip("背景颜色")
            .Icon("back-color")
        )
    )

2. 初始化ColorPicker并关联Editor命令 #

在页面的JavaScript部分，创建支持Hex输入的ColorPicker实例，并绑定自定义按钮的点击事件：

$(document).ready(function() {
    // 初始化文本颜色选择器
    const foreColorPicker = $("#foreColorPicker").kendoColorPicker({
        format: "hex",
        input: true, // 显示Hex输入框
        value: "#000000",
        change: function(e) {
            const editor = $("#editor").data("kendoEditor");
            editor.exec("foreColor", { value: e.value });
        }
    }).data("kendoColorPicker");

    // 初始化背景颜色选择器
    const backColorPicker = $("#backColorPicker").kendoColorPicker({
        format: "hex",
        input: true,
        value: "#ffffff",
        change: function(e) {
            const editor = $("#editor").data("kendoEditor");
            editor.exec("backColor", { value: e.value });
        }
    }).data("kendoColorPicker");

    // 绑定自定义按钮点击事件，显示对应颜色选择器
    $("#editor").find(".k-i-fore-color").parent().click(function(e) {
        e.preventDefault();
        foreColorPicker.open();
    });

    $("#editor").find(".k-i-back-color").parent().click(function(e) {
        e.preventDefault();
        backColorPicker.open();
    });
});

// 在页面中添加隐藏的ColorPicker容器
<div id="foreColorPicker" style="display:none;"></div>
<div id="backColorPicker" style="display:none;"></div>

3. 关键配置说明 #

• format: "hex"：指定ColorPicker使用十六进制格式显示颜色
• input: true：启用Hex输入框，支持直接粘贴或输入Hex值
• 通过editor.exec()方法调用Editor的原生命令，实现颜色应用

这样配置后，点击Editor中的文本/背景色按钮，会弹出支持Hex输入的ColorPicker，用户可以直接输入或粘贴Hex值，和旧编辑器的使用体验一致。

内容的提问来源于stack exchange，提问作者zakparks31191