Jquery：如何为 contenteditable div 创建颜色选择器？答案

【问题标题】：Jquery: How can I create color picker for contenteditable div?Jquery：如何为 contenteditable div 创建颜色选择器？
【发布时间】：2018-07-24 11:33:14
【问题描述】：

我的问题是我该如何做到这一点，因为我正在尝试做“简单的所见即所得编辑器”，并且我成功地更改了字体的大小、重量等。但是我仍然遇到颜色选择问题。我有一张带有不同 bgcolors 的单元格的表格。我想为表中的每个 td 调用 document.execCommand 。我的问题是我的 contenteditable div 中的文本颜色没有改变。即使我尝试添加颜色的日志记录值，我也可以读取该值，但是当我尝试更改颜色时仍然没有发生任何事情。难道我做错了什么？我的一张桌子和我的代码：

<table>
    <tr>
    <td style="background-color: #ffffff"></td>
    <td style="background-color: #ffccc9"></td>
    </tr>
</table>

$("#font-menu-color td").on("click",(function(){document.execCommand('foreColor', false, $(this).css("background-color"));}));

【问题讨论】：

标签： javascript jquery contenteditable color-picker

【解决方案1】：

这里的问题似乎 jquery 以 RGB 格式返回颜色，但 foreColor 命令需要它以十六进制表示。引用mdn

前色

更改所选内容或插入点的字体颜色。这需要一个十六进制颜色值字符串作为值参数。

点击是mousedown+mouseup。在鼠标按下时，可编辑区域失去焦点。如果我们在 mousedown 时添加 preventDefault，可编辑区域保持焦点。

此处示例 - 此处示例 - jsfiddle.net/xpvt214o/474448

【讨论】：

即使我那样做也行不通：$("#font-menu-color td").on("click",(function(){document.execCommand('foreColor', false, "#ff0707");}));
我添加了 event.preventDefault();在鼠标按下。现在似乎工作了。我看到按下按钮的时间可编辑区域失去焦点。
它工作正常。但我认为我的也应该工作。也许某人可以解释更多？（顺便说一句。它使用 rgb 颜色）
nice :) 点击是 mousedown+mouseup。在鼠标按下时，可编辑区域失去焦点。如果我们在 mousedown 上添加 preventDefault，可编辑区域保持焦点。
编辑您的答案，因此我可以将其标记为有帮助，因为我无法将评论标记为答案