PHP と CKEditor を使用してリッチ テキスト エディターを作成する

Web アプリケーションの普及に伴い、リッチ テキスト エディターを作成することがますます一般的になりました。 CKEditor は、優れたカスタマイズ性と使いやすさにより、最高のリッチ テキスト エディターの 1 つとして広く認識されています。この記事では、PHPとCKEditorを使ってリッチテキストエディタを作成する方法を紹介します。

CKEditor の概要

CKEditor は、JavaScript を通じて実装されたオープンソースのクロスプラットフォームのリッチ テキスト エディターです。フォント スタイル、書式設定、画像と表の挿入、リンク設定、スペル チェックなどを含む、直感的でわかりやすいツールバーを提供します。 CKEditor の主な機能には、カスタマイズ性、簡単な拡張性、ブラウザ間の互換性が含まれており、リッチ テキスト エディターを作成する場合に最適な選択肢の 1 つとなっています。

CKEditor を使用する前に

まず、Web サイトに PHP 環境があることを確認してください。そうでない場合は、Apache サーバー、PHP、および MySQL をインストールしてセットアップします。これらのソフトウェアをすでにお持ちの場合は、CKEditor の使用を開始できます。

ステップ 1: CKEditor をダウンロードする

まず、CKEditor の公式 Web サイト (http://ckeditor.com) から最新バージョンの CKEditor をダウンロードします。

ステップ 2: HTML ページを作成する

ファイル マネージャーでindex.html という名前のファイルを作成し、次のコンテンツをファイルに追加します:

66872948a75b923d5bf64f949e77b900
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>使用PHP和CKEditor创建富文本编辑器</title>
<script src="ckeditor/ckeditor.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<textarea id="editor1" name="editor1"></textarea>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

行 1 は HTML ドキュメント タイプを宣言します。
行 2 は HTML ページのタイトルです。
3 行目では、CKEditor JavaScript ファイルが導入されています。
6 行目では、編集領域として使用される 4750256ae76b6b9d804861d8f69e79d3 要素を作成します。
7行目はCKEditorを初期化します。

ステップ 3: CKEditor ファイルをアップロードする

ダウンロードした CKEditor ファイルをサーバー上の Web ディレクトリに抽出します。 CKEditor ファイルは、index.html と同じディレクトリに保存することをお勧めします。

ステップ 4: リッチ テキスト エディターをテストします。

index.html ファイルをブラウザで開くと、CKEditor を備えたテキスト エディターが表示され、テキストと形式を自由に編集できます。

PHP を使用して CKEditor からデータを取得する

これで、CKEditor を使用してリッチ テキスト エディターが正常に作成されました。次のステップでは、PHP を使用して CKEditor からデータを取得する方法を確認します。以下の手順に従ってください:

ステップ 1: HTML ページを変更する

index.html に送信フォームを追加して、リッチ テキスト エディターで編集したコンテンツを PHP ファイルに送信します。変更された HTML ページは次のようになります。

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>使用PHP和CKEditor创建富文本编辑器</title>
<script src="ckeditor/ckeditor.js"></script>

9c3bca370b5104690d9ef395f2c5f8d1
< ;body>

<form action="submit.php" method="POST">
    <textarea id="editor1" name="editor1"></textarea>
    <input type="submit" value="提交">
</form>
<script>
    CKEDITOR.replace( 'editor1' );
</script>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

9～11行目は追加したフォームです。編集領域である 4750256ae76b6b9d804861d8f69e79d3 要素があり、送信ボタンもあります。
12 行目では、JavaScript を使用して CKEditor を初期化します。

ステップ 2: submit.php ファイルを作成する

ファイル マネージャーで submit.php という名前のファイルを作成し、次の内容をファイルに追加します:

< ;?php
if(isset($_POST['editor1'])) {
echo $_POST['editor1'];
}
?>

これはsimple PHP プログラムは、CKEditor からデータを取得する方法を示すだけです。 $_POST 配列をチェックして、「editor1」という名前のデータがすでに設定されているかどうかを確認し、設定されている場合はそれを表示します。

ステップ 3: PHP ファイルをテストする

CKEditor を使用してリッチ テキスト エディターを作成するステップでは、index.html を開いてテキストを入力し、送信ボタンをクリックします。送信すると、submit.php に入力された内容が表示されます。

結論

PHP と CKEditor を使用したリッチ テキスト エディターの作成は、Web サイトのニーズに合わせて高度にカスタマイズされたテキスト エディターを作成するのに役立つ、シンプルですが重要なタスクです。時間が経てば、ニーズに合わせてこのエディターを自由にアップグレードおよび拡張できます。この記事が、便利なリッチ テキスト エディターの作成に役立つことを願っています。

以上がPHP と CKEditor を使用してリッチ テキスト エディターを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。