Working with Selections and Ranges in CKEditor

Working with ranges and selections in CKEditor is almost unbearable. In order to make it a bit easier, i recommend using rangy, a free library that makes the html selection/range api cross-browser-proof. Well, at least it made what i was trying to accomplish cross-browser...

	/**
	* allows you to wrap or insert an html tag over a selection/range using rangy
	* @param iframe the CKEditor iframe html element
	* @param tagName string representation of the tag, such as 'a' for anchor
	* @param withNodeFunc function to allow outside modification of the element before injecting/wrapping
	*/
	function wrapOrInsert(iframe, tagName, withNodeFunc) {
	var iframedoc = iframe.contentDocument || iframe.contentWindow.document,
	tag = iframedoc.createElement(tagName),
	selection = rangy.getIframeSelection(iframe),
	selectionRange = selection.getRangeAt(0);
	//let the caller do something with the element
	withNodeFunc(tag);
	//since you can't wrap something with an image tag
	if (tagName === 'img') {
	selectionRange.collapse(false);
	selectionRange.insertNode(tag);
	} else if (tagName === "a" && selection.isCollapsed) {
	//provide some default text for an anchor
	selectionRange.collapse(false);
	tag.appendChild(iframedoc.createTextNode('link'));
	selectionRange.insertNode(tag);
	} else {
	selectionRange.surroundContents(tag);
	}
	//detach rangy
	selection.detach();
	}
	/**
	* Example on how to call the function, let's say on a jquery document.ready
	* It'll wrap the selection in a span
	*/
	$(function(){
	//first, lets get the iframe that the ckeditor is in
	var iframe=$(".ckeditor iframe");
	//we put the [0] on the end of the jquery item, since that will cast it to a DOM element (see http://stackoverflow.com/questions/6974582/jquery-object-and-dom-element)
	// and, we'll pass an empty callback, since we don't want to do anything with the span after its created
	wrapOrInsert(iframe[0],"span",function(){});
	});

view raw ckeditor-selection-wrap-with-rangy.js hosted with ❤ by GitHub