Hello all,

Working with HTML Editor we wanted to give a functionality to user where he can select any element from the html editor and can convert it into Numbered and Bulleted list.

We added this functionality by following these steps : -

1.Firstly we add two button in HTML Editor where user can clicks on add Numbered and Bulleted list In our HTML page we have :

<div id="HTMLEditor" style="border:1px solid black;" contenteditable="true">
<ul>
<li><button onclick="InsertList('orderedlist')">Numbered List</button></li>
<li><button onclick="InsertList('unorderedlist')">Bulleted List</button></li>
</ul>
</div>

1. Now to change the selection portion of the user from the HTML Editor, to Numbered and Bulleted list we have following code packet.

function InsertList(cmd) {
var currentNodes = document.getSelection ();
if (currentNodes.length > 0) {
var $el = '';
var tmpListOpen = (cmd == 'orderedlist') ? '<ol>' : '<ul>';
var tmpListClose = (cmd == 'orderedlist') ? '</ol>' : '</ul>'';
for (var i = 0; currentNodes.length > i; i++) {
     if (currentNodes[i].nodeName !== undefined) {
          $el = $(currentNodes[i]);
          var prevEle = $el.prev();
          if (currentNodes[i].nodeName == 'P' || currentNodes[i].nodeName == 'H2' || currentNodes[i].nodeName == 'DIV')
            if (prevEle.length > 0 && prevEle[0].nodeName == 'UL') {
                 $el.wrap("<li></li>");
                 $(prevEle[0]).append($el.parent());
            }
            else{
             $el.wrap("" + tmpListOpen + "<li> </li>" + tmpListClose + "");
             }
             if (currentNodes[i].nodeName == 'INLINE') {
                if (currentNodes[i].id != "")
                   if (prevEle.length > 0 && prevEle[0].nodeName == 'UL') {
                       $el.wrap("<li></li>");
                       $(prevEle[0]).append($el.parent());
                   }
                   else{
                        $el.wrap("" + tmpListOpen + "<li> </li>" + tmpListClose + "");
                   }
          }
      }
      else if (currentNodes[i].context !== undefined) {
                $el = $(currentNodes[i][i]);
                if (currentNodes[i][i].nodeName == 'P')
                $el.wrap("" + tmpListOpen + "<li> </li>" + tmpListClose + "");
       }
    }
  }
 return true;
}