evolutionHighlight jQuery Plugin

jQuery.fn.evolutionHighlight

This plugin decorates <textarea> elements to support highlighting of ranges with CSS class names. Internally, a mirror of the textarea is created behind it, and highlighted ranges are rendered as span elements with CSS classes applied. This is used by the evolutionComposer plugin to support highlighting.

Usage

Highlights two ranges in a textarea:

$('textarea.myTextArea').evolutionHighlight({
    ranges: [
        { start: 5, stop: 10, className: 'myHighlightStyle' },
        { start: 13, stop: 34, className: 'myHighlightStyle' }
    ]
});

Options

• ranges: array of ranges to highlight. Each range requires
  • start: Start Index
  • stop: Stop Index
  • className: CSS class name to apply to a wrapper span. The class should ideally only define a background color, and not any padding or margin.

Methods

clear

Clears highlights.

$('textarea.myTextArea').evolutionHighlight('clear');

resize

Safely resizes a textarea already decorated with evolutionHighlight.

$('textarea.myTextArea').evolutionHighlight('resize', width, height);

css

Safely applies CSS to a textarea already decorated with evolutionHighlight.

$('textarea.myTextArea').evolutionHighlight('css', {
    border: '2px solid red',
    fontSize: '15px'
});