私はほぼ丸 2 日間、これらの問題を抱えており、あきらめる前に 2 ページ エディターのきちんとした解決策を得る最後のチャンスだと考えています。
最初に Firefoxを使用して、http: //twopageeditor.bastianschulz.com/をご覧ください。
手順:
- キャレットを最後の行「Exiles、similes、およびreviles;」に設定します。
- 「下矢印」キーを押します
結果: キャレットは 2 ページ目の最初の行にあります
実装に関する簡単な説明: - エディターには、2 つの別個の contenteditable DIV 要素が含まれています。- contenteditable DIV 要素内でカーソルを移動してページを離れる場合、DIV 要素の場所と位置を交換するだけですが、キャレットは同じ DIV 要素にとどまります。左側にあるページ 2 は、まだページ 1 にいたときに右側にあった DIV 要素と同じままです。時代遅れ。選択した DIV 要素が再び選択解除されると、その内容が他の DIV 要素に完全にコピーされるため、行われたすべての変更が保持され、他の DIV 要素と同期されます。
ここで、 ChromeまたはSafariを使用します(IE はまったく使用しません。それは次の問題になります...)。
- キャレットを最後の行「Exiles、similes、およびreviles;」に設定します。
- 「下矢印」キーを押します
結果: キャレットは 2 ページの最初の行 1 にあります
BUT: この行は表示されません。もう一度下矢印キーを押すと、ページ 2 の 2 行目に表示されます。ここで上矢印キーを押すと、コンテンツが再び移動し、キャレットが 1 行目にあり、ページ 2 が表示されます (Firefox のように)正しく）。
理由: 最初のページで下矢印キーを押した直後に、この DIV のコンテンツがブラウザによって自動的にスクロールされ、キャレットの位置がまだ表示されていることが一瞬表示されます。これにより、DIV 要素が CSS の top 属性の 20px だけ移動します。その後、top:-520px の新しい絶対値を設定すると、たとえば (ページ/ビューポートの高さが 520px)、この奇妙な 20px のシフトはまだ存在します。
コンテンツが表示されなくなったときに、コンテンツの自動スクロールを停止する方法がわかりません。または、少なくとも contenteditable DIV を通常の状態にリセットできるようにするためです。
誰でもアイデアがありますか？
乾杯！