Следующий JSFiddle разбивает тексты на отдельные абзацы <p> с заданным текстовым пределом.
Можно ли изменить размер текста в полях в соответствии с параметром выбора с помощью contenteditable, сохраняя возможность редактировать, удаляя текстовое ограничение и сохраняя свойство динамического размера?
ОБНОВЛЕНИЕ 2: Все созданные поля должны быть:
"равны одинаковой высоте и ширине
и измените, когда шрифт обновляется динамически, необходимо быть согласованным во всех элементах.
ОБНОВЛЕНИЕ 3: Последний сгенерированный абзац не равен другим абзацам с высотой размера границы.
ОБНОВЛЕНИЕ 4: Все абзацы должны быть сгенерированы одинаково с атрибутом height auto. Проблема с текущими ответами заключается в том, что последняя сформированная граница абзаца также должна быть равна той же высоте, что и предыдущая граница высоты, как и другие абзацы, в том числе при изменении размера шрифта.
Обновление 5 [изображение]: пример проблемы с последней разделенной высотой абзаца и границей, не равными другим.
Ссылка на Fiddle
Если бы появилась новая скрипка, это было бы очень оценено, поскольку я все еще новичок в кодировании. Спасибо!
$(function() {
$('select').on('change', function() {
var targets = $('p'),
property = this.dataset.property;
targets.css(property, this.value);
}).prop('selectedIndex', 0);
});
var btn = document.getElementById('go'),
textarea = document.getElementById('textarea1'),
content = document.getElementById('content'),
chunkSize = 100;
btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);
content.addEventListener('paste', handlePaste);
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 handlePaste(e) {
if (e.target.tagName != 'P') {
return;
}
overflow = e.target.textContent + 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;
}#text_land {
border: 1px solid #ccc;
padding: 25px;
margin-bottom: 30px;
}
textarea {
width: 95%;
}
label {
display: block;
width: 50%;
clear: both;
margin: 0 0 .5em;
}
label select {
width: 50%;
float: right;
}
* {
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: .5em;
}
p {
padding: 1.2em .5em;
margin: 1.4em 0;
border: 1px dashed #aaa;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="styles">
<label>Font-size:
<select data-property="font-size">
<option disabled>
Select font-size:
</option>
<option>
smaller
</option>
<option>
10px
</option>
<option>
12px
</option>
<option>
14px
</option>
<option>
16px
</option>
<option>
18px
</option>
<option>
20px
</option>
<option>
larger
</option>
</select>
</label>
</div>
<div>
<h3>Paste text in the field below to divide text into paragraphs..</h3>
<textarea id="textarea1" placeholder="Type text here, then press the button below." rows="5">
</textarea>
<br>
<br>
<button id="go">Divide Text into Paragraphs</button>
</div>
<div>
<h3 align="right">Divided Text Will Appear Below:</h3>
<hr>
<div id="content"></div>
</div>