将文本封装在每行中的contenteditable div中 [英] Wrap text inside contenteditable div in every row

问题描述

我正在研究类似于基于C ++的基于Web的IDE。我有一些问题，当我试图追加一个文本文件到我contenteditable div（打开文件按钮）。 DOM结构必须是类似于

I am working on to something like a C++ web-based IDE. Im having some problem when i tried to append a text file to my contenteditable div (open file button). The DOM structure MUST be something like

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

JS

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 /

如何将div中的文本附加到DOM之前将其包装到div中？

How would i wrap the text in div every row before appending it to the DOM?

推荐答案

您可以尝试以下操作...

Can you try following...

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

Here's fiddle link...jsfiddle

这篇关于将文本封装在每行中的contenteditable div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！