Intention-Revealing Interfaces

Amazingly well put:

If a developer must consider the implementation of a component in order to use it, the value of encapsulation is lost. If someone other than the original developer must infer the purpose of an object or operation based onits implementation, that new developer may infer a purpose that the operation or class fulfills only by chance. If that was not the intent, the code may work for the moment, but the conceptual basis of the design will have been corrupted, and the two developers will be working at cross-purposes.

Domain Driven Design by Eric Evans, page 246

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