jQuery と PHP を使用して、Fckeditor によって公開されたコンテンツを更新せずにページ分割する

Fckeditor は、バックグラウンドで情報を編集および公開するためによく使用される WYSIWYG WEB エディターです。公開するコンテンツが多く、長い場合は、前面に表示されるページング効果を考慮する必要があります。この記事では、jQuery と PHP を組み合わせて、Fckeditor によって公開されるコンテンツをページ分割し、ページ切り替えを行わずに実現します。爽やかな。

Fckeditor の使用について、著者は多くを言いたくありません。この記事は、読者が WEB 開発者で、jQuery と PHP の知識があり、Fckeditor の構成と使用法に精通していることを前提としています。

Fckeditor エディターには、改ページを挿入するための機能ボタンがあります。このボタンをクリックすると、以下の赤いボックスに示すように、コンテンツ領域に改ページが挿入されます。

改ページに対応して生成される HTML コードは次のとおりです:

 
<div style="page-break-after: always"><span style="display: none"> </span></div> 

実際のアプリケーションの状況は次のとおりです。バックグラウンドで Fckeditor エディターを通じてパブリッシュされたコンテンツがデータベースに送信され、フロントエンドがデータベースへの PHP リンクを通じてパブリッシュされたコンテンツを取得し、長いコンテンツを分割してページングを実行します。

PHP

PHPでコンテンツを分割する方法は以下の通りです:

 
function pageBreak($content){ 
    $content  = $content; 
    $pattern  = "/<div style=\"page-break-after: always\"><span style=\"display: none\">  
<\/span><\/div>/"; 
    $strSplit = preg_split($pattern, $content, -1, PREG_SPLIT_NO_EMPTY); 
    $count    = count($strSplit); 
    $outStr   = ""; 
    $i        = 1; 
 
    if ($count > 1 ) { 
        $outStr   = "<div id=&#39;page_break&#39;>"; 
        foreach($strSplit as $value) { 
            if ($i <= 1) { 
                $outStr .= "<div id=&#39;page_$i&#39;>$value</div>"; 
            } else { 
                $outStr .= "<div id=&#39;page_$i&#39; class=&#39;collapse&#39;>$value</div>"; 
            } 
            $i++; 
        } 
 
        $outStr .= "<div class=&#39;num&#39;>"; 
        for ($i = 1; $i <= $count; $i++) { 
            $outStr .= "<li>$i</li>"; 
        } 
        $outStr .= "</div></div>"; 
        return $outStr; 
    } else { 
        return $content; 
    } 
} 

ご覧のとおり、上記のコードの $pattern は Fckeditor エディターによって生成された改ページ コードです。次に、PHP は preg_split() 関数を通じてコン​​テンツを比較し、セパレーターを分割点として使用し、コンテンツを複数のページに分割します。ページング ナビゲーション ボタンを生成します。使用する場合は、pageBreak($content) を呼び出すだけです。

CSS

CSS を使用してページング ボタンのスタイルを表示します。 もちろん、これらの CSS を変更して、必要な外観をカスタマイズすることもできます。

 
#page_break {} 
#page_break .collapse {display: none;} 
#page_break .num {padding: 10px 0;text-align: center;} 
#page_break .num li{display: inline; margin: 0 2px;padding: 3px 5px;border:1px solid #abcee4; 
background-color: #fff;color: #369;text-align: center;cursor: pointer;overflow: hidden;} 
#page_break .num li.on{background-color: #369;color: #fff;font-weight: bold;} 

jQuery

 
$(function(){ 
    $('#page_break .num li:first').addClass('on'); 
 
    $('#page_break .num li').click(function(){ 
        //隐藏所有页内容 
        $("#page_break div[id^='page_']").hide(); 
 
        //显示当前页内容。 
        if ($(this).hasClass('on')) { 
            $('#page_break #page_' + $(this).text()).show(); 
        } else { 
            $('#page_break .num li').removeClass('on'); 
            $(this).addClass('on'); 
            $('#page_break #page_' + $(this).text()).fadeIn('normal'); 
        } 
    }); 
}); 

jQuery を使用して、ページング ナビゲーション ボタンの最初のページを現在の状態に設定し、ページング ボタンをクリックしてボタンの状態を切り替え、対応するページのコンテンツを表示します。

ちなみに、記事のタイトルに更新なしについて触れていますが、実際には、これは Ajax の更新なしの効果ではなく、jQuery によってページのコンテンツの表示と非表示が一度に読み込まれます。