带有颜色样本的文本框

Question

我需要上面提到的功能。只是一个文本框，我可以应用颜色，如红色和黑色。我尝试了一个令人满意的div，但在退格时有一些问题我被卡住了。有人知道我怎么能做到这一点。

if(jQuery('#wheel_news_heading').length){
    jQuery('#postdivrich').prepend('<label class="description-heading">Overview :</label>');
    jQuery("#titlewrap").append('<label for="div_title" class="label_custom">Headline :</label><div id="div_title" placeholder="enter a title" >'+jQuery("#wheel_news_heading").val()+'</div><a id="custom_red" href="javascript:void(0)"><div class="custom_red"></div></a><a id="custom_black" href="javascript:void(0)"><div class="custom_black"></div></a>');
    jQuery('#div_title').prop('contentEditable',true);

    var title = jQuery('#wheel_news_heading').val();
    title = title.replace(/<span>/g,'')
    title = title.replace(/<\/span>/g,'')
    title = title.replace(/\&nbsp\;/g,'');
    title = title.replace(/<span class=\"fntBlack\">/g,'');
    title = title.replace(/<\/br>/g,'');
    title = title.replace(/<br>/g,'');
    title = title.replace(/<br\/>/g,'');
    title = title.replace(/<br \/>/g,'');
    jQuery("input[name='post_title']").val(title);
}
jQuery('#custom_red').on('click',function(){
    var selection = window.getSelection();
    if(selection == ''){
        return false;
    }else{
        var html = getSelectionHtml();
        html = html.replace(/<span>/g,'')
        html = html.replace(/<\/span>/g,'')
        html = html.replace(/&nbsp;/g,'');
        html = html.replace(/<span class=\"fntBlack\">/g,'');
        html = html.replace(/<\/br>/g,'');
        html = html.replace(/<br\/>/g,'');
        html = html.replace(/<br \/>/g,'');
        html = html.replace(/<br>/g,'');
        var w = getSelection().getRangeAt(0);
        w.deleteContents();
        var newNode = document.createElement("span");
        newNode.appendChild(document.createTextNode(html));
        w.insertNode(newNode);
        jQuery('#wheel_news_heading').val(jQuery('#div_title').html());
    }
});
jQuery('#custom_black').on('click',function(){
    var html = getSelectionHtml();
    var selection = window.getSelection();
    if(selection == ''){
        return false;
    }else {
        var html = getSelectionHtml();
        html = html.replace(/<span>/g,'')
        html = html.replace(/<\/span>/g,'')
        html = html.replace(/\&nbsp\;/g,'');
        html = html.replace(/<span class=\"fntBlack\">/g,'');
        html = html.replace(/<\/br>/g,'');
        html = html.replace(/<br\/>/g,'');
        html = html.replace(/<br \/>/g,'');
        html = html.replace(/<br>/g,'');
        var w = getSelection().getRangeAt(0);
        w.deleteContents();
        var newNode = document.createElement("span");
        newNode.setAttribute('class',"fntBlack");
        newNode.appendChild(document.createTextNode(html));
        //var newNode = document.createTextNode(html);
        w.insertNode(newNode);
        jQuery('#wheel_news_heading').val(jQuery('#div_title').html());
    }
});
jQuery('#div_title').on('keyup',function(){
    jQuery('#wheel_news_heading').val(jQuery('#div_title').html());
    var title = jQuery('#div_title').html();
    title = title.replace(/<span>/g,'')
    title = title.replace(/<\/span>/g,'')
    title = title.replace(/\&nbsp\;/g,'');
    title = title.replace(/<span class=\"fntBlack\">/g,'');
    title = title.replace(/<\/br>/g,'');
    title = title.replace(/<br>/g,'');
    title = title.replace(/<br\/>/g,'');
    title = title.replace(/<br \/>/g,'');
    jQuery("input[name='post_title']").val(title);
}); 


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;
}

-

由于