jquery - Dozvoli prijelom retka s javascript + LivePreview

Radim web stranicu u dvije kolone, s lijeve strane možete pisati, a to se prikazuje s desne strane sa posebnim dizajnom.
Stvar je u tome što bih želio omogućiti prijelom linije s desne strane, ali se ne prikazuje. Kako bih to mogao napraviti?
evo pregled mog dizajna. Za cjelovitu sliku, ovdje je > Fiddle OVDJE

function wordsinblocks(self) {
      var demo = document.getElementById("demo"),
        initialText = demo.textContent,
        wordTags = initialText.split(" ").map(function(word) {
          return '<span class="word">' + word + '</span>';
        });

      demo.innerHTML = wordTags.join('');
      self.disabled = true;
      fitWords();
      window.addEventListener('resize', fitWords);
    }



    $(function() {
      $('textarea.source').livePreview({
        previewElement: $('p#demo'),
        allowedTags: ['p', 'strong', 'br', 'em', 'strike'],
        interval: 20
      });
    });

    window.onload = wordsinblocks(self);

    function fitWords() {
      var demo = document.getElementById("demo"),
        width = demo.offsetWidth,
        sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100],
        calculated = sizes.map(function(size) {
          return width * size / 100
        }),
        node,
        i,
        nodeWidth,
        match,
        index;


      for (i = 0; i < demo.childNodes.length; i++) {
        node = demo.childNodes[i];
        node.classList.remove('size-1', 'size-2', 'size-3', 'size-4');

        nodeWidth = node.clientWidth;
        match = calculated.filter(function(grid) {
          return grid >= nodeWidth;
        })[0];
        index = calculated.indexOf(match);


        node.classList.add('size-' + (index + 1));
      }
    }

Odgovor #1

Možete umetati prijelome linija kad god se pritisne tipka Enter. Jedan način je korištenje .which ili .keyCode:

$(document).keydown(function(e){
     var event = e.which || e.keyCode;
     if (event == 13){
          //do something like this
          return '<span class="word"><br/>' + word + '</span>';
     }
});

"13" je kod znaka za Enter. Testirao/la sam ga u vašem kodu i radi u redu. Samo ga trebate postaviti (ili izmijeniti) tamo gdje neće utjecati na bilo koji od vaših funkcionalnih kodova.

Drugi način je točno kopirati ono što je u panelu 'Write' prije nego što se poduzmu neke radnje poput razdvajanja riječi stavljanjem u različite istaknute dijelove i slično.

[AŽURIRANJE #1]

Samo jedan dio vašeg koda za testiranje.

function wordsinblocks(self) {
      var demo = document.getElementById("demo"),
        initialText = demo.textContent,
        wordTags = initialText.split(" ").map(function(word) {
          return '<span class="word">' + word + '</span>';
        });

      $(document).keydown(function(e){
          var event = e.which || e.keyCode;
          if (event == 13){
              demo.innerHTML = wordTags.join(' <br/> ');
          } else{
              demo.innerHTML = wordTags.join('');
          }
      });

      self.disabled = true;
      fitWords();
      window.addEventListener('resize', fitWords);
}

[AŽURIRANJE #2]

function wordsinblocks(self) {
      var demo = document.getElementById("demo"),
        initialText = demo.innerText.replace(/\n\r?/g,"<br/>"),
        wordTags = initialText.split(" ").map(function(word) {
          return '<span class="word">' + word + '</span>';
        });

      demo.innerHTML = wordTags.join('');
      self.disabled = true;
      fitWords();
      window.addEventListener('resize', fitWords);
}

Odgovor #2

Morate podijeliti izvor (ono što pišete) po novom retku, a zatim svaku liniju podijeliti po razmaku.

Ažuriraj wordsinblocks kao:

function wordsinblocks(self) {
  var demo = document.getElementById("demo"),
    initialText = demo.innerText,
    wordTags = initialText.split(/\n/g).map(function(line) {
      var spanWord = line.split(/\s/g).filter(Boolean).map(function(word){
          return '<span class="word">' + word + '</span>';
      });

      return "<span class='line-break'>" + spanWord.join("") + "</span>";
    });

    demo.innerHTML = wordTags.join('');

    self.disabled = true;
    fitWords();
    window.addEventListener('resize', fitWords);
}

Ažuriraj fitWords kao

function fitWords() {
  var demo = document.getElementById("demo"),
    width = demo.offsetWidth,
    sizes = [7.69230769230769, 23.07692307692307, 46.15384615384614, 100],
    calculated = sizes.map(function(size) {
      return width * size / 100
    }),
    lineNode,
    node,
    i, k,
    nodeWidth,
    match,
    index;

  for (k = 0; k < demo.childNodes.length; k++) {
    lineNode = demo.childNodes[k];
    for(i = 0; i < lineNode.childNodes.length; i++) {
       node = lineNode.childNodes[i];
       node.classList.remove('size-1', 'size-2', 'size-3', 'size-4');

       nodeWidth = node.clientWidth;
       match = calculated.filter(function(grid) {
          return grid >= nodeWidth;
       })[0];
       index = calculated.indexOf(match);

       node.classList.add('size-' + (index + 1));
    }
  }
}

Dodajte sljedeći style u vaš css

#demo .line-break:after {
   clear: both;
   display: table;
   content: ""
}

PRIMJER FIDDLEA OVDJE

Nadam se da će ti pomoći i javi mi ako nešto propustim.

POVJESNOST za Višestruke Prekide Linija

Ažuriraj textarea.reloadPreview kao

textarea.reloadPreview = function() {
    var previewString = this.val().replace(/\n/g,"<br>");
    if (previewString.length > 0) {
       previewString = this.htmlUnencode(previewString);
       previewString = previewString.replace(opts.paraRegExp, "<p>$1</p><p>$2</p>");
       previewString = previewString.replace(opts.lineBreakRegExp, "$1<br />$2");
       previewString = previewString.replace(allowedTagsRegExp, "<$1>");

    }

    try {
       // Workaround for a bug in jquery 1.3.2 which is fixed in 1.4
       preview[0].innerHTML = previewString;
    }
    catch (e) {
      alert("Sorry, but inserting a block element within is not allowed here.");
    }

    preview.updatingPreview = false;
    this.bind('keyup', this.handleKeyUp);
    wordsinblocks(self);
}

Ažuriraj worksinblocks kao

function wordsinblocks(self) {
  var demo = document.getElementById("demo"),
    initialText = demo.innerText,
    wordTags = initialText.split(/\n/g).map(function(line) {
      var spanWord = line.split(/\s/g).filter(Boolean).map(function(word){
          return '<span class="word">' + word + '</span>';
      });

      var result = spanWord.join("");
      result = result == "" ? "<span class='empty'></span>" : result;

      return "<span class='line-break'>" + result + "</span>";
    });

    demo.innerHTML = wordTags.join('');

    self.disabled = true;
    fitWords();
    window.addEventListener('resize', fitWords);
}

Dodajte sljedeće stilove u svoj css

#demo .line-break .empty {
    height: 25px;
    display: block
}

#demo .word {
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 2.9vw;
    height: 25px;
    font-family: "helvetica";
    border: 1px solid black;
}

AŽURIRANI FIDDLE OVDJE