Редактор javascript - как сделать выбор

63
8

Я пытаюсь написать простой текстовый редактор. то, что я хочу сделать, это позволить пользователю ввести текстовое поле (или текстовый файл) и выбрать текст с помощью мыши или с помощью клавиши сдвига и нажать кнопку, чтобы применить эффекты, основанные на цвете. мои вопросы таковы:

как сделать захват таким образом, чтобы он не терялся при нажатии кнопки как сохранить текст и выбор как сделать это WYSIWYG

ps Мне не нужен полноценный текстовый редактор. Мне нужен только один эффект

благодаря

спросил(а) 2021-01-27T20:04:34+03:00 4 месяца, 3 недели назад
1
Решение
63

    как сделать захват таким образом, чтобы он не терялся при нажатии кнопки

    как сохранить текст и выбор

Я полностью согласен с ответом @TimDown на другой вопрос. Он заменяет текущий выбор другой строкой.

Мы создаем строку, беря значение выбора цвета и помещая его в тег span и вставляя текущий выделенный текст.

    как сделать это WYSIWYG

Используйте contenteditable div и производите вывод в скрытую текстовую область при отправке формы.

Здесь все вместе. Опять же, первая функция replaceSelection() не является моим кодом.

document.getElementById('color').onchange = function() {
var replace = document.createElement('span');
replace.style.color = this.value;
replace.textContent = window.getSelection().toString();
replaceSelection(replace.outerHTML, true);
}

document.getElementById('wysiwyg').onsubmit = function() {
document.getElementById('result').textContent = document.getElementById('#input').innerHTML;
}

// @TimDown
function replaceSelection(html, selectInserted) {
var sel, range, fragment;
sel = window.getSelection();

// Test that the Selection object contains at least one Range
if (sel.getRangeAt && sel.rangeCount) {
// Get the first Range (only Firefox supports more than one)
range = window.getSelection().getRangeAt(0);
range.deleteContents();

// Create a DocumentFragment to insert and populate it with HTML
// Need to test for the existence of range.createContextualFragment
// because it non-standard and IE 9 does not support it
if (range.createContextualFragment) {
fragment = range.createContextualFragment(html);
} else {
// In IE 9 we need to use innerHTML of a temporary element
var div = document.createElement("div"), child;
div.innerHTML = html;
fragment = document.createDocumentFragment();
while ( (child = div.firstChild) ) {
fragment.appendChild(child);
}
}
var firstInsertedNode = fragment.firstChild;
var lastInsertedNode = fragment.lastChild;
range.insertNode(fragment);
if (selectInserted) {
if (firstInsertedNode) {
range.setStartBefore(firstInsertedNode);
range.setEndAfter(lastInsertedNode);
}
sel.removeAllRanges();
sel.addRange(range);
}
}
}

#input {
min-height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 1px;
}
#result {
display: none;
}
#wysiwyg input[type="submit"] {
height: 2em;
float: right;
}
<form action="" method="post" id="wysiwyg">
<div id="input" contenteditable="true"></div>
<textarea name="result" id="result"></textarea>
<input type="color" id="color" />
<input type="submit" value="submit" />
</form>

ответил(а) 2021-01-27T20:04:34+03:00 4 месяца, 3 недели назад
44

как сделать захват таким образом, чтобы он не терялся при нажатии кнопки

Вы можете получить выделенный текст, используя метод window.getSelection.

как сохранить текст и выбор

Сохраните его в переменной.

Пример: var selection = window.getSelection().toString();


как сделать это WYSIWYG

Вы можете выполнять различные действия, такие как выделение жирным шрифтом, подчеркивание или выделение текста (и многих других действий) с помощью метода window.execCommand.

Я создал простой редактор wysiwyg, который выделяет полужирный, подчеркивающий и курсивный выделенный текст.

Проверьте это здесь.

ответил(а) 2021-01-27T20:04:34+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема