ページに 3 つの動的に作成された div があります。ユーザーが 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>
編集
ボックスからボックスへとクリックすると、編集バーが消えて再表示されるようになりましたが、一度編集すると、そのボックスの上にバーを再表示することはできません - http://jsfiddle.net/j6FLa/8/