window.getSelection работает неправильно в Chrome - PullRequest
Новая
       32

window.getSelection работает неправильно в Chrome

0 голосов
/ 22 сентября 2018

Я создаю wysiswyg.Мой редактор должен добавить поле, содержащее выделенный текст и его стиль .

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

Моя проблема в том, что если выделенный текст имеет некоторые стили, например зачеркивание, но его стиль не включен в window.getSelection ().

Это нормально работает в Firefox, но не в Chrome.Вот пример в GIF.

В Chrome (не работает, стиль не включен):

введите описание изображения здесь

В Firefox(Работает нормально, стиль включен):

введите описание изображения здесь

Я попытался протестировать в Chrome и обнаружил, что мне нужно выбрать еще один символдля выделенного текста и window.getSelection () вернет выделенный текст и его стиль правильно.Например, когда текст в редакторе имеет вид «hello world 123» и мне нужно выбрать «world» со своим стилем, я должен выбрать « world » (пробел включен) дляполучить свой стиль.Вот пример в GIF.

введите описание изображения здесь

Не могли бы вы предложить, как я могу решить эту проблему?

function strikethrough() {
  document.execCommand('strikeThrough', false, '')
}

function addBox() {
  var html = getSelectionHtml()
  document.execCommand('insertHTML', false, '</br><div class="box">' + html + '</div></br>')
}

function getSelectionHtml() {
  var html = "";
  if (typeof window.getSelection != "undefined") {
    var sel = window.getSelection();
    if (sel.rangeCount) {
      var container = document.createElement("div");
      for (var i = 0, len = sel.rangeCount; i < len; ++i) {
        container.appendChild(sel.getRangeAt(i).cloneContents());
      }
      html = container.innerHTML;
    }
  } else if (typeof document.selection != "undefined") {
    if (document.selection.type == "Text") {
      html = document.selection.createRange().htmlText;
    }
  }
  return html
}
.box {
  border: 1px solid black;
}

.editor {
  width : 500px;
  height : 500px;
  border : 1px solid black;
  font-size:30px;
}
<button onclick="strikethrough()">strike through</button>
<button onclick="addBox()">add box</button><br><br>
<div class="editor" contenteditable><div>
...