Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make Numbered and bulleted list in HTML Editor with JavaScript

    • 0
    • 5
    • 3
    • 2
    • 2
    • 0
    • 0
    • 0
    • 1.50k
    Comment on it

    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;
    }
    

 2 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: