javascript - 如何在 textarea 的行之外添加图像？

Question

想象一下当您的代码出现错误时 Eclipse 和其他 IDE 会做什么。它类似于：

X 编号=5；

例如，其中 X 是带有白色 X 的红色圆圈的图像。我怎么能在一个网站上产生这样的效果？考虑到文本区域是可滚动的。

Answer 1

http://ace.ajax.org/ Ace 解决了我的需求。这是一个 javascript 增强的文本区域，重点是代码编辑。BSD 许可。

（在我找到 ACE 方式后编辑）

首先按照站点中的说明设置编辑器，然后调用

A) 综合方式：

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

其中 lineNum 从 0 开始（即：0 是第一行）。还有“警告”类型，两者都提供默认的适当图标。可能还有其他类型。

B) Hack 版本，或者更强大的方式？，或者添加你喜欢的 css 类的方式：

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

其中 0 是从零开始的行号（即：第一个），“error_line”是您自己定义的 css 类。然后你使用 background-image: url(''); 选择要使用的图标。它还有其他非常棒的功能，例如行号和许多常用语言的语法突出显示。