모든 행에서 contenteditable div 안에 텍스트 줄 바꿈

Question

C++ 웹 기반 IDE와 같은 작업을하고 있습니다. 나는 내 contenteditable div (파일 열기 버튼)에 텍스트 파일을 추가하려고 할 때 몇 가지 문제가 생겼습니다. DOM 구조는 어떻게 내가 DOM에 추가하기 전에 DIV의 텍스트마다 행을 감싸는 것

<div id = "board_code"> 
    <div>text in row1</div> 
    <div>text in row2</div> 
    <div>text in row3</div> 
</div> 

JS

function readSingleFile(evt) { 

    var f = evt.target.files[0]; 
     console.log(f); 
     if (!f) { 
     alert("Failed to load file"); 
      return; 
    } 
     if (f.name.indexOf('.txt') == -1) { 
      alert(f.name + " is not a valid text file."); 
      return;  
        }  

     var r = new FileReader(); 
     r.onload = function(e) { 
      var contents = e.target.result; 
      contents = contents.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/\r\n/,'<br>');; 
     alert("Got the file.n" 
       +"name: " + f.name + "n" 
       +"type: " + f.type + "n" 
       +"size: " + f.size + " bytesn" 
       + "contents: " + contents 
     ); 
      document.getElementById('board').innerHTML = contents; 
     } 
     r.readAsText(f); 

    } 

    document.getElementById('fileinput').addEventListener('change', readSingleFile, false); 

http://jsfiddle.net/88vtR/32/

같은 것을해야합니까?

Answer 1

당신이 다음 시도 할 수 ...

function readSingleFile(evt) { 

     var f = evt.target.files[0]; 
     //console.log(f); 
     if (!f) { 
      alert("Failed to load file"); 
      return; 
     } 
     if (f.name.indexOf('.txt') == -1) { 
      alert(f.name + " is not a valid text file."); 
      return; 
     } 

     var r = new FileReader(); 
     r.onload = function (e) { 
      var contents = e.target.result; //.replace("\r\n","<br/>"); 
      contents = contents.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); 
      alert("Got the file.n" + "name: " + f.name + "n" + "type: " + f.type + "n" + "size: " + f.size + " bytesn" + "contents: " + contents); 


      var tmpSent = ""; 
      var newContents = ""; 
      for (var i = 0; i < contents.length; i++) { 
       if(contents.charAt(i) == '\n') { 
        newContents += "<div>"+tmpSent+"</div>"; 
        tmpSent = ""; 
       } 
       else 
        tmpSent += contents.charAt(i); 
      }; 
      if(tmpSent.length>0) 
        newContents += "<div>"+tmpSent+"</div>"; 

      console.log(newContents); 
      document.getElementById('board').innerHTML = newContents; 
     } 
     r.readAsText(f); 

    } 

    document.getElementById('fileinput').addEventListener('change', readSingleFile, false); 

여기에 바이올린 링크의 ... jsfiddle