How to dynamically change the line height of each line in content editable div in php jquery?

Question

I want to make a rich text editor for my website.I used content editable div for it. I was done maximum thing of my editor like bold italic align etc. Now I want to set several line spacing for it.When i will put the cursor in a line, then i click any specific line height from drop down menu,only the line height will be changed, no other line will be changed. I have no any idea about how to do this. So please help me. Here is the basic idea of it. html code

<select>line Space
    <option>20px</option>
    <option>80px</option>
    <option>100px</option>
    <option>200px</option>
</select>
<button id="bold" onclick="document.execCommand('bold')">Bold</button>



<div id="textcontent" contenteditable ="true"></div>

CSS code

#textcontent{
  line-height=10px;

    min-height: 760px;

    padding: 50px;
    width: 650px;
    word-wrap: break-word;
    max-height: 900px;
    background-color: #ffffff;
    outline: none;

    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);

    background-clip: padding-box;
}

Answer 1

This is work for me. So try this may be it will be also helpful for you.(single and multiple node).

 <script>
       var selectedElement = null;

        function singleline() {
            document.execCommand('formatblock', false, 'p')
            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");       
            }
            selectedElement = window.getSelection().focusNode.parentNode;
            $(selectedElement).css("height", "20px");              
        }
 </script>

Answer 2

Try like this:

<select id="lineHeight" onchange="changeLineHeight(this)">
<option value="20px">20px</option>
<option value="80px">80px</option>
<option value="100px">100px</option>
<option value="200px">200px</option>
</select>
<button id="bold" onclick="doThis()">Bold</button>

<div id="textcontent" contenteditable ="true" STYLE="height:300px; background-color:white; overflow:auto; width:100%;">

</div>
<script>
    function changeLineHeight(sel) {
        var t = document.getElementById('textcontent');
        t.style.lineHeight = sel.value;
    }
</script>

Example: http://jsbin.com/niwumifo