Search code examples
javascripthtmlinternet-explorer-9ace-editor

2 ACE Editors on single page in IE9 and Safari 5

I am using the ACE editor in an interactive computer programming tutorial (codeavengers.com).

For some of the lessons I am trying to show 2 ACE editors at once. It works fine with Firefox and Chrome, but does not work with Safari 5.1 or IE9 (I am not bothering with IE8 and IE7).

Here is the code for my test page.

<!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>

In IE9, the 2nd editor works OK, but the 1st editor does not work.

Solution

  • Did not get any valid answers, so I opted to use an ace editor for the 1st editor, and a readonly prettified element for the second editor if the browser is not Chrome or Firefox.