Как установить мигающий курсор, в блоке для WYSIWYG-редактора?
Создаю визуальный редактор, где будут специальные кнопки для добавления цветовых блоков. Всего их будет 5. Я решила сделать так что при щелчке добавляется блок и автоматически устанавливается курсор для печатания, чтобы пользователь мог сразу напечатать текст. Столкнулась с такой проблемой, что мигающий курсор добавляется, только в первый блок при повторном использовании просто создается блок а курсор не добавляется. Как это исправить, чтобы в каждый новый блок размещался курсор, для печатания текста?
Вот мой код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Доавление полей</title>
<style>
/*стили заметок*/
.shortcodestyle {
font: 14px arial;
line-height: 1.4;
padding: 15px 15px 15px 75px;
word-wrap: break-word;
border-radius: 2px;
clear: both;
margin: 10px auto;
max-width: 660px;
position: relative;
text-decoration:none;
}
/*Внимание*/
.warning {
background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #EAD18C;
color: #4F2012;
}
.warning a {
color: #D15225;
}
/*Информация*/
.info {
background: #bae5f8 url("images/info.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #9BBFC4;
color: #0F2B33;
}
.info a {
color: #216CAF;
}
/*Важно*/
.important {
background: #ffcaca url("images/important.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #f4a9a9;
color: #330D0D;
}
.important a {
color: #ff3a37;
}
/*Совет*/
.advice {
background: #ccfacc url("images/advice.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #b1dbb1;
color: #0b280b;
}
.advice a {
color: #5E9800;
}
/*Нейтральность*/
.neutrality {
background: #f5f5f5 url("images/neutrality.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #dfdfdf;
color: #222;
}
.neutrality a {
color: #5587c4;
}
</style>
</head>
<body>
<script>
$(document).ready(function () {
$('.btn-block').on("click",function(e)
{
e.preventDefault();
e.stopPropagation();
let target = e.target;
tag = target.firstChild;
let myclass = "";
if(target.getAttribute("data-command")==="warning")
{
myclass = "warning shortcodestyle";
console.log(myclass);
}
else
if(target.getAttribute("data-command")==="important")
{
myclass = "important shortcodestyle";
}else
if(target.getAttribute("data-command")==="info")
{
myclass = "info shortcodestyle";
}
if(target.getAttribute("data-command")==="advice")
{
myclass = "advice shortcodestyle";
}
if(target.getAttribute("data-command")==="neutrality")
{
myclass = "neutrality shortcodestyle";
}
var rangeElement = document.createElement("div");
rangeElement.setAttribute("class", myclass);
rangeElement.innerHTML = "<p><br></p>";
var sp1 = document.getElementsByClassName("editable")[0];
var sp2 = document.getElementsByClassName("component")[0];
sp1.insertBefore(rangeElement, sp2);
var range = document.createRange();
first = rangeElement.firstElementChild.firstChild;
last = rangeElement.lastElementChild.lastChild;
var startCon = first;
var startOff = first.length;
var endCon = last;
var endOff = last.length;
range.setStart(startCon, startOff);
range.setEnd(endCon, endOff);
var selection = window.getSelection ();
selection.addRange(range);
});
});
</script>
<button type="button" class="btn-block" data-command="warning" title="Внимание">Внимание</button>
<button type="button" class="btn-block" data-command="important" title="Важно">Важно</button>
<button type="button" class="btn-block" data-command="info" title="Информация">Информация</button>
<button type="button" class="btn-block" data-command="advice" title="Совет">Совет</button>
<button type="button" class="btn-block" data-command="neutrality" title="Нейтральность">Нейтральность</button>
<div class="editable" contenteditable="true" scrolling="auto" style="display: block; height: auto;">
<div class="component" contenteditable="false"></div>
</div>
</body>
</html>
|
Katy93,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Доавление полей</title>
<style>
/*стили заметок*/
.shortcodestyle {
font: 14px arial;
line-height: 1.4;
padding: 15px 15px 15px 75px;
word-wrap: break-word;
border-radius: 2px;
clear: both;
margin: 10px auto;
max-width: 660px;
position: relative;
text-decoration: none;
}
/*Внимание*/
.warning {
background: #fff2b8 url("images/warning.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #EAD18C;
color: #4F2012;
}
.warning a {
color: #D15225;
}
/*Информация*/
.info {
background: #bae5f8 url("images/info.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #9BBFC4;
color: #0F2B33;
}
.info a {
color: #216CAF;
}
/*Важно*/
.important {
background: #ffcaca url("images/important.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #f4a9a9;
color: #330D0D;
}
.important a {
color: #ff3a37;
}
/*Совет*/
.advice {
background: #ccfacc url("images/advice.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #b1dbb1;
color: #0b280b;
}
.advice a {
color: #5E9800;
}
/*Нейтральность*/
.neutrality {
background: #f5f5f5 url("images/neutrality.png") no-repeat scroll 15px 50%;
border-bottom: 2px solid #dfdfdf;
color: #222;
}
.neutrality a {
color: #5587c4;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
$('.btn-block').on("click", function(e) {
e.preventDefault();
e.stopPropagation();
let target = e.target;
tag = target.firstChild;
let myclass = "";
if (target.getAttribute("data-command") === "warning") {
myclass = "warning shortcodestyle";
console.log(myclass);
} else
if (target.getAttribute("data-command") === "important") {
myclass = "important shortcodestyle";
} else
if (target.getAttribute("data-command") === "info") {
myclass = "info shortcodestyle";
}
if (target.getAttribute("data-command") === "advice") {
myclass = "advice shortcodestyle";
}
if (target.getAttribute("data-command") === "neutrality") {
myclass = "neutrality shortcodestyle";
}
var rangeElement = document.createElement("div");
rangeElement.setAttribute("class", myclass);
rangeElement.innerHTML = "<p><br></p>";
var sp1 = document.getElementsByClassName("editable")[0];
var sp2 = document.getElementsByClassName("component")[0];
sp1.insertBefore(rangeElement, sp2);
var range = document.createRange();
range.setStart(rangeElement.childNodes[0], 0);
range.collapse(true);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
rangeElement.focus();
});
});
</script>
<button type="button" class="btn-block" data-command="warning" title="Внимание">Внимание</button>
<button type="button" class="btn-block" data-command="important" title="Важно">Важно</button>
<button type="button" class="btn-block" data-command="info" title="Информация">Информация</button>
<button type="button" class="btn-block" data-command="advice" title="Совет">Совет</button>
<button type="button" class="btn-block" data-command="neutrality" title="Нейтральность">Нейтральность</button>
<div class="editable" contenteditable="true" scrolling="auto" style="display: block; height: auto;">
<div class="component" contenteditable="false"></div>
</div>
</body>
</html>
|
Спасибо работает, это тестовый пример я собираюсь перенести это на основной редактор. Только в главном редакторе у меня нет внутреннего контейнера с классом component. Я этот контейнер добавила, чтобы была возможность использовать insertBefore. Так как он принимает два значение. 1. Элемент который нужно вставить и 2. Элемент перед которым нужно вставить.
var rangeElement = document.createElement("div");
rangeElement.setAttribute("class", myclass);
rangeElement.innerHTML = "<p><br></p>";
var sp1 = document.getElementsByClassName("editable")[0];
var sp2 = document.getElementsByClassName("component")[0];
sp1.insertBefore(rangeElement, sp2);
Раз такого элемента как компонент у меня отсутствует в основном редакторе. Существует ли возможность по другому сделать вставку? |
Цитата:
|
Цитата:
sp1.append(rangeElement); |
| Часовой пояс GMT +3, время: 09:17. |