Решил написать небольшой текстовый редактор wysiwyg. Я думаю проблема с событиями, если отслеживать каждую итерацию то работает редактор только тот который создался на этой итерации. События перевешиваются? куда все остальные деваются?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
iframe{
width:100px;
height:100px;
border:1px solid #555;
}
.panelEditor{
width:100px;
min-height: 20px;
border:1px solid red;
}
</style>
</head>
<body>
<header>
<textarea name="" class="itEditor" id="" cols="30" rows="10"></textarea>
</header>
<main>
<textarea name="" class="itEditor" id="" cols="30" rows="10"></textarea>
</main>
<footer>
<textarea name="" class="itEditor" id="" cols="30" rows="10"></textarea>
</footer>
<script>
onload=function(){
// funcitons
var initEditor = function(){
var editorPlace = document.getElementsByClassName('itEditor');
for(var i = 0 , len = editorPlace.length; i < len; i++){
var containerEditor = document.createElement('div'),
panelEditor = document.createElement('div'),
iframe = '<iframe id=f_'+i+' src=\"editor.html\" frameborder=\"0\"></iframe>';
//configuration elem
containerEditor.className = 'containerEditor';
panelEditor.className = 'panelEditor';
// insert elem
editorPlace[i].parentNode.insertBefore(containerEditor,editorPlace[i]);
containerEditor.appendChild(panelEditor);
containerEditor.appendChild(editorPlace[i]);
editorPlace[i].style.display = 'none';
//inner panel
var buttonsPanel = ['Bold','Italic','Through','Code','Link'];
//create buttons
for(var j = 0, l = buttonsPanel.length; j < l ; j++){
var elem = document.createElement('button');
elem.innerHTML = buttonsPanel[j];
elem.className = 'panel'+buttonsPanel[j];
elem.id = 'b'+i+j+buttonsPanel[j];
panelEditor.appendChild(elem);
// //add events
// if(buttonsPanel[j] == 'Bold'){
// elem.id = 'd23';
// }
}
containerEditor.innerHTML = iframe + containerEditor.innerHTML;
var frame = containerEditor.childNodes[0],
isIE = /*@cc_on!@*/false;
// access to frame value
var frameDoc = isIE ? frame.contentWindow.document : frame.contentDocument;
frameDoc.open();
frameDoc.write('<html><head></head><body> </body></html>');
frameDoc.close();
frameDoc.designMode = 'on';
//add edit functions
for(var k = 0, le = buttonsPanel.length; k < le ; k++){
var elem = document.getElementById('b'+i+k+buttonsPanel[k]);
console.log(elem);
elem.onclick = function(){
frameDoc.execCommand("italic", null, "");
};
}
console.log(frame);
console.log('-----------------------------------------------');
}
};
initEditor();
}
</script>
</body>
</html>
Средний