Question

目前，我使用一个函数为文本添加跨度，如果用户先点击一个标签然后选择一部分文本。

JS

$(document).on('click', '#annotationModeArea label',
  function(){
    el = "";
    el = $(this);
    annotationMode(el);
});

function annotationMode(el) {
    var classes = $(el).attr('class').split(' ');
    var arr = classes,
    matches = new Array();
    matches = $.grep(arr, function(n, i) {
        return (n.search(/^c/i) > -1) ? true : false;
    });

     var activeClass = matches.join(", ");      


$('#resultText').unbind('mouseup').mouseup(function(event){

        var activeFastModeId = $(el).attr('id');

        var selection = getSelectedText();
        var selection_text = selection.toString();  


        var span = document.createElement('SPAN');
        span.className = "sentence s33 " + activeClass + " highlighted";   
        span.textContent = selection_text;
        var txt = selection_text;
        var range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(span);


        event.stopPropagation();
       return false;
    });
}

现在我正在寻找相反的方式：

用户首先选择文本，然后单击标签。只有这样才能创建跨度。

我非常感谢提示。谢谢。

Answer 1

我根据您的要求更新了我的代码，您可以查看小提琴： http://jsfiddle.net/yL6g6wvb/5/

HTML代码

<p id="resultText">Except for some helicopters, the right seat in the cockpit of an aircraft is the seat used by the co-pilot. The captain or pilot in command sits in the left seat, so that he can operate the throttles and other pedestal instruments with his right hand. The tradition has been maintained to this day, with the co-pilot on the right hand side.</p>

<h2>labels</h2>

<div id="annotationModeArea">
    <button class="anLabel c1" id="aConcept">Concept</button>
    <button class="anLabel c3" id="aSentence">Sentence</button>
    <button class="anLabel c2" id="aAbbreviation">Abbreviation</button>
    <button class="anLabel c4" id="aAbstract">Abstract</button>
    <button class="anLabel c5" id="aCategory">Category</button>
    <button class="anLabel c6" id="aChunk">Chunk</button>
    <button class="anLabel c7" id="aChunkNP">ChunkNP</button>
    <button class="anLabel c8" id="aChunkPP">ChunkPP</button>
    <button class="anLabel c9" id="aChunkVP">ChunkVP</button>
    <button class="anLabel c10" id="aEntity">Entity</button>
</div>

Jquery代码

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
        }

        var nNd = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nNd);
        return nNd.innerHTML;
    } catch (e) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}



$(function() {
    $('#annotationModeArea button').click( function() {
        var txt = $(this).text().toLowerCase();    
    var txtTrim = $.trim(txt);
    var classes = $(this).attr('class').split(' ');
    var arr = classes,
    matches = new Array();
    matches = $.grep(arr, function(n, i) {
        return (n.search(/^c/i) > -1) ? true : false;
    });

     var activeClass = matches.join(", ");
        var mytext = selectHTML();
        $('span').addClass("sentence s33 " + activeClass + " highlighted");
    });
});

选择文本后添加跨度

1 个答案: