Получите выбранное текстовое положение и поместите элемент рядом с ним

Question

Получите выбранное текстовое положение и поместите элемент рядом с ним

Как Вы собираетесь обработать символы неASCII от UTF-8 или 16 или 32 файлов?

я спрашиваю, потому что я думаю, что у Вас могут быть вопросы проектирования здесь.

я преобразовал бы Ваш выходной файл в UTF-8 (или 16 или 32) вместо наоборот.

Затем у Вас не будет этой проблемы.

Вы также рассмотрели проблемы безопасности, которые могут явиться результатом преобразования завершенного кода UTF-8? См. этот комментарий :

Обнаруживающее многобайтовое кодирование

Фигура, в чем находится кодирование Вашего исходного файла, затем преобразовывает его в UTF-8, и необходимо быть хороши пойти.

24

javascript jquery dom

задан vsync 21 November 2019 в 22:19

2 ответа

Вероятно, вам следует вставить элемент с абсолютной позицией в конце "диапазона". Это работает по-разному в разных браузерах, поэтому лучше всего будет нюхать.

И раз уж вы спросили: вот как это делается в New York Times в своем файле altClickToSearch.js:

function insertButton() {

selectionButton = new Element(
        'span', {
          'className':'nytd_selection_button',
          'id':'nytd_selection_button',
          'title':'Lookup Word',
          'style': 'margin:-20px 0 0 -20px; position:absolute; background:url(http://graphics8.nytimes.com/images/global/word_reference/ref_bubble.png);width:25px;height:29px;cursor:pointer;_background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://graphics8.nytimes.com/images/global/word_reference/ref_bubble.png", sizingMethod="image");'
        }
    )

if (Prototype.Browser.IE) {
  var tmp = new Element('div');
  tmp.appendChild(selectionButton);
  newRange = selection.duplicate();
  newRange.setEndPoint( "StartToEnd", selection);
  newRange.pasteHTML(tmp.innerHTML);
  selectionButton = $('nytd_selection_button');
}
else {
  var range = selection.getRangeAt(0);
  newRange = document.createRange();
  newRange.setStart(selection.focusNode, range.endOffset);
  newRange.insertNode(selectionButton);
}
}

2

ответ дан 28 November 2019 в 23:28

Другие вопросы по тегам:

javascript jquery dom

Похожие вопросы:

score 27 · Accepted Answer

Вы можете расположить диапазон маркера в конце выделения, получить его координаты с помощью jQuery, разместить кнопку в этих координатах и удалить диапазон маркера.

Следующее должно помочь вам начать :

var markSelection = (function() {
    var markerTextChar = "\ufeff";
    var markerTextCharEntity = "&#xfeff;";

    var markerEl, markerId = "sel_" + new Date().getTime() + "_" + Math.random().toString().substr(2);

    var selectionEl;

    return function(win) {
        win = win || window;
        var doc = win.document;
        var sel, range;
        // Branch for IE <= 8 
        if (doc.selection && doc.selection.createRange) {
            // Clone the TextRange and collapse
            range = doc.selection.createRange().duplicate();
            range.collapse(false);

            // Create the marker element containing a single invisible character by creating literal HTML and insert it
            range.pasteHTML('<span id="' + markerId + '" style="position: relative;">' + markerTextCharEntity + '</span>');
            markerEl = doc.getElementById(markerId);
        } else if (win.getSelection) {
            sel = win.getSelection();
            range = sel.getRangeAt(0).cloneRange();
            range.collapse(false);

            // Create the marker element containing a single invisible character using DOM methods and insert it
            markerEl = doc.createElement("span");
            markerEl.id = markerId;
            markerEl.appendChild( doc.createTextNode(markerTextChar) );
            range.insertNode(markerEl);
        }

        if (markerEl) {
            // Lazily create element to be placed next to the selection
            if (!selectionEl) {
                selectionEl = doc.createElement("div");
                selectionEl.style.border = "solid darkblue 1px";
                selectionEl.style.backgroundColor = "lightgoldenrodyellow";
                selectionEl.innerHTML = "&lt;- selection";
                selectionEl.style.position = "absolute";

                doc.body.appendChild(selectionEl);
            }

            // Find markerEl position http://www.quirksmode.org/js/findpos.html
        var obj = markerEl;
        var left = 0, top = 0;
        do {
            left += obj.offsetLeft;
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);

            // Move the button into place.
            // Substitute your jQuery stuff in here
            selectionEl.style.left = left + "px";
            selectionEl.style.top = top + "px";

            markerEl.parentNode.removeChild(markerEl);
        }
    };
})();