点击时使用execCommand

Question

我试图使当前选定的节点蓝色的字体颜色。目前，我有以下代码，它只在高亮显示并单击时使文本变为蓝色。

当我单击文本时，整个节点如何能够使用execCommand更改其字体颜色？

$('[contenteditable]').bind('click', function() {
    currentSentence = window.getSelection().focusNode;
    caretPosition = window.getSelection().focusOffset;

    document.execCommand('ForeColor', false, '000');
});

Answer 1

focusNode将只为您提供容器节点的焦点选择，这是最近移动的选择边界。如果这是您想要的，您可以保存所选内容，将选择设置为包含focusNode，然后调用document.execCommand()。如果您需要恢复选择，这是一个更困难的问题。

请注意，所有这些都不能在IE < 9中工作，IE不支持window.getSelection()或Range，而是有一个完全不同的API。

jsFiddle：http://jsfiddle.net/timdown/J6fAa/

示例代码：

$('[contenteditable]').bind('click', function() {
    var sel = window.getSelection();
    var focusNode = sel.focusNode;
    var range = document.createRange();
    range.selectNode(focusNode);
    sel.removeAllRanges();
    sel.addRange(range);
    document.execCommand('ForeColor', false, '000');
});