我在一个页面上有三个动态创建的 div。当用户点击一个 div 时，会出现一个“编辑文本”按钮。
当用户单击编辑文本按钮时，我希望 nicedit 格式栏出现在 div 上，以便用户可以编辑文本。
我已经创建了下面的大部分代码，但是在编辑另一个框时从一个框中删除格式栏时遇到问题。同样，一旦一个框被编辑，它就不能再次被编辑。
我哪里错了？
我创建了一个 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>
编辑
当从一个框到另一个框单击时，我已经设法让编辑栏消失并重新出现，但是一旦编辑我就无法让该栏重新出现在那个框上 - http://jsfiddle.net/j6FLa/8/