0

私はこれがまったくの初心者なので、この質問の単純さを許してください。contenteditable divがあります。この div 内のすべてのテキストはリンク タグで囲まれています。

ユーザーがこれらのリンク ノードの 2 つ以上にまたがる選択を行った場合、startContainer と endContainer でリンク タグの名前を識別したいと思います。

残念ながら、多くの場合、startContainer ノードは、次の html の例に示すように、段落や太字タグなどの書式設定ノードです。

<div id="myarea" onmouseup="getSelectionHtml();" contenteditable="true">

<a id="1" href=#>text1 <b>text1 text1 </b></a>
<a id="2" href=#>text2 <b>text2 text2 </b></a>
<a id="3" href=#>text3 <b>text3 text3 </b></a>

</div>

したがって、私のアプローチは、最初に startContainer の nameTag を見つけることであると考えています。リンク タグでない場合は、その親ノードを照会します。それがリンク タグでない場合は、リンク タグが見つかり、その ID を取得できるまで、階層の次のノードを再度クエリします。

哀れなほど短いですが、これが私がこれまでに持っているすべてのコードです。startContainer の tagName を見つけたいのですが、「未定義」というアラートが表示されます。範囲オブジェクトに関するドキュメントをできる限り読んでいますが、すべて散らばっていて、理解するのが少し難しいです。

function getSelectionHtml() {
    var userSelection;
       if (window.getSelection) {
          userSelection = window.getSelection();        
          var selRange = userSelection.getRangeAt(0);   
              alert(selRange.startContainer.tagName);
       }

ところで、contentEditable 選択範囲の開始と終了のリンク タグを取得するためのより良い概念的な解決策を誰かが持っている場合は、私は大いに感謝します。

ティア

4

1 に答える 1

3

範囲のstartContainerおよびendContainerプロパティは、テキスト ノードまたは要素のいずれかへの参照である場合があります。未定義tagNameのプロパティを取得しているのは、テキスト ノードがあるためです。

<a>ノードを含む要素を取得するための簡単な関数を次に示します。

function getAncestorWithTagName(node, tagName) {
    tagName = tagName.toUpperCase();
    while (node) {
        if (node.nodeType == 1 && node.tagName.toUpperCase() == tagName) {
            return node;
        }
        node = node.parentNode;
    }
    return null;
}

例：

var link = getAncestorWithTagName(selRange.startContainer);
if (link) {
   alert("Start is inside link with ID " + link.id);
}
于 2013-02-11T09:50:56.077 に答える