2012/02/15

Smaller selection plugin for CKEditor

This post introduces a little plugin for CKEditor, it's basically a patch to fix a little problem with selections, but proving that it works correctly in all the situations might not be easy and anyway landing a patch takes a long time and in this case it can be applied easily as a plugin.

The problem: When the user double clicks on a word the space at the end of the word is also selected, and usually that's not what we want. For many situations it doesn't matter if the space is inside or outside the selection, but currently I'm creating a plugin for a client and due to the CSS the space is collapsed due to the css if it's inside the generated tag, so we want it out.

The plugin listens for the double click on the content and then tries to check first the boundaries of the selection that the browser has created, so it tries to select only a text node and after that if the end of the selection is a space just moves it one place back.

You can download it here: Smaller Selection 0.1

Tested with IE8, IE9, Firefox 10, Firefox 11, Chrome, Opera and it seems to work fine in my tests. If anyone finds problems, please report your browser and the html where it fails.

2 comments:

Pradeep said...

I have to select a word in the ckedior content area. how it is possible.

For example, there is two ??(question mark). This question mark by default want to come as selected. then we have some set of choices. User will click on one choice and the question mark will replace with the choice.

How can we do this in ckedior.

Alfonso Martínez de Lizarrondo said...

You can use the range and selection objects in CKEditor in a way similar to this plugin.
Find the location of your word, adjust a range with those boundaries and select them.