How to focus multiple selected line in contenteditable div in jquery

Question

When i try to given below code for change margin-bottom of selected multiple line, at that time only last selected line was change other line just add p tag but not the style. May be i can not focus all selected line.I tried below code for this.

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>

My problem is: How can i focus all selected node and add this style?

Answer 1

Add CSS for single line and multiple line focus the code is -

           $(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");
});

It works for me. Hopefully you also get help from this.

Answer 2

Try this: 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"});
    });
});

Was an answer from here: Can I get highlighted text with JQuery?

Answer 3

I got the answer.

 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");

                    }