ajax — удаляет выделенный HTML-код при сохранении — highlight_file () переполнение стека

В моем приложении я показываю содержимое файла с именем test.php используя ajax для таблицы с идентификатором fileContents, я использую highlight_file() выделить код, и он работает нормально. У меня есть кнопка Сохранить на странице, чтобы сохранить содержимое div в файл.

<script language="JavaScript">
$( document ).ready(function() {
$.ajax({
url: 'test_file.php',
type: 'POST',
data: {
filePath: 'test.php'
},
success: function(data) {
$('#fileContents').html(data);
}
});
});
function saveFileContents() {
console.log($('#fileContentDiv').html());
}
</script>

<table id="fileContents">
</table>
<input type="button" value="Save" onclick="saveFileContents()">

test_file.php

<tr>
<td>
<div id="fileContentDiv" contenteditable="true">
<?php
echo highlight_file( $_POST['filePath'] );
?>
</td>
</tr>

test.php

<?php
echo "hai";
?>

Я попытался отредактировать div и добавить новую строку кода ко второй последней строке $i=0; и когда я нажимаю кнопку Сохранить, я получаю консоль, как это:

<code><span style="color: #000000">
<br><br>&lt;?php&nbsp;</span></code><div><code><span style="color: #000000">echo&nbsp;"hai";</span></code></div><div><code><span style="color: #000000">$i =0;</span></code></div><div><code><span style="color: #000000">?&gt;</span></code>&nbsp;</div>

Мне нужно сохранить PHP-код только обратно в файл (вместе с разрывами строк). Я пытался с помощью $('#fileContent').text(), Но это сохранение контента в одну строку.

Может кто-нибудь помочь мне исправить это? Заранее спасибо.