Redactor JS如何设法显示缩进代码？

Question

如果您查看Refactor JS demo，并且单击按钮以显示所显示内容的HTML源代码...

...你可以看到一个精心设计的代码版本：

我所知道的几乎所有富文本编辑器/所见即所得编辑器都只会在一行中显示代码（没有任何缩进）。

我无法理解这是如何完成的。你有什么想法吗？

编辑：

似乎不是很清楚。我的问题是这个特殊文本是如何被技术美化的？ 我知道jsbeautifier或者那种实际上包装每行代码的工具。 但是，如果您只是花时间去实际链接并查看源代码，您会看到正常的一行textarea显示得很好，没有任何阻碍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，它似乎显示了textarea的原始内容而不是它的当前值。

在控制台中运行document.getElementById("redactor").value，您将看到它正如您所看到的那样形成（并且这种格式并不像其他评论已经说明的那样特殊）