Я пытаюсь создать собственный текстовый редактор с минимальными функциями, такими как жирный шрифт, itali c, только подчеркивание и стилизация абзацев.
Это для учебной цели. Основная цель - избежать взаимодействия на основе цвета через JavaScript. Я хочу использовать взаимодействие цветов только с CSS. Итак, я хочу выполнить sh с чистым JS & CSS без использования какой-либо библиотеки.
Для этого случая я использовал checkbox для создания жирного шрифта в contenteditable div. Таким образом, если я выберу текст только жирным шрифтом, тогда я могу установить значения от checkbox.checked = true до JavaScript.
Но флажок очищает выделение в html перед тем, как получить range выбранного текста из div.innerHTML. Как я могу решить эту проблему?
function actionBold122(e){
let editor = document.getElementById('editor')
let input = e.getElementsByTagName('input')[0]
if(input != null){
input.checked = !input.checked
}
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var arr = []
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
arr.push(sel.getRangeAt(i).cloneContents().textContent);
}
html = arr.join();
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
alert(html)
}
input{
display: none;
}
input:checked+svg{
background-color: rgb(194, 10, 10);
fill: #fff;
}
label{
cursor: pointer;
}
#editor{
width: 50%;
min-height: 40px;
background-color: antiquewhite;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<label onclick="actionBold122(this); return false">
<input class="none" type="checkbox" name="0" checked>
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</label>
<div id="editor" contenteditable>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis ea, voluptas maxime perspiciatis praesentium magni repellendus earum suscipit sint. Veritatis fuga adipisci accusantium similique distinctio vero tenetur ipsam fugiat.</p>
</div>
<button onclick="actionBold122(this)">Get Text</button>
</body>
</html>
Текущий код:
Я хочу, чтобы то же поведение Получить текст button в checkbox input. Я не знаю, что мне нужно делать. Пожалуйста, предложите мне любую идею, чтобы преодолеть эту проблему. Заранее спасибо!