By Emily Campbell, Steven Bedrick
A JQuery plugin to handle user selection of text in an element. By default, this plugin
wraps user-selected text in a <span>
element with a class name of 'selected'
.
Options:
wrap_node
: (default: true
) whether or not to wrap selected text in a new node.
wrapper_class_name
: (default: 'selected'
) the class name to apply to the wrapper node
wrapper_id_template
: (default: 'select_wrap_'
) the template to use for the wrapper node DOM id. It will be automatically followed by a simple counter variable (e.g., 'select_wrap_1'
,'select_wrap_2'
, etc.)
on_select_callback_fn
: (default: null
) a callback function that fires after the selection takes place. Five arguments are given to the callback:
- The DOM object that the selection originated from
- The Range object created by the selection
- The selected text
- The DOM wrapper node, if wrap_node is true.
- A flag indicating whether or not an exception occurred due to a badly-overlapping selection (see note below). True, or null
If no text is selected (i.e., the user somehow manages to create a zero-length selection), the callback function will not fire.
- The plugin's behavior is undefined when selections overlap. Anybody who feels like dealing with this, please feel free. Different user agents seem to handle this differently.
- If an overlapping selection ends in the middle of an existing selection (rather than completely enclosing an existing selection), an exception occurs. If this happens, the plugin passes a flag to that effect to the callback function. Again, different user agents seem to handle this situation differently. See previous note about external help being welcome.
- If the user's selection ends outside of the element that
enable_select()
is called on, JQ_Highlight doesn't get themouseup
event and therefore doesn't catch the selection. Anybody who wants to help, etc.
This project includes some code taken from QuirksMode.org as well as from TinyMCE.