Использование nicedit для редактирования динамически созданных divs

Question

У меня три динамически созданных divs на странице. когда пользователь нажимает на div, появляется кнопка «редактировать текст».

Когда пользователь нажимает кнопку редактирования текста, я хочу, чтобы в окне div появилась строка формата nicedit, чтобы пользователь мог редактировать текст.

Я создал большую часть кода ниже, но у меня проблема с удалением строки форматирования из одной коробки при редактировании другого окна. Также, как только ящик был отредактирован, он не может быть снова отредактирован.

Куда я иду не так?

Я создал jsfiddle, так что вы можете увидеть, что моя проблема - http://jsfiddle.net/j6FLa/7/

и вот код

<style> 
    .dragbox { 
     position:absolute; 
     width:10px; 
     height:25px; 
     padding: 0.0em; 
     margin:25px; 
     z-index:2 
    } 
    .textarea1 { 
     width: 300px; 
     height:75px; 
     padding: 0.5em; 
     z-index:3; 
     resize:none; 
    } 
    #content { 
     display: block; 
     position:absolute; 
     top:150px; 
     left:0px; 
     margin:auto; 
     z-index:1; 
    } 
    .editbutton { 
     background-color:#CCC; 
     width:50px; 
     height:20px; 
     font-size:10px; 
     z-index:1003; 
    } 
    #myNicPanel { 
     visibility:hidden; 
    } 
</style> 
<script> 
    var startleft = -100; 
    var myNicEditor; 

    for (var m = 1; m < 4; m++) { 
     startleft = +startleft + 200; 
     OldTextArea(m, 'draggable', 50, startleft, '150', '150', 'new textbox', m, '5', 'solid', '#ff0000', '5'); 
    } 

    function OldTextArea(i, id, top, left, width, height, content, zindex, borderwidth, borderstyle, bordercolor, padding) { 
     id = id + i; 
     var newdiv = document.createElement('div'); 
     newdiv.setAttribute('id', id); 
     newdiv.setAttribute('class', 'dragbox'); 
     newdiv.setAttribute('iterate', i); 
     newdiv.style.position = "absolute"; 
     newdiv.style.top = top + "px"; 
     newdiv.style.left = left + "px"; 
     newdiv.innerHTML = "<br><div id='div" + i + "' name='textarea[" + i + "]' class='textarea1' style='padding:" + padding + "px; border-width:" + borderwidth + "px; border-style:" + borderstyle + "; border-color:" + bordercolor + "; width:" + width + "px; height:" + height + "px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;'><span id='span" + i + "'>" + content + "</span></div></div>"; 
     document.getElementById("frmMain").appendChild(newdiv); 
     var top_button_left_pos = -75; 
     var area1 = ""; 
     var edit = document.createElement('input'); 
     edit.setAttribute('type', 'button'); 
     edit.setAttribute('value', 'edit this text'); 
     edit.setAttribute('class', 'editbutton'); 
     edit.style.position = "absolute"; 
     edit.style.top = "30px"; 
     edit.style.width = "75px"; 
     edit.style.left = +top_button_left_pos + "px"; 
     edit.style.float = "left"; 
     edit.style.visibility = "hidden"; 
     edit.onclick = function(e) { 
      if (area1 == "") { 
       myNicEditor = new nicEditor({ 
        buttonList: ['fontSize', 'fontFamily', 'fontFormat', 'bold', 'italic', 'underline', 'left', 'centre', 'right', 'justify', 'ol', 'ul', 'removeformat', 'indent', 'outdent', 'hr', 'forecolor', 'bgcolor', 'link', 'unlink'] 
       }); 
       myNicEditor.setPanel('myNicPanel'); 
       myNicEditor.addInstance('div' + i); 
       var contentclick = document.getElementById('span' + i); 
       contentclick.style.cursor = "select"; 
       contentclick.onmousedown = function(event) { 
        event.stopPropagation(); 
        e.cancelBubble = true; 
       }; 

       document.getElementById('myNicPanel').style.position = 'relative'; 
       document.getElementById('myNicPanel').style.top = +top + "px"; 
       document.getElementById('myNicPanel').style.left = +left + "px"; 
       document.getElementById('myNicPanel').style.visibility = 'visible'; 
       area1 = '1'; 
      } else { 
       area1 = ""; 
       document.getElementById('myNicPanel').style.visibility = 'hidden'; 
       myNicEditor.removeInstance('div' + i); 
      } 
     }; 
     newbr = document.createElement('BR'); 
     document.getElementById(id).appendChild(newbr); 
     document.getElementById(id).appendChild(edit); 

     $('.dragbox').click(function() { 
      $(".editbutton").css('visibility', 'hidden'); 
      $(this).find(".editbutton").css('visibility', 'visible'); 
     }); 
     $('.dragbox').focusout(function() { 
      $(".editbutton").css('visibility', 'hidden'); 
      $('#frmMain').find('#myNicPanel').style.visibility = 'hidden'; 
     }); 

    } 
</script> 

<div id="myNicPanel" style="width: 600px;"></div> 
<form id="frmMain" name="frmMain" enctype="multipart/form-data" action="dynamic_div19.php" method="post"> 
    <div id="content"></div> 
</form> 

EDIT

мне удалось получить редактирования баров чтобы исчезнуть и снова появиться при нажатии из окна в поле, но после его редактирования я не могу заставить панель снова появиться в этом поле - http://jsfiddle.net/j6FLa/8/

Answer 1

Мне удалось заставить его работать, удалив функцию focusout.