Mar 04

CKEditorを使ったフォームを作成する。

JavaScript, php コメントはページの下に

CKEditorで入力フォームを作ります。

form.php で入力（CKEditor、CKFinder付き。前回参照）
conf.phpで確認。戻るでform.phpに戻るようにして、form.phpにはPOSTで入力していた情報をデータとしてセットする。

を行います。

form.phpで入力と戻ってきたときのデータをセット

  1. form.phpでは、CKEditor(CKFinder含）をセットし、formタグで囲み、action="conf.php" method="post"にします。
  2. conf.phpで戻ってきたときに入力していたデータをセットします。

１．は普通にCKEditorを組み込めれば、フォームと同じです。

２．では、textarea name="editor1" だったとすると、editor1にPOSTで戻ってきたデータをセットすることになりますが、CKEditorの準備が完了してからセットしないと反映されません。

イベントinstanceReadyを使い、準備が出来た時にセットするようにします。

JAVASCRIPT:
  1. <script type="text/javascript"> //<![CDATA[     CKEDITOR.on(\\'instanceReady\\', function(e) {   var tmpEditor = CKEDITOR.instances.editor1;   tmpEditor.setData( \\'<?php echo ; ?>\\' );  });
  2.  
  3. //]]> </script>&lt;script type="text/javascript"&gt;
  4. //&lt;![CDATA[
  5. CKEDITOR.on('instanceReady', function(e) {
  6. var tmpEditor = CKEDITOR.instances.sentence;
  7. tmpEditor.setData( '&lt;?php echo $sentence; ?&gt;' );
  8. });
  9.  
  10. //]]&gt;
  11. &lt;/script&gt;

渡すデータは、改行などをあらかじめ削除しておきます。

PHP:
  1. $sentence = $_POST['editor1'];
  2. $sentence = ereg_replace( "\r|\n", "", $sentence );

これで、CKEditorの準備が出来た時に、$_POST[''];のデータをセットすることが出来ます。

参考ＵＲＬ

CKEditor 3 JavaScriptAPI Documentation
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html

前後の記事

« CKEditor,CKFinderを使ってWORDのようなフォームを作る｜｜CKEditorのツールバーをカスタマイズ »

関連した記事

トラックバック＆Pingback

この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:

コメント　（ 0 ）

コメント記入欄

Copyright(c) 小山太郎.com　All rights reserved.