4

Google ドキュメントに似たワープロ Web アプリを構築しようとしています。Mercury Editor (contentEditable 属性に依存) の使用を開始し、(Google Docs のように) 紙のページのように見える編集可能な div 要素を作成しました。

ここで大きな問題は、複数のページを処理する方法です。つまり、テキスト (または他のコンテンツ) がページの高さからはみ出すことを検出し、コンテンツを分割して新しいページを作成する方法です。これが発生するシナリオがいくつかあります。

  • ユーザーがページの最後に改行を入力します。新しいページを作成する必要があります。
  • ユーザーが単語を入力していて、ページの最後に到達しました。新しいページを作成し、その単語を新しいページに移動する必要があります。
  • ユーザーが大きなテキストを貼り付けましたが、現在のページに完全には収まりません。新しいページを作成し、収まらないテキストのみを新しいページに移動する必要があります。
  • ユーザーが、現在のページに収まらない他の要素 (画像など) を挿入します。その要素で新しいページを作成する必要があります。

Google ドキュメントの JS コードに飛び込もうとしましたが、圧縮されているため、理解することはほとんど不可能です。コードが美化されたスタンドアロン バージョンの Google Docsがありますが、古くて複数のページを処理できません。

これを達成する方法についてのヒントをいただければ幸いです。

4

2 に答える 2

0

コンテナーのサイズが固定されている場合は、オーバーフロー イベントを使用して検出できます。

window.addEventListener ("overflow", yourFunction, false);
于 2012-02-28T21:29:53.620 に答える
0

基本的に、このように2つのdivが必要です

<div id='pageWrapper'>
    <div id='page' style='max-height: 600px; overflow: hidden;'>
    </div>
</div>

#pageWrapper が行うことは、そこに座ってページのように見えることだけであり、誰かが追加したすべてのコンテンツが #page に追加されます。誰かがコンテンツを追加するたびに、貼り付けまたは入力によって #page の scrollHeight と offsetHeight を比較してください。scrollHeight が大きい場合は、ページがオーバーフローしており、scrollHeight が offsetHeight と再び等しくなるまで、次のページにコンテンツ (単語ごと、または要素ごと) を移動し始めることができます。

ユーザーが改ページを挿入する場合は、#page の高さを改ページがある場所に設定するだけで、その後に続くものはすべてページからはみ出します。誰かがページ1をオーバーフローした場合、コンテンツをページまで調整する必要があるため、これは大きなドキュメントでは注意が必要ですが、それがGoogleドキュメントにページがない理由だと思います.

于 2012-02-28T21:54:58.500 に答える