evolutionHighlight jQuery Plugin

Ben Tiedt — Fri, 08 Mar 2024 17:51:34 GMT

Current Revision posted to API Documentation by Ben Tiedt on 03/08/2024 17:51:34

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 jQuery Plugin|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'
});