Unwanted space in iframe source code output in Ace Editor

Question

In my project, I am using Ace Editor and an iframe. The Ace Editor contains source code from the iframe.

The source code loads in the Ace Editor when the webpage loads. I am using this code to load the source code from the iframe to the Ace Editor:

function getCode()
{
var code = "<!DOCTYPE html>" + "\n" + document.getElementById("iframe_id").contentWindow.document.documentElement.outerHTML;
editor.getSession().setValue(code);
}

I have to output "<!DOCTYPE html>" manually because

document.getElementById("iframe_id").contentWindow.document.documentElement.outerHTML

does not output the doctype.

When the webpage loads the Ace Editor loads the iframe source code:

<body onLoad="getCode()">

But the source code of the iframe in the Ace Editor looks like this:

<!DOCTYPE html>
<html><head>
<title>Learning HTML</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is your first webpage.</p>



</body></html>

But I want the code to be properly arranged like this:

<!DOCTYPE html>
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is your first webpage.</p>
</body>
</html>

I do not know where the problem is. Please help.

UPDATE: - When I right click and see the source of the iframe the code is same as shown in the Ace editor.

why do you use iframe to get the code? outerHTML isn't guaranteed to be the same as html in the page. Also note that this question doesn't have anything to do with ace, and the same would happen with plain textarea. — a user, Sep 05 '14 at 10:03
yes. but as i have used Ace so i have mentioned it. in fact, the project is of an html editor and the iframe acts as a live viewer. — hmc, Sep 05 '14 at 10:07

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

You'll have to throw your code through an HTML beautifier (like js-beautify) before showing it in Ace if you want to achieve this. Ace doesn't have an option for this itself.

Unwanted space in iframe source code output in Ace Editor

1 Answers1