9

これが私が達成しようとしていることです: ユーザーがマウス、キーボード、またはタッチを使用して「myDiv」内のテキストを選択する場合、HTML の 3 つの目立たないチャンクを取得したい: 選択前の HTML (その「左」) )、選択範囲内の HTML、および選択範囲の後の HTML (その「右側」)。html は、myDiv.innerHTML で表示されるようにする必要があります。

選択は、タグ ペア内で開始または終了する場合があります (つまり、分離された選択は、必ずしも有効な HTML であるとは限りません)。選択範囲内の絶対位置要素のような特別なシナリオを扱う必要はありません。私が関心を持っているすべての選択は、strong、em、ul、ol、h1、image、および table などの基本的なタグを含む 1 つの div に制限されます。

最も近いのは、rangyを使用して選択範囲を引っ掛け、呼び出しselection.getRangeAt(0).cloneContents()て選択範囲の HTML を取得することです。これは、単独では無効な選択を行うまでは十分に機能し、ブラウザーはドキュメントフラグメントの HTML を変更して有効なマークアップにします。

追加情報:これが必要な理由は次のとおりです。

ドキュメント フィードバック システムを作成しているので、後で検索して再構成できるように、選択情報をデータベースに保存する必要があります。通常、DOM パスと選択したテキストを使用して選択内容を保存しますが、保存と再構成の間でテキストが変わる場合があります。たとえば、作成者は段落全体を移動したり、セクションを削除したりする場合があります。その場合、DOM パスはほとんど役に立たなくなります。

したがって、私の (不完全な) 計画は、選択範囲を [offset, length, html_snippet] として保存することです。それが「ポジション」です。また、選択したテキストの直前と直後にある HTML スニペットも保存します。これが「文脈」です。

これらのデータを組み合わせて使用​​すると、最初に選択したテキストが移動したり部分的に変更されたりした場合でも、ほとんどの場合、そのテキストを再配置できるはずです。それが失敗した場合、UI には対処する方法がありますが、できるだけ頻繁に発生しないようにしたいと考えています。

ありがとうございます！

4

2 に答える 2

1

いくつか質問があります:

1.-「選択後のhtml」と言うとき、そのhtmlは選択前のhtmlとどのように違うのでしょうか? あなたの「スクリプト」などのために、「選択」プロセス自体がhtmlを改ざんしていますか?

2.- テキストエリアではテキストの選択が行われていないとおっしゃいましたが、どの要素を使用していますか? 段落？部門...？絞ると助かります。

3.- jquery の使用を考えたことはありますか?

http://api.jquery.com/select/

のようなことをする

$('#element_with_text_goes_here').select(function() {

//apply grabbing functions here, for example

//copy html 'before' selection:
     $pre_html = $('html').clone();

   // copy selection...see below:

   // copy html 'after' selection'...same as before


});

選択範囲をコピー:

ここで述べたように：

要素内のテキストを選択する (マウスで強調表示するのと同様)

Jason は次の関数を書きました。

function selectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    

    if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) { // moz, opera, webkit
        var selection = window.getSelection();            
        var range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

ここで見つけることができるライブ作業デモ: http://jsfiddle.net/edelman/KcX6A/339/

jquery プラグイン バージョンはこちら: http://jsfiddle.net/edelman/KcX6A/340/

選択したテキストの取得に使用できるもの。彼は逆の角度から近づいていたので、それに応じて微調整する必要があります. より詳細な情報を提供していただけると、より良いサポートを提供できます。


これがGに役立つことを願っています

于 2012-03-03T04:23:06.097 に答える
0

このコードは、ユーザーの選択から html/text を取得しますが、IE でのみ機能します。このコードはクロスタグ選択でも機能します。(グローバルは、コードを短くするために使用されます。)

<script>
function selected(){
    thediv=document.getElementById('div');
    res=document.getElementById('htm');
    userSelection=document.selection;
    userRange=userSelection.createRange();
    /* For wider scale of elements */
    // rangeParent=userRange.parentElement();
    // if(rangeParent!=thediv) userRange.moveToElementText(rangeParent);
    rangeText=userRange.htmlText;   // OR: rangeText=userRange.text;
    res.innerText=rangeText;    
    return; 
}    
</script>
</head>    
<body onload="document.onselectionchange=selected;">
<div id="div">
<h1>The great testpage</h1>
<p>A paragraph with some text</p>
<p>This paragraph <b>contains</b> a child element.</p>
<p>And this is the last paragraph.</p>
<table>
<tr><td>Cell1-1</td><td>cell1-2</td></tr>
<tr><td>Cell2-1</td><td>cell2-2</td></tr>
</table>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
</div>
<br>
<span id="htm"></span>
</body>

での選択前後のコンテンツは次のthedivようになります。prepost=thediv.innerHTML/innerText.split(rangeText);

ページに 以外の要素が含まれている場合はthediv、それらを選択不可にする必要があります。

于 2012-03-03T10:18:08.590 に答える