javascript - textareaの行以外に画像を追加するにはどうすればよいですか？

Question

コードにエラーが発生したときにEclipseや他のIDEが何をするか想像してみてください。それは次のようになります：

X itn number = 5;

ここで、Xは、たとえば白いXが付いた赤い円の画像です。どうすればそのような効果をウェブサイトで生み出すことができますか？textareaがスクロール可能であることを考慮に入れてください。

Answer 1

http://ace.ajax.org/ エースは私のニーズを解決しました。これは、コード編集に重点を置いたjavascript拡張テキストエリアです。BSDライセンス。

（ACEを見つけた後に編集-それを行う方法）

サイトで説明されているように最初にエディタを設定することにより、次にいずれかを呼び出します

A）統合された方法：

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

ここで、lineNumは0ベースです（つまり、0が最初の行です）。「警告」タイプもあり、どちらもデフォルトの適切なアイコンを提供します。他のタイプがあるかもしれません。

B）ハックバージョン、またはより強力な方法？、またはあなたの好みのcssクラスを追加する方法：

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

ここで、0はゼロベースの行番号（つまり、最初の行番号）であり、「error_line」は独自に定義されたcssクラスです。次に、background-imageを使用します：url（''）; 使用するアイコンを選択します。行番号や、一般的に使用される多くの言語の構文の強調表示など、他の非常に優れた機能があります。