window.getSelection() возвращает непредвиденные значения

Я использую div с contenteditable для создания текстового редактора. Я чувствую, что потерпел неудачу в одном из первых препятствий.window.getSelection() возвращает непредвиденные значения

<html> 
<head></head> 
<body> 
<input type="button" id="bold" value="B" /> 
<div id="wysiwyg" contenteditable="true" style="border:solid;width:500px;height:300px;"></div> 

<script> 
var bold = document.getElementById("bold"); 
var wysiwyg = document.getElementById("wysiwyg"); 

bold.addEventListener("click", function(){ 
    update("<b>", "</b>"); 
});  

function update(startTag, endTag){ 

//find the selected text 
var selected_text = ""; 
    if (window.getSelection) { 
     selected_text = window.getSelection(); 
    } else if (document.getSelection) { 
     selected_text = document.getSelection(); 
    } else if (document.selection) { 
     selected_text = document.selection.createRange().text; 
    } 

    //user could have selected in reverse, so we need to make sure the values are in correct order 
var startPos = selected_text.anchorOffset >= selected_text.focusOffset ? selected_text.focusOffset : selected_text.anchorOffset; 
var endPos = selected_text.focusOffset <= selected_text.anchorOffset ? selected_text.anchorOffset : selected_text.focusOffset; 

if (startPos == endPos) //There is no selection 
    return; 

var startText = wysiwyg.innerText.substr(0, startPos); 
var textToWrap = wysiwyg.innerText.substr(startPos, endPos- startPos); 
var endText = wysiwyg.innerText.substr(endPos); 
wysiwyg.innerHTML = startText + startTag + textToWrap + endTag + endText; 

} 

</script> 
</body> 
</html>

Если вы должны были выполнить этот код и введите 3 слова в DIV, выберите среднее слово (выделение с помощью мыши), а затем нажмите кнопку B на экране (в формате HTML), вы бы отметить, программа выполняет по желанию, в том, что она сделает выделенное вами выделение полужирным.

Если вы сейчас выбрали последнее слово 3, которое вы ввели, и попытайтесь сделать его полужирным, вы заметите, что первое слово становится полужирным.

Посмотрите на код, я вижу, что проблема selected_text.anchorOffset изначально возвращает правильное значение, но при последующих запросах оно ошибочно (или, по крайней мере, предоставляет значение, которое я не понимаю).

Это JSFIDDLE продемонстрирует проблему!

Почему возврат window.getSelection не включает выбранные начальные и конечные позиции текста?

источник

2016-02-09 MyDaftQuestions

Не нужно усложнять ситуацию. Если вы поддерживаете браузер от IE8 и выше, вы можете использовать функцию execCommand. Обновленный код ниже:

var bold = document.getElementById("bold"); 
var wysiwyg = document.getElementById("wysiwyg"); 

bold.addEventListener("click", function(){ 
    document.execCommand('bold'); 
});

Чтобы добавить к ответу, и если вы не поняли, почему ваш код не работает.

Во-первых, определение от MDN для focusOffset или anchorOffset (оба похожи):

«Selection.focusOffset: Selection.focusOffset свойство только для чтения возвращает количество символов, которые фокус Отбор смещён в пределах Selection.focusNode. "

Давайте примем пример текста: «Сделайте текст жирным», и мы выбираем «жирный» каждый раз.

Впервые, он правильно позиционирует позицию и делает элемент жирным. Таким образом, новый текст выглядит как «Make text bold».

Второй раз, он отсчитывает позицию от метки . Итак, его 0-3 и текст будут «Make text bold».

В-третьих, он отсчитывает позицию от тега . Итак, его 6-9 и текст результата будут «Make text bold».

В-четвертых, он подсчитывает позицию от тега . Итак, его 0-3 снова. Итак, шаблон 0-3 и 6-9 будет повторяться снова и снова.

источник

2016-02-09 17:01:33 gothical

Ненавижу этот ответ, потому что я уже создал полный редактор, используя textarea и div, чтобы сделать предварительный просмотр ... И тогда я, хотя бы был умным и использовал 'contenteditable' с div ... И функциональность уже встроена. Какая сложная 3 дня работы! Несмотря на это, ответ прекрасен, и мой редактор теперь работает намного эффективнее, не показывая исходный код! благодаря – MyDaftQuestions

window.getSelection() возвращает непредвиденные значения

ответ

Смежные вопросы