如何为jQuery版Kendo Editor实现选中文本背景色重置功能？

针对你的需求，有两种可行的实现方式，下面分别给出具体代码和步骤：

方案一：在backcolor调色板中添加透明选项 #

通过扩展backColor工具的调色板，添加「透明」选项，点击时移除选中文本的背景色样式：

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    tools: [
        { name: "foreColor" },
        {
            name: "backColor",
            palette: [
                // 保留原有默认颜色
                "#ffffff", "#000000", "#eeece1", "#1f497d", "#4f81bd", "#c0504d",
                "#9bbb59", "#8064a2", "#4bacc6", "#f79646", "#ffff00", "#f2f2f2",
                "#7f7f7f", "#ddd9c3", "#c6d9f0", "#dbe5f1", "#f2dcdb", "#ebf1dd",
                "#e5e0ec", "#dbeef3", "#fdeada", "#fff2ca", "#fff",
                // 添加自定义透明选项
                { text: "透明", value: "transparent" }
            ],
            // 自定义点击处理逻辑
            exec: function(e) {
                var editor = this;
                var value = e.value;
                if (value === "transparent") {
                    // 精准移除背景色样式
                    editor.exec("removeFormat", {
                        attributes: ["style"],
                        styles: ["background-color"]
                    });
                } else {
                    // 执行原有背景色设置逻辑
                    editor.exec("backColor", { value: value });
                }
            }
        }
    ]
});
</script>

方案二：添加独立的重置背景色按钮 #

如果需要单独的重置按钮，可以自定义工具按钮，点击时直接清除选中文本的背景色：

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    tools: [
        { name: "foreColor" },
        { name: "backColor" },
        // 自定义重置背景色按钮
        {
            name: "clearBackColor",
            tooltip: "重置背景色",
            icon: "eraser", // 可替换为Kendo内置图标或自定义样式类
            exec: function() {
                var editor = this;
                editor.exec("removeFormat", {
                    attributes: ["style"],
                    styles: ["background-color"]
                });
            }
        }
    ]
});
</script>

两种方案都能满足需求，你可以根据界面布局和交互偏好选择适配的方式。

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