0

互換性のために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 = "&nbsp";
            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 */
4

1 に答える 1