<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 class=\"editor\"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';
//buttons
var buttonsPanel = ['Bold','Italic','Through','Code','Link','Save'];
//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);
}
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';
//edit functions
for(var k = 0, le = buttonsPanel.length; k < le ; k++){
var elem = document.getElementById('b'+i+k+buttonsPanel[k]);
console.log(elem);
//add events
if(buttonsPanel[k]=='Bold'){
elem.onclick = function(){
frameDoc.execCommand("bold", null, "");
};
}
if(buttonsPanel[k]=='Italic'){
elem.onclick = function(){
frameDoc.execCommand("italic", null, "");
};
}
if(buttonsPanel[k]=='Through'){
elem.onclick = function(){
frameDoc.execCommand("strikeThrough", null, "");
};
}
if(buttonsPanel[k]=='Save'){
elem.onclick = function(){
console.log(frame);
};
}
}
console.log(frame);
console.log('-----------------------------------------------');
}
};
initEditor();
}
</script>
// The DOM Ready Event
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
function each(c,cb){for(var i=0,ln=c.length;i<ln;i++)cb(c[i],i)}
r(function() {
each(document.getElementsByClassName('itEditor'), function(editor) {
var containerEditor = document.createElement('div'),
panelEditor = document.createElement('div'),
iframe = '<iframe class=\"editor\"id=f_'+i+' src=\"editor.html\" frameborder=\"0\"></iframe>';
//configuration elem
containerEditor.className = 'containerEditor';
panelEditor.className = 'panelEditor';
// insert elem
editor.parentNode.insertBefore(containerEditor,editor);
containerEditor.appendChild(panelEditor);
containerEditor.appendChild(editor);
editor.style.display = 'none';
//buttons
var buttonsPanel = ['Bold','Italic','Through','Code','Link','Save'];
//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);
}
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';
//edit functions
for(var k = 0, le = buttonsPanel.length; k < le ; k++){
var elem = document.getElementById('b'+i+k+buttonsPanel[k]);
console.log(elem);
//add events
if(buttonsPanel[k]=='Bold'){
elem.onclick = function(){
frameDoc.execCommand("bold", null, "");
};
}
if(buttonsPanel[k]=='Italic'){
elem.onclick = function(){
frameDoc.execCommand("italic", null, "");
};
}
if(buttonsPanel[k]=='Through'){
elem.onclick = function(){
frameDoc.execCommand("strikeThrough", null, "");
};
}
if(buttonsPanel[k]=='Save'){
elem.onclick = function(){
console.log(frame);
};
}
}
console.log(frame);
console.log('-----------------------------------------------');
});
});