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?

Could you add a fiddle please? – user2718671 May 05 '14 at 14:10 — user2718671, May 05 '14 at 14:10

score 1 · Answer 1 · edited May 23 '17 at 12:28

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?

score 1 · Accepted Answer · answered May 18 '14 at 04:00

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.

score 0 · Answer 3 · answered May 15 '14 at 04:15

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

                    }

How to focus multiple selected line in contenteditable div in jquery

3 Answers3