Question

我正在尝试使用jquery colorpicker从div更改所选文本的文本颜色。这是我的代码

var colorpickerOptions = {

  select: function (event, color) {
    var color_in_hex_format = color.formatted;
    document.execCommand('foreColor', false, '#'+color_in_hex_format);
    $('.colorpicker').css('background-color','#'+color_in_hex_format);
}    

,inline: false
};

$('.colorpicker').colorpicker(colorpickerOptions);

但是当我从colorpicker中选择一种颜色时，document.execCommand('foreColor', false, '#'+color_in_hex_format);无法正常工作。为什么？

以下是演示代码FIDDLE

Answer 1

您可以使用span元素包装所选文本并为该范围添加颜色，您需要将所选代码保存在div上的mouseup上，然后使用.html（）将文本换成span。

获取所选文字代码 code from TimDown

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

在鼠标左键保存所选文字

var selection = "";
$('[contenteditable]').on('mouseup',function(){
selection = getSelectionHtml();

});

使用范围换行文字

    $('[contenteditable]').html(function(){
        return this.textContent.replace(selection,'<span style="color:#'+color_in_hex_format+'">'+selection+'</span>');
    });

DEMO

另一个版本

如果您想更改多个选择的颜色，可以像这样更改html

    $('[contenteditable]').html(html.replace(selection,'<span style="color:#'+color_in_hex_format+'">'+selection+'</span>'));

DEMO

Answer 2

根据mozilla documentation about execCommands：

foreColor:
Changes a font color for the selection or at the insertion point. This requires a color value string to be passed in as a value argument.

因此，在您的代码中，即使您从contenteditable中选择了任何内容，一旦您单击colorpicker按钮，您的选择就会丢失，因此您的execCommand不起作用。您可以使用控制台检查所选文本，并显示未选择任何文本。

以下是代码测试：

var colorpickerOptions = {
select: function (event, color) {
    var color_in_hex_format = color.formatted;
    console.log(window.getSelection().toString());//Checks for selected text
    //document.execCommand('foreColor', false, '#'+color_in_hex_format);
    $('[contenteditable]').css('color', '#' + color_in_hex_format);
    $('.colorpicker').css('background-color', '#' + color_in_hex_format);
},inline: false
};
$('.colorpicker').colorpicker(colorpickerOptions);

因此，简单的解决方案是应用color css来完成div，如：

$('[contenteditable]').css('color', '#' + color_in_hex_format);

将execCommand行替换为上述行。演示：http://jsfiddle.net/lotusgodkk/6V7hL/144/

PS：我没有向你提出问题。

如何使用colorpicker更改所选文本颜色

2 个答案: