whole_func_string: function(html, topNode){
  			var parent, secondParent, _childI, nodes, startIndex, startNodes, endNodes, i, lastNode, _tempFrag;
  			var element = angular.element("<div>" + html + "</div>");
  			var range = rangy.getSelection().getRangeAt(0);
  			var frag = _document.createDocumentFragment();
  			var children = element[0].childNodes;
  			var isInline = true;
  
  			if(children.length > 0){
  				// NOTE!! We need to do the following:
  				// check for blockelements - if they exist then we have to split the current element in half (and all others up to the closest block element) and insert all children in-between.
  				// If there are no block elements, or there is a mixture we need to create textNodes for the non wrapped text (we don't want them spans messing up the picture).
  				nodes = [];
  				for(_childI = 0; _childI < children.length; _childI++){
  					if(!(
  						(children[_childI].nodeName.toLowerCase() === 'p' && children[_childI].innerHTML.trim() === '') || // empty p element
  						(children[_childI].nodeType === 3 && children[_childI].nodeValue.trim() === '') // empty text node
  					)){
  						isInline = isInline && !BLOCKELEMENTS.test(children[_childI].nodeName);
  						nodes.push(children[_childI]);
  					}
  				}
  				for(var _n = 0; _n < nodes.length; _n++) lastNode = frag.appendChild(nodes[_n]);
  				if(!isInline && range.collapsed && /^(|<br(|\/)>)$/i.test(range.startContainer.innerHTML)) range.selectNode(range.startContainer);
  			}else{
  				isInline = true;
  				// paste text of some sort
  				lastNode = frag = _document.createTextNode(html);
  			}
  
  			// Other Edge case - selected data spans multiple blocks.
  			if(isInline){
  				range.deleteContents();
  			}else{ // not inline insert
  				if(range.collapsed && range.startContainer !== topNode){
  					if(range.startContainer.innerHTML && range.startContainer.innerHTML.match(/^<[^>]*>$/i)){
  						// this log is to catch when innerHTML is something like `<img ...>`
  						parent = range.startContainer;
  						if(range.startOffset === 1){
  							// before single tag
  							range.setStartAfter(parent);
  							range.setEndAfter(parent);
  						}else{
  							// after single tag
  							range.setStartBefore(parent);
  							range.setEndBefore(parent);
  						}
  					}else{
  						// split element into 2 and insert block element in middle
  						if(range.startContainer.nodeType === 3 && range.startContainer.parentNode !== topNode){ // if text node
  							parent = range.startContainer.parentNode;
  							secondParent = parent.cloneNode();
  							// split the nodes into two lists - before and after, splitting the node with the selection into 2 text nodes.
  							taDOM.splitNodes(parent.childNodes, parent, secondParent, range.startContainer, range.startOffset);
  
  							// Escape out of the inline tags like b
  							while(!VALIDELEMENTS.test(parent.nodeName)){
  								angular.element(parent).after(secondParent);
  								parent = parent.parentNode;
  								var _lastSecondParent = secondParent;
  								secondParent = parent.cloneNode();
  								// split the nodes into two lists - before and after, splitting the node with the selection into 2 text nodes.
  								taDOM.splitNodes(parent.childNodes, parent, secondParent, _lastSecondParent);
  							}
  						}else{
  							parent = range.startContainer;
  							secondParent = parent.cloneNode();
  							taDOM.splitNodes(parent.childNodes, parent, secondParent, undefined, undefined, range.startOffset);
  						}
  
  						angular.element(parent).after(secondParent);
  						// put cursor to end of inserted content
  						range.setStartAfter(parent);
  						range.setEndAfter(parent);
  
  						if(/^(|<br(|\/)>)$/i.test(parent.innerHTML.trim())){
  							range.setStartBefore(parent);
  							range.setEndBefore(parent);
  							angular.element(parent).remove();
  						}
  						if(/^(|<br(|\/)>)$/i.test(secondParent.innerHTML.trim())) angular.element(secondParent).remove();
  						if(parent.nodeName.toLowerCase() === 'li'){
  							_tempFrag = _document.createDocumentFragment();
  							for(i = 0; i < frag.childNodes.length; i++){
  								element = angular.element('<li>');
  								taDOM.transferChildNodes(frag.childNodes[i], element[0]);
  								taDOM.transferNodeAttributes(frag.childNodes[i], element[0]);
  								_tempFrag.appendChild(element[0]);
  							}
  							frag = _tempFrag;
  							if(lastNode){
  								lastNode = frag.childNodes[frag.childNodes.length - 1];
  								lastNode = lastNode.childNodes[lastNode.childNodes.length - 1];
  							}
  						}
  					}
  				}else{
  					range.deleteContents();
  				}
  			}
  
  			range.insertNode(frag);
  			if(lastNode){
  				api.setSelectionToElementEnd(lastNode);
  			}
  		}
func_code_string: function(html, topNode){
  			var parent, secondParent, _childI, nodes, startIndex, startNodes, endNodes, i, lastNode, _tempFrag;
  			var element = angular.element("<div>" + html + "</div>");
  			var range = rangy.getSelection().getRangeAt(0);
  			var frag = _document.createDocumentFragment();
  			var children = element[0].childNodes;
  			var isInline = true;
  
  			if(children.length > 0){
  				// NOTE!! We need to do the following:
  				// check for blockelements - if they exist then we have to split the current element in half (and all others up to the closest block element) and insert all children in-between.
  				// If there are no block elements, or there is a mixture we need to create textNodes for the non wrapped text (we don't want them spans messing up the picture).
  				nodes = [];
  				for(_childI = 0; _childI < children.length; _childI++){
  					if(!(
  						(children[_childI].nodeName.toLowerCase() === 'p' && children[_childI].innerHTML.trim() === '') || // empty p element
  						(children[_childI].nodeType === 3 && children[_childI].nodeValue.trim() === '') // empty text node
  					)){
  						isInline = isInline && !BLOCKELEMENTS.test(children[_childI].nodeName);
  						nodes.push(children[_childI]);
  					}
  				}
  				for(var _n = 0; _n < nodes.length; _n++) lastNode = frag.appendChild(nodes[_n]);
  				if(!isInline && range.collapsed && /^(|<br(|\/)>)$/i.test(range.startContainer.innerHTML)) range.selectNode(range.startContainer);
  			}else{
  				isInline = true;
  				// paste text of some sort
  				lastNode = frag = _document.createTextNode(html);
  			}
  
  			// Other Edge case - selected data spans multiple blocks.
  			if(isInline){
  				range.deleteContents();
  			}else{ // not inline insert
  				if(range.collapsed && range.startContainer !== topNode){
  					if(range.startContainer.innerHTML && range.startContainer.innerHTML.match(/^<[^>]*>$/i)){
  						// this log is to catch when innerHTML is something like `<img ...>`
  						parent = range.startContainer;
  						if(range.startOffset === 1){
  							// before single tag
  							range.setStartAfter(parent);
  							range.setEndAfter(parent);
  						}else{
  							// after single tag
  							range.setStartBefore(parent);
  							range.setEndBefore(parent);
  						}
  					}else{
  						// split element into 2 and insert block element in middle
  						if(range.startContainer.nodeType === 3 && range.startContainer.parentNode !== topNode){ // if text node
  							parent = range.startContainer.parentNode;
  							secondParent = parent.cloneNode();
  							// split the nodes into two lists - before and after, splitting the node with the selection into 2 text nodes.
  							taDOM.splitNodes(parent.childNodes, parent, secondParent, range.startContainer, range.startOffset);
  
  							// Escape out of the inline tags like b
  							while(!VALIDELEMENTS.test(parent.nodeName)){
  								angular.element(parent).after(secondParent);
  								parent = parent.parentNode;
  								var _lastSecondParent = secondParent;
  								secondParent = parent.cloneNode();
  								// split the nodes into two lists - before and after, splitting the node with the selection into 2 text nodes.
  								taDOM.splitNodes(parent.childNodes, parent, secondParent, _lastSecondParent);
  							}
  						}else{
  							parent = range.startContainer;
  							secondParent = parent.cloneNode();
  							taDOM.splitNodes(parent.childNodes, parent, secondParent, undefined, undefined, range.startOffset);
  						}
  
  						angular.element(parent).after(secondParent);
  						// put cursor to end of inserted content
  						range.setStartAfter(parent);
  						range.setEndAfter(parent);
  
  						if(/^(|<br(|\/)>)$/i.test(parent.innerHTML.trim())){
  							range.setStartBefore(parent);
  							range.setEndBefore(parent);
  							angular.element(parent).remove();
  						}
  						if(/^(|<br(|\/)>)$/i.test(secondParent.innerHTML.trim())) angular.element(secondParent).remove();
  						if(parent.nodeName.toLowerCase() === 'li'){
  							_tempFrag = _document.createDocumentFragment();
  							for(i = 0; i < frag.childNodes.length; i++){
  								element = angular.element('<li>');
  								taDOM.transferChildNodes(frag.childNodes[i], element[0]);
  								taDOM.transferNodeAttributes(frag.childNodes[i], element[0]);
  								_tempFrag.appendChild(element[0]);
  							}
  							frag = _tempFrag;
  							if(lastNode){
  								lastNode = frag.childNodes[frag.childNodes.length - 1];
  								lastNode = lastNode.childNodes[lastNode.childNodes.length - 1];
  							}
  						}
  					}
  				}else{
  					range.deleteContents();
  				}
  			}
  
  			range.insertNode(frag);
  			if(lastNode){
  				api.setSelectionToElementEnd(lastNode);
  			}
  		}
func_documentation_string: from http://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div topNode is the contenteditable normally, all manipulation MUST be inside this.