How to add class or id or CSS style in execCommand formatBlock 'p' tag?

If you want to add id or class for CSS in content editable div, then you will use below code---

          <script>
             function CssFnctn()
                {
                  document.execCommand('formatblock', false, 'p')
                  var listId = window.getSelection().focusNode.parentNode;
                  $(listId).addClass("oder2");
                 }
           </script>


.oder2
    {
       padding-left: 3em;
    }

There are many ways to do it. Just use execCommand 'insertHTML' instead to replace selected text with wrapped code. Like this:

selection = window.getSelection().toString();
wrappedselection = '<span class="accent" style="somestyle">' + selection + '</span>';
document.execCommand('insertHTML', false, wrappedselection);

This will remove breaklines, tags like <b>, <i> and other intext-html-formatting - to keep them you need smth like this (thx to post):

selection = window.getSelection().getRangeAt(0).cloneContents();
span = document.createElement('span');
span.appendChild(selection);
wrappedselection = '<span class="accent1">'+span.innerHTML+'</span>';
document.execCommand('insertHTML', false, wrappedselection);

This insertHTML does not works with IE. Check Documentation https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand


I got the solution.

Javascript:

function line(){

              window.execCommand('formatblock', false, 'p');
                selectedElement = window.getSelection().focusNode.parentNode;
                selectedElement.style.marginBottom = '100px';
            }

HTML

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

This is work perfectly for me. But i can not make jsfiddle right now. This is work for one line fine but not multiple line.