1

誰かがテキストを準備せずに、書式設定されたテキストを複数のボックスに分割することは可能ですか? そのようなテキストを改ページする jQuery プラグインをいくつか見つけました。

<div>
  <p>page 1</p>
  <p>page 2</p>
</div>
$("div").paginate();

しかし、ページの高さと幅に基づいてテキストを改ページしたい:

<p>page 1<br/>page 2</p>
$("p").paginate({ width: 20, height: 20 });

このように、ページネーションは柔軟で、設定場所を知る必要はありません<p></p>。

具体的には、HTML 形式のテキストを固定サイズ (100x200px など) の複数のページに分割したいと考えています。問題は、出力テキスト (解析された html テキスト) の実際の高さがわからないため、x 文字ごとにテキストを分割できないことです (また、html マークアップが破壊される可能性があるため)。

テキスト例 (tinymce 出力):

<div id="toPaginate">
<h2>Lorem ipsum dolor sit amet,</h2>
<p>consetetur sadipscing elitr, sed diam&nbsp;nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<ul>
<li>erat,</li>
<li>sed</li>
<li>diam</li>
<li>voluptua.</li>
</ul>
<p>At vero eos et accusam et justo duo dolores et ea <strong>rebum</strong>. <em>Stet clita kasd gubergren, no sea takimata sanctus est</em> Lorem ipsum dolor sit amet.</p>
<h1>Lorem ipsum dolor sit amet,</h1>
<p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>​​​​
4

2 に答える 2

0

基本的に、必要なものは 1 行で記述できます。最初は全文が 1 つ<p>の に含まれていると仮定し、その段落に id を指定して、.readyコールバックを次のように開始します。

$('#toPaginate').replaceWith('<p>'+$('#toPaginate').html().match(/(.{0,200})\b/g).join('</p><p>')+'</p>');

toPaginateテキストを含む段落の ID はどこにありますか。複数の段落の場合は、クラスを使用してください。

$('.toPaginate').each(function()
{
    $(this).replaceWith('<p>'+$(this).html().match(/(.{0,200})\b/g).join('</p><p>')+'</p>');
});

ああ、このコードはテキストを最大 200 文字のチャンクに分割します。正規表現 ( /(.{0,200})\b/) の最大値を 200 から必要な長さに変更するだけです。いくつかのコメントと、IIFE を使用した例も含めて、このフィドル
を 設定しました。

「ページ」のサイズを幅と高さに依存させるには、いつでもem測定値を使用できます。1em=== 1 文字のサイズ。言い換えると：

function paginate(width, height)
{
    var maxChars = width*height;
    maxChars = new RegExp('(.{0,'+maxChars+'})\\b','g');
    $('#toPaginate').replaceWith('<p>'+$('#toPaginate').html().match(maxChars).join('</p><p>')+'</p>');
}

クラス セレクターを使用して、 に置き換え$('toPaginate')て、コールバック関数として使用することは明らかであり、渡されることはありませんが、クロージャーを使用することで、それらを正しく設定できます。thispaginate.eachwidthheight

$('.toPaginate').each((function(width,height)
{
    var maxChars = new RegExp('(.{0,'+(width*height)+'})\\b','g');
    return function()
    {
        $(this).replaceWith('<p>'+$(this).html().match(maxChars).join('</p><p>')+'</p>');
    };
}(50, 20)));//pass dimensions here

この更新されたフィドルをチェックして、実際に動作していることを確認してください。今回は、最初にチェックするように予防策を講じました:s ...

于 2012-10-09T13:25:54.197 に答える
0

あなたがここでやろうとしていることを理解しているかどうかはわかりません。ただし、記事などを特定の高さ/テキストの長さで分割したい場合は、テキストの X 文字を ap タグに挿入してから、その innerHeight を確認することをお勧めします。

于 2012-10-09T13:09:39.393 に答える