0

次の XHTML コードを使用して...

<div contenteditable="true">
<img alt="" src="1.png" />
</div>

...ユーザーが画像要素 (anchorNode または focusNode) の直後にキーボード キャレットを持っている場合、appendChild や insertBefore などの W3C 標準メソッドを使用して、新しい画像要素を挿入します。

DOM内の場所を特定するために次のことを試しました...

alert(
'focusNode = '+window.getSelection().focusNode
+'\n\npreviousSibling = '+window.getSelection().focusNode.previousSibling
+'\n\nnextSibling = '+window.getSelection().focusNode.nextSibling
+'\n\nparentNode = '+window.getSelection().focusNode.parentNode);

try
{
alert(
'focusNode = '+window.getSelection().focusNode
+'\n\n.previousSibling.previousSibling = '+window.getSelection().focusNode.previousSibling.previousSibling
+'\n\n.nextSibling.nextSibling = '+window.getSelection().focusNode.nextSibling.nextSibling
+'\n\nparentNode = '+window.getSelection().focusNode.parentNode);
} catch (err) {}

alert(
'anchorNode = '+window.getSelection().anchorNode
+'\n\npreviousSibling = '+window.getSelection().anchorNode.previousSibling
+'\n\nnextSibling = '+window.getSelection().anchorNode.nextSibling
+'\n\nparentNode = '+window.getSelection().anchorNode.parentNode);

try
{
alert(
'anchorNode = '+window.getSelection().anchorNode
+'\n\n.previousSibling.previousSibling = '+window.getSelection().anchorNode.previousSibling.previousSibling
+'\n\n.nextSibling.nextSibling = '+window.getSelection().anchorNode.nextSibling.nextSibling
+'\n\nparentNode = '+window.getSelection().anchorNode.parentNode);
} catch (err) {}

また、空白文字 (ブレークライン) の数を単純に教えてくれるこれも試しました...

alert(window.getSelection().anchorOffset+'\n\n'+window.getSelection().focusOffset);

キーボード キャレットのすぐ横にある画像を見つける方法を特定できませんでした。

私の目標は、W3C メソッドとプロパティのみを使用してこれを行うことです....

1.) 独自の Microsoft 内部 --- Anything メソッドを使用しない。

2.) フレームワークを使用しない。単に内部メソッドを使用しているからではありません。

3.）画像要素がキャレットのすぐ隣にあるかどうかを判断しようとしています。それがテキストの場合、それは別の条件です（{alert（ 'in or next to text'）;}に言及してください）。

4

1 に答える 1

0 
var img = document.createElement('img');
img.setAttribute('alt','alternative text');
img.setAttribute('src','2.png');
window.getSelection().getRangeAt(0).insertNode(img);
于 2012-05-11T12:53:33.537 に答える