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 requiresstart
: Start Indexstop
: Stop IndexclassName
: CSS class name to apply to a wrapperspan
. 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'
});