Создание разрывов строк с использованием contenteditable div и PHP

Question

Я пытаюсь выяснить, как заменить разрывы строк, используя PHP в div с contenteditable, установленным в true. Я больше не могу использовать функцию nl2br(), потому что элемент теперь является div, а не textarea. Однако я попытался использовать str_replace("\n", "<br />", $article); (переменная статья была получена из вызова AJAX на другой странице), но это не нарушило текст. Вот HTML У меня есть:

<div id="box" contenteditable="true">

</div>

Затем, когда пользователь нажимает кнопку <button id="boxButton">Get div content</button>, я использую jQuery, чтобы получить содержимое редактируемого div, например:

$("#boxButton").click(function() {

    var text = $("#box").text();

    $.ajax({
        url: 'linkInTextareaResponse.php',
        type: 'POST',
        data: {text: text},
        success: function(data) {

            console.log(data);
            $("div").html(data);

        }
    });

});

На странице linkInTextareaResponse.php есть этот код, который должен 1. Вставить разрывы строк в текст (с которыми у меня возникают проблемы) и 2. Заменить отступы пробелами (что работает нормально):

$article = $_POST['text'];
$article = str_replace("\n", "<br />", $article); //this is the line that doesn't work
$article = str_replace("\t", "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", $article);
echo $article;

Если я вставлю в div текст, который выглядит следующим образом:

Hi there
Hi there
Hi there

Это будет выглядеть так, когда я нажму кнопку «Получить содержимое div» и вызов AJAX будет выполнен :

Hi thereHi thereHi there

Это происходит даже после использования str_replace, поэтому я не уверен, что делаю неправильно. Я уже пытался установить div CSS на white-space: pre-wrap; и display: inline-block;, которые, как я слышал, оказали влияние, но безрезультатно. Есть идеи?