Узнать положение курсора в iframe с включённым дезайн модом?

Question

Andrey Dyrkov @VIKINGVyksa

front-end developer

JavaScript

Узнать положение курсора в iframe с включённым дезайн модом?

Вообще стоит задача создать небольшой редактор, в нём должна быть функция вставки программного кода,я могу щас только добавить что-то только в конец, хотелось бы добавлять код туда где находиться курсор. Вот исходный код, он не имеет никакой ценности ведь он не на должном уровне)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	iframe{
		width:1000px;
		height:200px;
		border:1px solid #555;
	}
	.panel-editor{
		width:1000px;
		min-height: 20px;
		border:1px solid red;
		margin-bottom: 30px;
	}
	pre,
	.editCode{
		padding:5px 0;
		background:#888 !important;
		color:#fff;
	}
	</style>
</head>
<body>

	<header>
		<textarea name="" class="itEditor" id="editor2" cols="30" rows="10"></textarea>
	</header>
	<main>
		<textarea name="" class="itEditor" id="editor" cols="30" rows="10"></textarea>
	</main>
	<footer>
		<textarea name="" class="itEditor" id="" cols="30" rows="10"></textarea>
	</footer>

	<script>
		onload=function(){
			//add property for obj
			var editors = document.getElementsByClassName('itEditor');
			for(var i = 0 , l = editors.length; i<l;i++){
				editors[i].initEditor = function(){

					//create user interface

					var container = document.createElement('div'),//create conteiner for editor
						panel = document.createElement('div'),//create editor panel
						iframe = '<iframe class=\"#\"id=\"f_\" src=\"editor.html\" frameborder=\"0\"></iframe>';// create editor place

					//set property

					container.className = 'container-editor';
					panel.className = 'panel-editor';

					//join interface

					this.parentNode.insertBefore(container,this);
					container.appendChild(this);
					container.appendChild(panel);
					this.style.display = 'none';

					//add iframe

					container.innerHTML = iframe + container.innerHTML;

					//find this frame

					var frame = container.childNodes[0];

					// create button  of  panel

					var buttons =  ['Bold',
									'Italic',
									'Through',
									'Code',
									'Link'
									],
									//find panel
									panelEditor = container.childNodes[2];

					for(var b = 0, le = buttons.length; b < le ; b++){
						var button = document.createElement('button');//create panel of buttons
						button.innerHTML = buttons[b];
						button.className = 'panel-'+buttons[b];
						panelEditor.appendChild(button);// join button to panel
					}

					// fing frame content

					var frameDoc = frame.contentWindow.document || frame.contentWindow;
					frameDoc.open();
					frameDoc.write('<html><head><style>.editCode{background:#888;color:#fff}</style></head><body></body></html>');
					frameDoc.close();

					//set designMode 

					frameDoc.designMode = 'on';

					//add event to buttons on panel

					var setEventPanel = function(){
						for(var bb=0, bl = buttons.length; bb<bl;bb++){
							//find button
							var elem = panelEditor.childNodes[bb];

							//controllers

							if(elem.className=='panel-Bold'){
								addEvent(elem,'click',setBold);
							}

							if(elem.className=='panel-Italic'){
								addEvent(elem,'click',setItalic);
							}

							if(elem.className == 'panel-Through'){
								addEvent(elem,'click',setThrought);
							}

							if(elem.className == 'panel-Code'){
								addEvent(elem, 'click',addCode);
							}

							//functions

							function setBold(){
								frameDoc.execCommand('bold', null, '');
							}

							function setItalic(){
								frameDoc.execCommand('italic', null, '');
							}

							function setThrought(){
								frameDoc.execCommand('strikeThrough', null, '');
							}

							function addCode(){
								var html = frameDoc.childNodes[0],
									value = html.childNodes[1].innerHTML;
									strCode = '<pre class="editCode"><code><ol><li></li></ol></code></pre><br>';
									value=value+strCode;
									(frameDoc.childNodes[0]).childNodes[1].innerHTML = value;
									alert(value);
							}

							function updateTextArea(value){
								alert(this);
							}
						}
					}
					setEventPanel();

				};
				editors[i].initEditor();
			}
			//functions events
			//add event
			function addEvent(obj, type, fn){if (obj.addEventListener){obj.addEventListener( type, fn, false );} else if(obj.attachEvent) {obj.attachEvent( 'on'+type, fn );} else {obj['on'+type] = fn;}}
			
			// remove event
			function removeEvent(obj, type, fn){if (obj.removeEventListener) {obj.removeEventListener( type, fn, false );} else if (obj.detachEvent){obj.detachEvent( 'on'+type, obj[type+fn] );} else {obj['on'+type] = null;}}

			//add code here

		}
	</script>
</body>
</html>

Вся суть в функции добавления кода называется соответственно)