Как Redactor JS удается отобразить отступы?

Question

Если вы посмотрите на Refactor JS demo, а если нажать на кнопку, чтобы показать исходный HTML код отображаемого контента ...

... вы можете увидеть хорошо idented версию код:

Почти все богатые текстовые редакторы/WYSIWYG редакторы Я знаю, что бы показать код только одной строкой (без каких-либо углублений).

Я не мог понять, как это делается. У тебя есть идеи?

EDIT:

Кажется, это было не очень понятно. Мой вопрос в том, как этот особый текст технически украшен? Я знаю jsbeautifier или тот инструмент, который на самом деле обертывает каждую строку кода для его стилизации. Но если вы просто потратите время на то, чтобы перейти к ссылке и посмотреть источник, вы увидите, что обычная текстовая область в одной строке показана хорошо, без каких-либо обструктивных CSS.

HTML

<textarea id="redactor" style="display: block; height: 797px;" dir="ltr"><h2>The Last of The Mohicans</h2> <p><em>by James Fenimore Cooper​​</em></p> <p>Winding its way among countless islands, and imbedded in mountains, the "holy lake" extended a dozen leagues still further to the south. With the high plain that there interposed itself to the further passage of the water, commenced a portage of as many miles, which conducted the adventurer to the banks of the Hudson, at a point where, with the usual obstructions of the rapids, or rifts, as they were then termed in the language of the country, the river became navigable to the tide.​</p> <p><img src="/img/redactor-image.jpg" width="1400" height="582"></p> <p>"Come," he said, with a good-humored smile; "the buck that will take to the water must be headed, and not followed."</p> <p>The route taken by Hawkeye lay across those sandy plains, relived by occasional valleys and swells of land, which had been traversed by their party on the morning of the same day, with the baffled Magua for their guide. The sun had now fallen low toward the distant mountains; and as their journey lay through the interminable forest, the heat was no longer oppressive. Their progress, in consequence, was proportionate; and long before the twilight gathered about them, they had made good many toilsome miles on their return.​</p> </textarea> 

Выше показали хорошо задумано, и мой вопрос, почему?/Как?

Answer 1

Единственная проблема заключается в том, что вы ищете Firebug и, похоже, отображаете исходное содержимое текстового поля вместо его текущего значения.

Run document.getElementById("redactor").value в консоли, и вы увидите, что он отформатирован так же, как вы видели (и это форматирование нет ничего особенного, как другие комментарии уже говорили)