2

我试图实现一个拖动文件功能。我需要预览文件的文本，在本例中是 HTML 文件。但是当我将 FileReader 的结果插入 DOM 时，预览会丢失所有换行符和文本缩进。

我尝试使用 jQuery .split() 并插入 a <br/>，但文本仍然丢失了所有缩进。

for(var i = 0; i <files.length; i++){

    reader = new FileReader();
    reader.onload = function(evt){
        var r = evt.target.result;

        r = r.replace(/>/g,'&gt; >');
        r = r.replace(/</g,'&lt;');
        r = r.split('>')

        var text="";
        for(var i =0; i<r.length; i++){
            r[i] = $.trim(r[i]);
            text += r[i]+'<br/>';
        }
        $('.drop-area').html(text);

    }
    reader.readAsText(files[i]);
}

尝试在此处拖动 HTML 文件http://jsfiddle.net/gVZRU/2/

有可能解决吗？我可以采取其他任何方法来获得此功能吗？

4

2 回答 2

2

您只需要添加white-space: pre-wrap;到显示框的样式即可。

HTML 源代码中的多个连续空白始终折叠为呈现内容中的单个输出空白。white-spaceCSS 属性允许您更改此行为，并且该值pre表示将空格视为<pre>标记（即，在呈现的结果中显示所有空格）。pre-wrap就像pre，但允许对文本进行换行。

于 2013-07-19T19:32:06.840 回答
1

使用.text方法插入文本。无需手动转义。要解决显示问题，不要尝试<br>在每个结束标记之后插入标记，而只需使用适当的 CSS: white-space: pre-wrap;。

于 2013-07-19T19:35:12.970 回答