Question

我在交互式计算机编程教程（codeavengers.com）中使用ACE编辑器。

对于一些课程，我试图同时展示2位ACE编辑。它适用于Firefox和Chrome，但不适用于Safari 5.1或IE9（我不喜欢IE8和IE7）。

以下是我的测试页的代码。

<!doctype html>

<html><head>
<script src="ace/src/ace.js" type="text/javascript" charset="utf-8"></script>
<style>
.editor {
    width: 500px;
    height: 500px;
    position: absolute;
}
#editor2 {
    left: 550px;
}
</style>

<script type="text/javascript">
window.onload = function() {
    ace.edit("editor1").getSession().setValue('This is the first editor');
    ace.edit("editor2").getSession().setValue('This is the second editor');
};
</script>
</head>

<body>
    <div id="editor1" class="editor"></div>
    <div id="editor2" class="editor"></div>
</body></html>

在IE9中，第二个编辑器工作正常，但第一个编辑器不起作用。

Answer 1

Ace需要在根元素上放置absolute或relative。

Answer 2

没有得到任何有效的答案，所以我选择使用ace编辑器作为第一个编辑器，如果浏览器不是Chrome或Firefox，我选择使用第二个编辑器的readonly美化元素。

IE9和Safari 5中的单页上有2个ACE编辑器

2 个答案: