Следующий fiddle позволяет вставлять текст в {{X0 }} и динамически генерируется в одинаковые абзацы <p>, состоящие из одинакового количества символов.


Возникла проблема; текст из предыдущих динамически генерируемых абзацев <p> переполняется внутри каждого тега и не переходит к следующему динамическому абзацу должным образом. Следовательно, может ли пользователь нажать ввод и переместить этот контент вниз в следующий существующий абзац, сохраняя при этом существующее форматирование динамически и автоматически?

Если бы можно было предоставить новый Fiddle, я был бы очень признателен, поскольку я до сих пор новичок в кодировании. Еще раз, Скрипка может быть найдена здесь.

Обновление . Возможно ли, чтобы после создания абзацев пользователь нажимал клавишу ввода и, если возможно, плавно перемещал свое содержание в нижеследующий абзац? И также для того же самого, чтобы примениться, когда нажата кнопка возврата, чтобы содержание переместилось вверх в вышеупомянутый параграф? Возникла проблема в том, что текст при нажатии клавиши ввода, кажется, скрывает текст из-за свойства переполнения в 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>
35
Dave 17 Дек 2015 в 15:03

8 ответов

Если я правильно понимаю ваш вопрос, вы можете добавить что-то вроде этого:

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

Затем, когда вы печатаете, он будет генерировать новые поля на лету, когда пользователь нажимает ввод. Вот полный пример: https://jsfiddle.net/2hcfbp2h/6/

0
zpr 21 Дек 2015 в 07:54

Очень просто, если я вас правильно понимаю.

$(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>
1
Louay Alakkad 21 Дек 2015 в 07:35

Я думаю, что свойство CSS: white-space: pre-wrap может быть тем, что вы ищете:

https://jsfiddle.net/dbz3mwsb/1

0
Joshua 17 Дек 2015 в 12:25

Пакет npm построитель абзацев разбивает непрерывный текст на равномерно распределенные абзацы и все примерно с одинакового размера в количестве слов. Вы можете определить количество слов для абзацев.

Этот скрипт узла построителя абзацев генерирует абзацы из непрерывного текста. Он выводит текст, размер каждого абзаца которого приблизительно одинаков, обеспечивая равномерное распределение абзацев в тексте. Он не разбивает текст на числа, такие как «1.2».

Существует возможность определить символ разрыва между абзацами, или вы можете извлечь абзацы в массив строк, из которого вы можете применить html-тег <p>. Проверьте его документацию для дальнейшего уточнения.

0
João Pimentel Ferreira 18 Июл 2019 в 18:56

D3 на самом деле вполне подходит для этого. Если я вас правильно понимаю, добавление и удаление элементов <p> должно появляться и исчезать естественным образом при редактировании.

Это немного грубо, но в приведенном ниже примере новый абзац «обнаружен» после вставки двух новых строк. Значение <textarea> .split() соответствует этим критериям и применяется к <div> справа в виде массива data(). Таким образом, для каждого элемента данных мы просто вводим элементы / выход / обновление <p>. Мы получаем приятные и простые добавления и удаления, так как мы редактируем текст без большого количества DOM-изменений.

С некоторыми изменениями вы, вероятно, могли бы объединить <textarea> и <p> в своего рода редакторе '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>
1
Will 23 Дек 2015 в 16:53

Можете ли вы проверить эту скрипку. Ну, я не уверен, что это то, что вы хотели. Я просто добавляю событие в редактируемый абзац, чтобы контролировать желаемый результат.

$(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>
1
Markipe 28 Дек 2015 в 03:18

Пожалуйста, проверьте скрипку. Я добавил код для прослушивания нажатия клавиш <p> элементов и выполнения необходимых манипуляций с текстом.

$(function() {
  $("#Go").on('click', function() {
    var $p, a = [];
    var theText = $('textarea').val();
    var numberOfCharacters = 300;
    while (theText.length) {
      while (theText.length > numberOfCharacters &&
        theText.charAt(numberOfCharacters) !== ' ') {
        numberOfCharacters++;
      }

      $p = $("<p contenteditable class='text'>" + theText.substring(0, numberOfCharacters) + "<\/p>")
        .on('keydown', function(e) {
          var p = this;
          setTimeout(function() {
            if (e.which === 13) {
              var i;
              var k = $(p).html().split('<br>');
              if ((i = a.indexOf(p)) > -1 && a[i + 1])
                $(a[i + 1]).html(k.pop() + ' ' + $(a[i + 1]).html());

              $(p).html(k.join('<br>'));
            }
          });
        });

      a.push($p.get(0));

      $("#text_land").append("<br><\/br>", $p, "<br><\/br>");

      theText = theText.substring(numberOfCharacters);
      numberOfCharacters = 300;
    }
  })
})
$('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;
}
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/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>
1
Eugene Tiurin 25 Дек 2015 в 11:35

Свяжите это событие с каждым вашим абзацем,

$('.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>');
                            }
                        }
                    });

Итак, весь ваш код должен выглядеть так,

$(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);

Пожалуйста, не стесняйтесь задавать любые сомнения по этому поводу.

1
Abhilash Augustine 29 Дек 2015 в 11:37