CODEWITHSUNDEEP
javascriptjqueryhtmlcsstextarea
efaj
efaj

Reputation: 944

How can I add an image besides a textarea's line?

Imagine what Eclipse and other IDEs do when you have an error in your code. It goes something like:

X itn number=5;

Where X is an image of a red circle with a white X for example. How could I produce such effect in a website? Taking into account that the textarea is scrollable.

Upvotes: 2

Views: 498

Answers (1)

efaj
efaj

Reputation: 944

http://ace.ajax.org/ Ace solved my need. It's a javascript augmented textarea with an emphasis on code editing. BSD licensed.

(Edited after I found the ACE-way to do it)

By first setting up the editor as explained in the site, you then call either

A) Integrated way:

editor.getSession().setAnnotations([{row: lineNum, column: 0, html:"foo<br/>bar", type:"error"}]);

Where lineNum is 0-based (ie: 0 is the first line). There's also "warning" type, and both provide a default appropriate icon. There may be other types.

B) Hack version, or a more powerful way?, or The way that adds the css class of your liking:

editor.getSession().addGutterDecoration(0,"error_line");

Where 0 is the zero-based line number (ie : the first) and "error_line" is your own defined css class. You then use background-image: url(''); to choose the icon to use. It's got other very sweet features like line number, and syntax highlighting for lots of commonly used languages.

Upvotes: 5

Related Questions