javascript Continua il testo in paragrafi<p> separati in modo dinamico?




javascript class css (7)

Nel caso comprenda correttamente la tua domanda, potresti aggiungere qualcosa come questo:

$('#text_land').keyup(function(e) {
  if(e.keyCode == '13') {
    $(this).append("<br><br><p contenteditable='true' class='text'></p>");
    $('p.text:last-child').focus();
  }
});

Quindi quando stai digitando, genererà nuove caselle al volo ogni volta che l'utente preme Invio. Ecco l'esempio completo: https://jsfiddle.net/2hcfbp2h/6/

Il seguente fiddle consente al testo di essere incollato in una <textarea> e generato in paragrafi uguali in modo dinamico <p> costituito dalla stessa quantità di caratteri.

Il problema che si verifica è; il testo dei paragrafi precedenti generati dinamicamente <p> sfiora all'interno di ciascun tag e non continua correttamente al paragrafo dinamico successivo. Pertanto, è possibile che l'utente prema invio e sposti tale contenuto nel successivo paragrafo esistente, mantenendo comunque la formattazione esistente dinamicamente e automaticamente?

Se un nuovo fiddle potesse essere fornito, sarebbe molto apprezzato, dato che sono ancora nuovo nella programmazione. Ancora una volta, il Fiddle può essere trovato fiddle .

Aggiornamento: è possibile che una volta che i paragrafi sono generati, per l'utente a premere invio e se possibile spostare il loro contenuto verso il basso sotto il paragrafo senza soluzione di continuità? E anche per lo stesso da applicare quando viene premuto il pulsante backspace, perché il contenuto si sposti nel paragrafo precedente? Il problema che si verifica è che il testo, quando si preme Invio, sembra nascondere il testo a causa della proprietà di overflow in css.

$(function() {
    $("#Go").on('click', function() {
        var theText = $('textarea').val();
        var numberOfCharacters = 300;
        while (theText.length) {
            while (theText.length > numberOfCharacters &&
                theText.charAt(numberOfCharacters) !== ' ') {
                numberOfCharacters++;
            }
            $("#text_land").append("<br><\/br><p>" + theText.substring(
                    0, numberOfCharacters) +
                "<\/p><br><\/br>");
            theText = theText.substring(numberOfCharacters);
            numberOfCharacters = 300;
            $('p').attr('contenteditable', 'true');
            $("p").addClass("text");
        }
    })
})
$('select').on('change', function() {
    var targets = $('#text_land p'),
        property = this.dataset.property;
    targets.css(property, this.value);
}).prop('selectedIndex', 0);
(end);
@media print {
    p {
        page-break-inside: avoid;
    }
}

p {
    position: relative;
}

@media print {
    .no-print,.no-print * {
        display: none !important;
    }
}

p {
    border-style: solid;
    color: #000;
    display: block;
    text-align: justify;
    border-width: 5px;
    font-size: 19px;
    overflow: hidden;
    height: 300px;
    width: 460px;
    word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


 <div align="center">
        <h4 align="center"><u>Paste text in the field below to divide text into
        paragraphs.</u></h4><br>
        <br>
        <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10">
</textarea><br>
        <br>
        <button id="Go">Divide Text into Paragraphs!</button>
    </div>
    <hr>
    <h2 align="center">Divided Text Will Appear Below:</h2>
    <div>
        <div align="center" id="text_land" style="font-family: monospace">
        </div>
    </div>



Answer #2

puoi controllare questo Fiddle ? Beh, non sono sicuro se questo è quello che volevi. Ho appena aggiunto l'evento nel paragrafo modificabile per controllare l'output desiderato.

$(function() {
  $("#Go").on('click', function() {
    var theText = $('textarea').val();
    var numberOfCharacters = 300;
    while (theText.length) {
      while (theText.length > numberOfCharacters &&
        theText.charAt(numberOfCharacters) !== ' ') {
        numberOfCharacters++;
      }
      $("#text_land").append("<br><\/br><p>" + theText.substring(
          0, numberOfCharacters) +
        "<\/p><br><\/br>");
      theText = theText.substring(numberOfCharacters);
      numberOfCharacters = 300;
      $('p').attr('contenteditable', 'true');
      $("p").addClass("text");
    }
  })
});
$(document).on('keyup', 'p.text', function(e) {
  if (e.keyCode == 13) {
    var extend = $(this).find("div").html();
    $(this).next().next().next().next().next().prepend(extend).focus();
    $(this).find("div").remove();
  }
});
$('select').on('blur keyup paste', function() {
  var targets = $('#text_land p'),
    property = this.dataset.property;
  targets.css(property, this.value);
}).prop('selectedIndex', 0);
(end);
@media print {
  p {
    page-break-inside: avoid;
  }
}
p {
  position: relative;
}
@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}
p {
  border-style: solid;
}
p {
  color: #000;
}
p {
  display: block;
  text-align: justify;
  border-width: 5px;
  font-size: 19px;
}
p {
  overflow: hidden;
  height: 300px;
  width: 460px;
  word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div align="center">
  <h4 align="center"><u>Paste text in the field below to divide text into
        paragraphs.</u></h4>
  <br>
  <br>
  <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10"></textarea>
  <br>
  <br>
  <button id="Go">Divide Text into Paragraphs!</button>
</div>
<hr>
<h2 align="center">Divided Text Will Appear Below:</h2>
<div>
  <div align="center" id="text_land" style="font-family: monospace">
  </div>
</div>


Answer #3

D3 è in realtà abbastanza adatto a questo. Se ti capisco correttamente, l'aggiunta e la rimozione degli elementi <p> dovrebbero apparire e scomparire naturalmente durante la modifica.

È un po 'approssimativo, ma nell'esempio qui sotto un nuovo paragrafo viene' rilevato 'dopo l'inserimento di due nuove linee. Il valore <textarea> è .split() rispetto a tale criterio e applicato a <div> a destra come array data() . Quindi per ogni elemento nei dati, inseriamo / esci / aggiorna gli elementi <p> . Otteniamo aggiunte e rimozioni semplici e piacevoli mentre modifichiamo il testo senza un sacco di DOM thrashing.

Con qualche rielaborazione, potresti probabilmente unire <textarea> e <p> in un editor di tipo "wysiwyg" ...

var text = '';
var break_char = '\n\n';
var editor = d3.select('.editor');
var output = d3.select('.output');

function input_handler () {

  text = editor.node().value;

  var paragraphs = output.selectAll('.paragraph')
    .data(text.split(break_char));

  paragraphs.enter()
    .append('p')
    .attr('class', 'paragraph')
    .style('opacity', 0);

  paragraphs.exit().remove();

  paragraphs
    .text(function (d) { return d })
    .transition()
    .duration(300)
    .style('opacity', 1);
}

editor.on('input', input_handler);
body {
  vertical-align: top;
  height: 100%;
  background-color: #eee;
}
body * {
  box-sizing: border-box;
  font-family: arial;
  font-size: 0.8rem;
  margin: 0.5rem;
  padding: 0.5rem;
}
.input,
.output {
  display: inline-block;
  position: absolute;
  top: 0;
  height: auto;
}
.input {
  left: 0;
  right: 50%;
}
.output {
  left: 50%;
  right: 0;
}
.editor {
  display: inline-block;
  border: 0;
  width: 100%;
  min-height: 10rem;
  height: 100%;
}
.paragraph {
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div>
  <div class='input'>
    <textarea class='editor' placeholder='write away...'></textarea>
  </div>
  <div class='output'></div>
</div>


Answer #4

è possibile che l'utente prema invio e sposti tale contenuto nel successivo paragrafo esistente, mantenendo comunque la formattazione esistente dinamicamente e automaticamente

Se ti capisco bene, quello che vuoi è che una volta che il testo è diviso in paragrafi, e poi l'utente aggiunge del testo in uno di essi e preme Invio , il testo rimanente dovrebbe scorrere nei paragrafi successivi, distribuendo il testo traboccante allo stesso modo di fatto prima

Allo stesso modo, quando l'utente preme BackSpace all'inizio del paragrafo, il testo torna nuovamente al paragrafo precedente con il testo che trabocca distribuito negli altri paragrafi equamente come fatto in precedenza.

Come algoritmo, ciò di cui hai bisogno è qualcosa del genere:

  1. Dividere il testo iniziale in parti uguali e distribuire in paragrafi creando questi p modo dinamico come richiesto.
  2. Ascolta l'evento keyup su quegli elementi p
  3. Se il tasto premuto è Invio ,
    • 3.1 Estrarre il testo rimanente da dove è stato premuto Invio
    • 3.2 Estrai il testo da tutti i paragrafi successivi, anteponendo il testo traboccante estratto sopra
    • 3.3 Rimuovi tutti i paragrafi successivi e distribuisci il testo combinato proprio come abbiamo fatto nel passaggio 1
  4. Se premuto il tasto è BackSpace ,
    • 4.1 Controlla se è all'inizio del paragrafo e se c'è un paragrafo precedente
    • 4.2 Estrai il testo del paragrafo e aggiungi il testo da tutti i paragrafi successivi
    • 4.3 Rimuovere tutti i paragrafi successivi incluso quello corrente e aggiungere il testo estratto al paragrafo precedente.
    • 4.4 Distribuisci il testo combinato proprio come abbiamo fatto nel passaggio 1

Con questo algoritmo approssimativo, puoi iniziare la codifica che potrebbe avere un aspetto simile a questo:

Nota 1 : questo è tutto JavaScript, non jQuery.
Nota 2 : Questo è troppo semplificato, sarà necessario ottimizzare ulteriormente e risolvere tutti i casi limite.

Cache ha richiesto elementi e associa gestori di eventi:

var btn = document.getElementById('go'), 
    textarea = document.getElementById('textarea1'), 
    content = document.getElementById('content');

btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);

Distribuire il testo iniziale dalla textarea rimuovendo eventuali paragrafi esistenti:

function initialDistribute() {
    var text = textarea.value;
    while (content.hasChildNodes()) { content.removeChild(content.lastChild); }
    rearrange(text);
}

Logica per re-aranging / distribuzione del testo creando dinamicamente il numero di paragrafi richiesto:

function rearrange(text) {
    var chunks = text.match(/.{1,100}/g) || [];
    chunks.forEach(function(str, idx) {
        para = document.createElement('P');
        para.setAttribute('contenteditable', true);
        para.textContent = str;
        content.appendChild(para);
    });
}

Nota 3 : ho usato 100 caratteri per dividere il testo per questo esempio. Inoltre, questo non si occupa degli spazi e dividerà le parole intermedie. Dovrai farlo nel tuo codice. (# vedi modifica sotto)

Gestore di eventi per il trapping Immettere i tasti ( keycode 13 ) e BackSpace ( codice tasto 8 ). Inoltre, vedi se l'elemento è un elemento p :

function handleKey(e) {
    var para = e.target, position, 
        key, fragment, overflow, remainingText;
    key = e.which || e.keyCode || 0;
    if (para.tagName != 'P') { return; }
    if (key != 13 && key != 8) { return; }
    ...

Ottieni la posizione del cursore per determinare se BackSpace è stato premuto all'inizio del paragrafo o meno:

position = window.getSelection().getRangeAt(0).startOffset;    

Se si preme Invio , estrarre il testo dopo l'ultimo figlio del paragrafo corrente ( contenteditable produrrà un div quando si preme Invio ), rimuovere quel nodo, anteporre il testo rimanente di tutti i paragrafi successivi a questo e rimuovere i paragrafi rimanenti.

if (key == 13) {
    fragment = para.lastChild; overflow = fragment.textContent;
    fragment.parentNode.removeChild(fragment); 
    remainingText = overflow + removeSiblings(para, false);
    rearrange(remainingText);
}

Se BackSpace è stato premuto, controlla se c'è un paragrafo precedente e che il cursore era all'inizio. Se sì, estrai il testo rimanente da tutti i paragrafi successivi (incluso quello corrente) rimuovendoli:

if (key == 8 && para.previousElementSibling && position == 0) {
    fragment = para.previousElementSibling;
    remainingText = removeSiblings(fragment, true);
    rearrange(remainingText);
}

Logica per estrarre il testo da paragrafi successivi e rimuoverli:

function removeSiblings(elem, includeCurrent) {
    var text = '', next;
    if (includeCurrent && !elem.previousElementSibling) { 
        parent = elem.parentNode; text = parent.textContent;
        while (parent.hasChildNodes()) { parent.removeChild(parent.lastChild); }
    } else {
        elem = includeCurrent ? elem.previousElementSibling : elem;
        while (next = elem.nextSibling) { 
            text += next.textContent; elem.parentNode.removeChild(next);
        }
    }
    return text;
}

Mettendo tutto insieme, ecco uno snippet di lavoro:

Frammento:

var btn = document.getElementById('go'), 
	textarea = document.getElementById('textarea1'), 
	content = document.getElementById('content'), 
    chunkSize = 100;
    
btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);

function initialDistribute() {
    var text = textarea.value;
    while (content.hasChildNodes()) {
        content.removeChild(content.lastChild);
    }
    rearrange(text);
}

function rearrange(text) {
    var	chunks = splitText(text, false);
    chunks.forEach(function(str, idx) {
        para = document.createElement('P');
        para.setAttribute('contenteditable', true);
        para.textContent = str;
        content.appendChild(para);
    });
}

function handleKey(e) {
    var para = e.target, position, 
        key, fragment, overflow, remainingText;
    key = e.which || e.keyCode || 0;
    if (para.tagName != 'P') { return; }
    if (key != 13 && key != 8) { return; }
		position = window.getSelection().getRangeAt(0).startOffset;    
    if (key == 13) {
        fragment = para.lastChild;
        overflow = fragment.textContent;
        fragment.parentNode.removeChild(fragment); 
        remainingText = overflow + removeSiblings(para, false);
        rearrange(remainingText);
    }
    if (key == 8 && para.previousElementSibling && position == 0) {
        fragment = para.previousElementSibling;
        remainingText = removeSiblings(fragment, true);
        rearrange(remainingText);
    }
}

function removeSiblings(elem, includeCurrent) {
    var text = '', next;
    if (includeCurrent && !elem.previousElementSibling) { 
        parent = elem.parentNode; 
		text = parent.textContent;
        while (parent.hasChildNodes()) {
            parent.removeChild(parent.lastChild);
        }
    } else {
        elem = includeCurrent ? elem.previousElementSibling : elem;
        while (next = elem.nextSibling) { 
            text += next.textContent;
            elem.parentNode.removeChild(next);
        }
    }
    return text;
}

function splitText(text, useRegex) {
	var chunks = [], i, textSize, boundary = 0;
    if (useRegex) { 
        var regex = new RegExp('.{1,' + chunkSize + '}\\b', 'g');
        chunks = text.match(regex) || [];
    } else {
		for (i = 0, textSize = text.length; i < textSize; i = boundary) {
			boundary = i + chunkSize;
			if (boundary <= textSize && text.charAt(boundary) == ' ') {
				chunks.push(text.substring(i, boundary));
			} else {
				while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; }
				chunks.push(text.substring(i, boundary));
			}
		}
	}
	return chunks;
}
* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: monospace; font-size: 1em; }
h3 { margin: 1.2em 0; }
div { margin: 1.2em; }
textarea { width: 100%; }
button { padding: 0.5em; }
p { padding: 1.2em 0.5em; margin: 1.4em 0; border: 1px dashed #aaa; }
<div>
  <h3>Paste text in the field below to divide text into
        paragraphs..</h3>
  <textarea placeholder="Type text here, then press the button below." id="textarea1" rows="5" ></textarea><br/><br/>
  <button id="go">Divide Text into Paragraphs</button>
</div>
<hr>
<div>
  <h3>Divided Text Will Appear Below:</h3>
  <div id="content"></div>
</div>

E un violino con cui puoi giocare:

Fiddle: https://jsfiddle.net/abhitalks/jwnnn5oy/

Modifica 1:

Sistemata la regex per rompere ai limiti delle parole. Inoltre, ha aggiunto il codice procedurale non regex per lo stesso ( sulla falsariga del codice originale di Op ), per dimostrare l'Op su come inserire e integrare i suoi altri segmenti di codice in esso.

Nota 4 : Riguardo al commento di Op sull'utilizzo di jQuery, non ha nulla a che fare con il problema in questione. jQuery non è altro che JavaScript e dovrebbe essere banale per loro incorporare frammenti di snippet nella più grande base di codice.

Cambia Set: Aggiunta la funzione splitText .

Modifica 2:

Come per il tuo commento, se vuoi che la ridistribuzione avvenga automaticamente quando l'utente digita ... allora dovrai calcolare la lunghezza del testo in quel paragrafo e vedere se supera la dimensione del tuo chunk. In tal caso, effettuare la ridistribuzione da quel paragrafo in poi. Fai il contrario per backspace.

Inizialmente ho pubblicato la soluzione per il tuo requisito di fare ciò quando l'utente preme tra un testo qualsiasi e lo interrompe e lo distribuisce ai paragrafi successivi. Non è consigliabile farlo automaticamente come tipi di utenti perché le modifiche saranno troppo stridenti per l'utente.

Snippet 2:

var btn = document.getElementById('go'), 
	textarea = document.getElementById('textarea1'), 
	content = document.getElementById('content'), 
    chunkSize = 100;
    
btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);

function initialDistribute() {
    var text = textarea.value;
    while (content.hasChildNodes()) {
        content.removeChild(content.lastChild);
    }
    rearrange(text);
}

function rearrange(text) {
    var	chunks = splitText(text, false);
    chunks.forEach(function(str, idx) {
        para = document.createElement('P');
        para.setAttribute('contenteditable', true);
        para.textContent = str;
        content.appendChild(para);
    });
}

function handleKey(e) {
    var para = e.target, position, 
        key, fragment, overflow, remainingText;
    key = e.which || e.keyCode || 0;
    if (para.tagName != 'P') { return; }
    if (key != 13 && key != 8) { redistributeAuto(para); return; }
		position = window.getSelection().getRangeAt(0).startOffset;    
    if (key == 13) {
        fragment = para.lastChild;
        overflow = fragment.textContent;
        fragment.parentNode.removeChild(fragment); 
        remainingText = overflow + removeSiblings(para, false);
        rearrange(remainingText);
    }
    if (key == 8 && para.previousElementSibling && position == 0) {
        fragment = para.previousElementSibling;
        remainingText = removeSiblings(fragment, true);
        rearrange(remainingText);
    }
}

function redistributeAuto(para) {
	var text = para.textContent, fullText;
	if (text.length > chunkSize) {
		fullText = removeSiblings(para, true);
	}
	rearrange(fullText);
}

function removeSiblings(elem, includeCurrent) {
    var text = '', next;
    if (includeCurrent && !elem.previousElementSibling) { 
        parent = elem.parentNode; 
		text = parent.textContent;
        while (parent.hasChildNodes()) {
            parent.removeChild(parent.lastChild);
        }
    } else {
        elem = includeCurrent ? elem.previousElementSibling : elem;
        while (next = elem.nextSibling) { 
            text += next.textContent;
            elem.parentNode.removeChild(next);
        }
    }
    return text;
}

function splitText(text, useRegex) {
	var chunks = [], i, textSize, boundary = 0;
    if (useRegex) { 
        var regex = new RegExp('.{1,' + chunkSize + '}\\b', 'g');
        chunks = text.match(regex) || [];
    } else {
		for (i = 0, textSize = text.length; i < textSize; i = boundary) {
			boundary = i + chunkSize;
			if (boundary <= textSize && text.charAt(boundary) == ' ') {
				chunks.push(text.substring(i, boundary));
			} else {
				while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; }
				chunks.push(text.substring(i, boundary));
			}
		}
	}
	return chunks;
}
* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: monospace; font-size: 1em; }
h3 { margin: 1.2em 0; }
div { margin: 1.2em; }
textarea { width: 100%; }
button { padding: 0.5em; }
p { padding: 1.2em 0.5em; margin: 1.4em 0; border: 1px dashed #aaa; }
<div>
  <h3>Paste text in the field below to divide text into
        paragraphs..</h3>
  <textarea placeholder="Type text here, then press the button below." id="textarea1" rows="5" ></textarea><br/><br/>
  <button id="go">Divide Text into Paragraphs</button>
</div>
<hr>
<div>
  <h3>Divided Text Will Appear Below:</h3>
  <div id="content"></div>
</div>

Fiddle 2: https://jsfiddle.net/abhitalks/hvhr4ds8/

Nota 5 : nel primo violino, premere enter per interrompere il testo intermedio in modo da poter vedere come avviene la ridistribuzione mentre si digita. Inoltre, tieni presente che, a causa della logica di non infrangere una parola, ci vorranno alcuni altri caratteri prima che vengano ridistribuiti.

Cambia Set: Aggiunta la funzione redistributeAuto .


Answer #5

Molto semplice, se ti capisco correttamente.

$(function() {
    $("#Go").on('click', function() {
        var theText = $('textarea').val();
        var paragraphs = theText.split('\n\n');
        $("#text_land").html('');
        paragraphs.forEach(function(paragraph) {
          var lines = paragraph.split('\n');
          $('<p class="text" contenteditable />').html(lines.join('<br>')).appendTo("#text_land");
        });
    })
})
$('select').on('change', function() {
    var targets = $('#text_land p'),
        property = this.dataset.property;
    targets.css(property, this.value);
}).prop('selectedIndex', 0);
(end);
@media print {
    p {
        page-break-inside: avoid;
    }
}

p {
    position: relative;
}

@media print {
    .no-print,.no-print * {
        display: none !important;
    }
}

p {
    border-style: solid;
    color: #000;
    display: block;
    text-align: justify;
    border-width: 5px;
    font-size: 19px;
    overflow: hidden;
    height: 300px;
    width: 460px;
    word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


 <div align="center">
        <h4 align="center"><u>Paste text in the field below to divide text into
        paragraphs.</u></h4><br>
        <br>
        <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10">
</textarea><br>
        <br>
        <button id="Go">Divide Text into Paragraphs!</button>
    </div>
    <hr>
    <h2 align="center">Divided Text Will Appear Below:</h2>
    <div>
        <div align="center" id="text_land" style="font-family: monospace">
        </div>
    </div>


Answer #6

Associa questo evento a ogni tuo paragrafo

$('.text').bind("DOMSubtreeModified", function () {
                        var text = $(this).html();
                        var newLineIndex = text.indexOf('&nbsp;');
                        if (newLineIndex != -1) {
                            var currentP = text.substring(0, newLineIndex);
                            var newP = text.substring(newLineIndex + 11, text.length - 6);
                            $(this).html(currentP);
                            var nextElement = $(this).next();
                            if (nextElement != null) {
                                // append rest of line to next paragraph
                                nextPara = newP + nextElement.html();
                                nextElement.html(nextPara);
                            }
                            else {
                                // Else, create new paragraph
                                $(this).after('<br><\/br> <p contenteditable="true" class="text">' + newP + '</p>');
                            }
                        }
                    });

Quindi, il tuo intero codice dovrebbe essere simile a questo,

$(function () {
            $("#Go").on('click', function () {
                var theText = $('textarea').val();
                var numberOfCharacters = 300;
                while (theText.length) {
                    while (theText.length > numberOfCharacters &&
                        theText.charAt(numberOfCharacters) !== ' ') {
                        numberOfCharacters++;
                    }
                    $("#text_land").append("<br><\/br><p>" + theText.substring(
                            0, numberOfCharacters) +
                        "<\/p><br><\/br>");
                    theText = theText.substring(numberOfCharacters);
                    numberOfCharacters = 300;
                    $('p').attr('contenteditable', 'true');
                    $("p").addClass("text");

                    $('.text').bind("DOMSubtreeModified", function () {
                        var text = $(this).html();
                        var newLineIndex = text.indexOf('&nbsp;');
                        if (newLineIndex != -1) {
                            var currentP = text.substring(0, newLineIndex);
                            var newP = text.substring(newLineIndex + 11, text.length - 6);
                            $(this).html(currentP);
                            var nextElement = $(this).next();
                            if (nextElement != null) {
                                // append rest of line to next paragraph
                                nextPara = newP + nextElement.html();
                                nextElement.html(nextPara);
                            }
                            else {
                                // Else, create new paragraph
                                $(this).after('<br><\/br> <p contenteditable="true" class="text">' + newP + '</p>');
                            }
                        }
                    })
                }
            })
        })
        $('select').on('change', function () {
            var targets = $('#text_land p'),
                property = this.dataset.property;
            targets.css(property, this.value);
        }).prop('selectedIndex', 0);

Non esitate a chiedere qualsiasi dubbio su questo.





css