0

選択範囲を contentEditable div に保存/復元するには、いくつかのスパンを挿入する必要があります。残念ながら、「range.setStart(startNode,0);」を許可するには、これらのスパンに少なくとも 1 文字を含める必要があります。機能が正常に動作するようにします。だから、これは私の要素のグループです：

<div contentEditable='true' id='THE_DIV'>
   some text
      <span id='START_SELECTION'>xxx</span>
         selected text
      <span id='END_SELECTION'>yyy</span>
   other text
</div>

スパン表示プロパティを none に設定しても問題はありませんが、Fire Fox は要素を正しく非表示にしますが、Internet Explorer (7) はそれを無視するようです。

この動作は contentEditable プロパティに関連していることに気付きましたが、残念ながら両方 (contentEditable の親 div と非表示のスパンの子) が必要です。

何か提案はありますか？

前もって感謝します、

フラビオ。

4

2 に答える 2

2

これは IE の意図的な動作です。無効にするために実行できるあまり知られていないコマンドがあります。

document.execCommand("RespectVisibilityInDesign", false, true);

このデモを参照してください: http://jsfiddle.net/DGWZF/1/

また、Rangy の選択の保存と復元モジュールを見たことがありますか? それはあなたがやろうとしていることを正確に行います。開示：私はRangyの主な開発者です。

于 2012-04-25T11:52:11.730 に答える
0

ティムさん、どうもありがとうございました。私はすでにあなたのRangyプラグインを試しました（以前のいくつかの回答を見て）。それは私が探しているものに非常に近いものです。残念ながら、矢印キーでカーソルを移動しているときに、FFで奇妙な動作が発生することに気づきました。カーソルが別のスパンへのスパンのcolseに入った場合、左矢印は機能しません。

私はもっ​​と明確にしようとします：

<div contenteditable='true' id='THE_EDITOR'>
   some text <span class='in_red'>other in red</span><span class='in_blue'>||or in blue</span>
</div>

「||」を使用しました カーソルを表します。この場合：<span></span><span>||</span> 左矢印はFFでカーソルを移動できませんが（理由はわかりません）、2つの要素の間に少なくとも1つの文字がある場合は正しく機能します。<span></span>[space]<span>||</span>

この「バグ」を再現したい場合、コードは（JQueryを使用して）次のようになります。

$("#THE_EDITOR").attr("contentEditable","true").keyup(function(){

   var savedSel = rangy.saveSelection();

   //this blok is only to clean the HTML code every time
   $(this).children(".star").each(function(){
      $(this).after($(this).html());
      $(this).remove();
   });

   //to wrap the spewial word "*" with a personal formatting span
   var str = $(this).html();
       str = str.split("*").join("<span class='star'>*</span>");

   $(this).html(str);

   rangy.restoreSelection(savedSel);
   rangy.removeMarkers(savedSel);
});

2つ以上の「*」を順番に入力しようとすると、左矢印を使用して戻ると、カーソルは移動しません。それらの間にスペースまたは別の文字を置くと、それは再び移動します。

于 2012-04-26T07:55:58.417 に答える