如何在jquery的contenteditable div中聚焦多个选定的行答案

【问题标题】：How to focus multiple selected line in contenteditable div in jquery如何在jquery的contenteditable div中聚焦多个选定的行
【发布时间】：2014-06-21 09:38:22
【问题描述】：

当我尝试给出下面的代码以更改所选多行的margin-bottom 时，当时只有最后选择的行是更改其他行只是添加 p 标签而不是样式。可能是我无法集中所有选定的行。我为此尝试了下面的代码。

Javascript：

var selectedElement = null;
function singleline() {
    document.execCommand('formatblock',false,'p')
    selectedElement1 = window.getSelection().focusNode.parentNode;
    selectedElement1.style.marginBottom = '10px';                
}

HTML：

<input type="button" value="addMarginBottom" onclick="javascript:singleline();"/>
<div class="textcontent" contenteditable="true"></div>

我的问题是：如何聚焦所有选定的节点并添加这种样式？

【问题讨论】：

你能加个小提琴吗？

标签： jquery html contenteditable execcommand

【解决方案1】：

为单行和多行焦点添加CSS代码是-

           $(document).ready(function()
            {
                document.execCommand('formatblock',false,'p') 
              // for multiple line focus
                var selectedNodes = [];
                var sel = rangy.getSelection();
                for (var i = 0; i < sel.rangeCount; ++i) {
                    selectedNodes = selectedNodes.concat( sel.getRangeAt(i).getNodes() );
                    $(selectedNodes).css("height","40px");   

                }

                // single line focus
                 var  selectedElement = null;
                selectedElement = window.getSelection().focusNode.parentNode;
                $(selectedElement).css("height","40px");
});

它对我有用。希望您也能从中得到帮助。

【讨论】：

【解决方案2】：

我得到了答案。

 var selectedNodes = [];
                var sel = rangy.getSelection();
                for (var i = 0; i < sel.rangeCount; i++) {
                    selectedNodes = selectedNodes.concat( sel.getRangeAt(i).getNodes() );
                    $(selectedNodes).css("height","20px");

                    }

【讨论】：

【解决方案3】：

试试这个： http://jsfiddle.net/GYuBv/149/

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
        }

        var nNd = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nNd);
        return nNd.innerHTML;
    } catch (e) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}

$(function() {
    $('#changeColor').click( function() {
        var mytext = selectHTML();
        $('span').css({"margin-bottom":"10px"});
    });
});

是来自这里的答案：Can I get highlighted text with JQuery?

【讨论】：