編集可能Divキャレット位置

編集可能なdivがあり、ボタンに画像を挿入するために使用しています。今、私はdocument.getElementById（ 'elementid'）。innerHTMLをやっています。 + =; divの最後に画像を追加するにはキャレットがある場所に画像を入力したいと思います。これをどうやってやりますか？編集可能Divキャレット位置

おかげ

出典

2010-12-02 intl

キャレットに要素を挿入するのは難しくありません。私は、あなたは、単に文字の挿入文字/セットを交換していることを理解し

function insertNodeAfterSelection(node) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.collapse(false); 
      range.insertNode(node); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.collapse(false); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
}

出典

2010-12-03 10:39:09

私はこれをe特定のポイントではなく、ぼかし可能なエリア – kqlambert

@kricket：http://stackoverflow.com/a/4238971/96100 –

このヘルプん：http://jsfiddle.net/8akDr/

出典

2010-12-02 20:46:18

が、次の関数は、（コンテンツが選択されている場合、または選択範囲の末尾に）すべての主要なブラウザでキャレットのノードを挿入しますキャレットの位置にキャラクターを挿入する方法は？シミュレートされたキーボード入力でなければならないのでしょうか？ – intl

うわー...私は、文字通り文章中のキャレット文字のように、あなたがキャレットを意味すると思っていたと言うのは非常に恥ずかしいです...私は私の誤解についてお詫び申し上げます:( –

は、私は否定的に聞こえることを憎むが、これは、それはばかげてとても難しいです。あなたはIEなどを扱わなければならず、実装は大きく異なります。しかし、どこが明るいのかは、ボタンをクリックして画像を挿入すると、フォーカスとキャレットの位置が失われるため、オンブラのブックマーク機能を使ってその位置を覚えておく必要があります。 editablecontentがiframe内にあり、独自のフォーカスを維持している場合、フォーカスの問題はあまり問題になりません。（注：ここでIEを無視しないで、私は実際にW3C標準drekへの実装を好む）

手がかりとヒントについては、いくつかのオープンソースのテキストエディタを見ることができます。しかし、これらの単純なタスクを処理するための膨大な量のコードがあります。

出典

2010-12-02 21:08:04 mwilcox

あなたが言及しているように困難はありますが、私のRangyライブラリ（http://code.google.com/p/rangy）は、ほとんどのものを助けることができます：一つのAPIと選択肢を保存して復元する方法を提供します。私はIEの選択/ TextRangeはDOM標準よりも優れています：単語を包含し、文書内の隣接テキストに移動する境界を移動することを除いて、 'Range'は' TextRange'より大いに優れています。選択オブジェクトの標準はありません（WHATWGは働いています）しかし、IEの選択は他のブラウザのものには何もありません。 –

...実際には、もう少し詳しく質問を読んでいます。この作業はそれほど難しくありません。 –

編集可能Divキャレット位置

答えて

関連する問題