[Range] surroundContents

Проблема в следующем.

К примеру, выделяю слово и оборачиваю его тегом.



Получаю


Выделяю



Получаю



Выделяю



Ничего не получаю


Код

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<iframe src="text.html" frameborder="3"></iframe>
<span id='magic'>Magic</span>

Содержимое text.html

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<div contenteditable="true">Текст текст и еще текст</div>

Скрипт

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .javascript.geshi_code {font-family:monospace;} .javascript.geshi_code .imp {font-weight: bold; color: red;} .javascript.geshi_code .kw1 {color: #000066; font-weight: bold;} .javascript.geshi_code .kw2 {color: #003366; font-weight: bold;} .javascript.geshi_code .kw3 {color: #000066;} .javascript.geshi_code .co1 {color: #006600; font-style: italic;} .javascript.geshi_code .co2 {color: #009966; font-style: italic;} .javascript.geshi_code .coMULTI {color: #006600; font-style: italic;} .javascript.geshi_code .es0 {color: #000099; font-weight: bold;} .javascript.geshi_code .br0 {color: #009900;} .javascript.geshi_code .sy0 {color: #339933;} .javascript.geshi_code .st0 {color: #3366CC;} .javascript.geshi_code .nu0 {color: #CC0000;} .javascript.geshi_code .me1 {color: #660066;} .javascript.geshi_code span.xtra { display:block; }
document.getElementById('magic').onclick = getAndEdit;
  function getAndEdit(){
    var rng = window.frames[0].document.getSelection().getRangeAt(0);
  rng.surroundContents(document.createElement("span"));
  }
0
javascript js range surroundcontents wysiwyg

1 ответов

Потому, что surroundContents оборачивает только целостные ноды — посмотрите в консоль, там есть сообщение об ошибке и почему так произошло.

Тобишь, когда вы выделяете два слова, то в реальности начало и конец выделения находятся не там, где вы думаете, вот в чем подвох (я обозначил вертикальной чертой, где на самом деле находится начало и конец выделения):

<div>Текст <span>|текст</span> и <span>еще|</span> текст</div>
Видите, в чем дело? Выделение не начинается снаружи тегов. Если бы начало и конец Range были такими:
<div>Текст |<span>текст</span> и <span>еще</span>| текст</div>, то всё было бы хорошо. А в данный момент вы захватываете в выделении обрывки тегов.

Поэтому вам как-то нужно сдвинуть Range наружу тегов. Я не знаю, как это сделать.
0