Anyone who’s dealt with browsers’ implementations of DOM Selection would know what a pain it is. This is probably the one area where every browser implements it differently, with Firefox and Opera being the closest to the standard.

Background for anyone who’s not familiar with it. There are two main concepts in DOM relating to selections: Selection and Range. A selection is the highlighted portion of the DOM structure. The end user typically create a selection by dragging across text nodes with the mouse. Selection defines the area that has been selected, and may be composed of one or more ranges. A range is defined as a continuous area within the DOM with four attributes: startNode, startOffset, endNode, and endOffset.

Now, from JavaScript, let’s look at how to get those two objects. Getting the selection object is pretty standard across all browsers. You do it with:
var selection = window.getSelection();
for Non-IE browsers, and for IE:
var selection = document.selection;

It’s worth to note that IE’s selection and range objects do not conform to the W3C standard at all. Even though it’s a selection object, it doesn’t provide a way for you to obtain the DOM nodes of the selection.

To get a range object from the selection, it’s simple for Mozilla and Opera:
var range = selection.getRangeAt(0);

Safari, on the other hand, chose not to implement getRangeAt. That makes it a bit harder to obtain a range from a selection: you can’t get it directly. Fortunately, Safari implements these four properties on the selection object: baseNode, baseOffset, extentNode, and extentOffset. With those four properties, you can recreate the Range object:

var range = document.createRange();
var selection = window.getSelection();
range.setStart( selection.baseNode, selection.baseOffset );
range.setEnd( selection.extentNode, selection.extentOffset );


That works fine for half of the cases. In a selection object, the base(Node/Offset) and extent do not imply ordering. However, the range object does: start must be before end in the DOM tree. If you created the selection by dragging your mouse from end to start, this will fail. Using the trick below would get around that problem:

if( range.collapsed != selection.isCollapsed )
{
range.setStart( selection.extentNode, selection.extentOffset );
range.setEnd( selection.baseNode, selection.baseOffset );
}

Both the range and selection object will tell you if they are collapsed(start and end at the same position). If we messed up the range’s start and end, the range will remain at the start point, in a collapsed state. Flipping the start and end should fix that.

Now you have a method of getting the range object for all major browsers except for IE. To implement a javascript wysiwyg editor, the selection and range are the of most critical pieces of the puzzle. We’ll cover how we worked around IE’s implementation of selection and range in a future post.

For beta users, we have just released a new feature: the ability to export all your data in a single download. The ability to export your documents individually has always been there, this is the added convenience of getting everything at once. The single zip file includes all your data: every revision of your documents, attachments, and category information. Documents are stored in standard compliant HTML format. You can use virtually any word processor/editor to edit them. This feature is enabled on all accounts, including the Personal(free) plan.

Some may wonder why we are offering this functionality. After all, making it harder to get your content out increases the cost to switch, which translates to lower churn for us…

That’s short term thinking. If there’s one thing that I’ve learned working for Amazon, it’s their attitude towards customer service. Jeff Bezos once said that “If you have an unhappy customer on the Internet, he doesn’t tell his six friends, he tells his 6,000 friends.” If this makes the customer more satisfied even by a little, it is beneficial to us in the long run.

This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.