互換性のためにRangyを使用して、WYSIWYGエディター(uEditor)内にノードを挿入しています。
動作しますが、IE < 9 では、挿入されたノードは、キャレット位置ではなく、含まれている要素 (iframe) の先頭に配置されます。これは、テキストが選択されていない場合にのみ発生します。
私はフィドルを作成しました。これは粗雑ですが、uEditor が使用する jquery/iframe ではなく div を使用しても同じ効果があります。
これがフィドルです:http://jsfiddle.net/RvNT3/
IE < 9 の場合: http://jsfiddle.net/RvNT3/embedded/result/
フィドルが実際のコードを代表するものではないことはわかっています。最終的にはブラウザに依存している可能性があります。しかし、それを機能させる方法(テキスト選択なしでキャレットに挿入する)があれば、それでうまくいくかもしれません。
フィドルコード:
<!--HTML-->
<div id="pageFrame" >
Some text
</div>
<br/>
<input type="button" id="clickNode" value="Insert Node" />
<!--End HTML-->
//Javascript
var theDiv = document.getElementById('pageFrame');
theDiv.contentEditable = true;
document.getElementById('clickNode').onclick = ( function() {
addTheNode();
});
function addTheNode()
{
rangy.init();
var range = rangy.getSelection().getRangeAt(0);
alert(range);
var newNode = document.createElement("code");
newNode.className = "code";
newNode.contentEditable = false;
newNode.innerHTML = " ";
range.insertNode(newNode);
}
//End Javascript
/*CSS*/
body { font-family: verdana; font-size:11px;}
div { border:1px solid #000000; padding:5px; }
code { display:block; border:1px solid #ff0000 }
/*End CSS */