|
Сообщение от savsoft
|
|
Нужно то, что удаляется, выделять, например красным перечеркнутым шрифтом, а то что дописано учителем, например зеленным. Ученик видит текст с показанными исправлениями.
|
это уже делает, предложенный вам ранее
код.
написать исправление, выделить текст, заменить. кликать по замене.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.selected {
border-radius: 3px;
-webkit-box-decoration-break: clone;
background-color: #6BDB6B;
}
::selection {
background: rgba(0, 0, 0, .25);
}
.remove{
text-decoration: line-through;
color: #FF0000;
display: none;
}
.remove.open{
display: inline;
}
</style>
<script>
let dataTxt = new Map;
let current;
function styliString() {
const textarea = document.querySelector(".txt");
const content = textarea.value.trim();
if(!content) return;
const selection = getSelection();
const range = selection.getRangeAt(0);
const selectionContents = range.extractContents();
const span = document.createElement("span");
const txt = span.cloneNode();
txt.classList.add('remove');
textarea.value = "";
for(const oldSpan of selectionContents.querySelectorAll(".selected")) {
for(const childNode of [...oldSpan.childNodes])
oldSpan.parentNode.insertBefore(childNode, oldSpan);
oldSpan.remove();
}
selectionContents.normalize();
span.classList.add("selected");
span.append(content);
txt.append(selectionContents);
range.insertNode(span);
span.after(txt);
dataTxt.set(span, txt);
}
document.addEventListener("click", ({ target }) => {
if(target.classList.contains("save")) {
styliString();
}
if(target.classList.contains("selected")) {
const txt = dataTxt.get(target);
if(current && current !== txt) current.classList.remove("open");
current = txt;
current.classList.toggle("open")
}
});
</script>
</head>
<body>
<button class="save" >Заменить выделенный текст</button>
<textarea class="txt" name=""></textarea>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque si aut requietem natura non quaereret aut eam posset alia quadam ratione consequi. Hanc quoque iucunditatem, si vis, transfer in animum; <b>Quod autem ratione actum est, id officium appellamus.</b> Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. An hoc usque quaque, aliter in vita? Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Theophrasti igitur, inquit, tibi liber ille placet de beata vita? <i>Eademne, quae restincta siti?</i> Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere.</p>
</body>
</html>