ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.f_content>.value span {
background-color: #FFFF00;
color: #008000;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let span = document.createElement("span");
const saveText = () => {
var editor = document.querySelector('#select-text');
if (span.parentNode) span.replaceWith(editor.value);
editor.value = span.innerHTML = "";
$('.mb-3.editor').remove();
var div = document.querySelector('.f_content > .value');
var new_text = $(div).html();
//...
//ajax запрос
}
function canselText(button) {
$('.mb-3.editor').remove();
span.replaceWith(span.textContent);
span.textContent = '';
}
const get_selected_text = () => {
let txt = window.getSelection().toString();
if (!txt) return false;
let range = window.getSelection().getRangeAt(0);
let selectionContents = range.extractContents();
span.appendChild(selectionContents);
range.insertNode(span);
var redactor = '';
redactor += '<div class="mb-3 editor">'
redactor += '<textarea id="select-text" class="form-control mb-3 mt-3" rows="3" cols="100%" name="select-text"></textarea>'
redactor += '<button type="button" onclick="saveText()" class="btn btn-sm btn-primary mr-3">Save</button>'
redactor += '<button type="button" onclick="canselText()" class="btn btn-sm btn-primary ">Cansel</button>'
redactor += '</div>'
$('.icms-content-fields').append(redactor);
let editor = document.querySelector('#select-text');
editor.value = txt;
editor.focus();
}
$(function() {
document.querySelector('.f_content > .value').onmouseup = get_selected_text;
});
</script>
</head>
<body>
<div class="icms-content-fields"></div>
<div class="f_content">
<div class="value">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, doloremque provident eos recusandae impedit possimus magnam tenetur corporis tempora aspernatur laboriosam repellendus est voluptatibus eum tempore incidunt inventore temporibus
sit?</div>
</div>
</body>
</html>