忍者ブログ
[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。



2024/04/26 06:07 |
PHP1-29:WYSIWYGなHTMLエディタ

FCKeditor 2.6.3
http://www.fckeditor.net/download

前にWYSIWYGなHTMLエディタを作成しましたが、見た目はともかくタグは実際に自力で打ち込む必要があります。
HTMLタグの入力支援を行うプラグインがありますので使用してみましょう。

今回使用するのは、この忍者BLOGでも使用されているFCKeditorです。
最初から日本語をはじめ多くの言語に対応しています。
PHPからでもJavaScriptからでも、他にもASPやPerlからでも使用できるというマルチな対応っぷりで、さらに_samples/default.htmlを表示するだけで動作確認が出来てしまうという至れり尽くせり仕様です。
正直ソース見れば全部書いてあるのでわざわざ解説するようなこともないのですが、まあとりあえず導入してみます。
PHPに対応しているといっても、PHPでできることは既に用意されているプロパティを変更することです。
自作のメニューを使用したいといった場合は結局JavaScriptを記述する必要があります。

準備としてはまずディレクトリの中身を丸ごとfckeditorフォルダに放り込み、PHPでそこにパスを張って適当にメソッドを実行します。

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
    //初期設定
    require_once('fckeditor/fckeditor.php');
    $fck = new FCKeditor('fieldname');
    
    //fckeditorの入っているパスを指定
    $fck->BasePath    =dirname($_SERVER['PHP_SELF']).'/fckeditor/';
    
    //適当に設定
    $fck->ToolbarSet = 'Default';
    //$fck->Width='100%';
    //$fck->Height='95%';
    $fck->Value='初期値';
    $fck->Config['SkinPath']=$fck->BasePath.'editor/skins/office2003/';
    $fck->Config['ForcePasteAsPlainText']=true;
    
    //HTML文作成
    $fck_form=$fck->CreateHtml();
?>
 
<html>
<head></head>
<body>
    <form method="POST" action="post.php">
        <?php print($fck_form); ?>
        <input type="submit" name="a" value="送信">
    </form>
    
</body>
</html>

post.php
1
2
<?php
    var_dump($_REQUEST);


PHPで用意されているメンバ変数は以下の6つです。
$InstanceName:<input name="**">に入る値)
$BasePath:DocumentRootからのパスを指定
$Width、$Height:Textareaの幅、高さ
$ToolbarSet:ツールバーセット、最初からDefault,Basic,Customの3種類が用意されている
$Value:Textareaの初期値

それ以外のプロパティを変更したい場合、
$fck->Config['StartupFocus']=true;
という風にプロパティ名を直接指定して変更します。
具体的な設定項目は非常に多いので直接fckconfig.jsを見てください。

これでメニューで編集できる、WYSIWYGなHTMLエディタがとても簡単に作成できました。


さて注意しないといけないのは、このフォームで送られてきたデータは別に必ずしもHTMLとして完成されているわけではないということです。
エディタで作成していれば全てのタグがきちんと閉じられているはずですが、ソース表示モードで編集した場合や直接POSTデータをいじられた場合など、不完全なデータがやってくる可能性は大いにあります。
タグ閉じ処理等はデータを受け取った側で行う必要があります。

…のですが、この忍者BLOGですらその処理を行っていません。
ソース表示モードで<b>とか打っちゃって送信すると、以降のエントリにもそのまま適用されてしまいます。

また危険なタグやコードを書いても普通に送られてしまうので、そこらへんのバリデートは受け側で行わなければなりません。
それもやってないので普通に<script>alert();</script>が通ってしまうんだが。
いとも簡単にブラクラ仕掛けられるのですが大丈夫か忍者BLOG。

結局POSTデータのチェックは手動で行わねばならないようです。
そっち方面の注意書きや対処法が載っているサイトって見たこと無いのですが大丈夫か。
まあ、そこらへんはエントリ作成者の責任で行うべきといわれればそうかもしれませんが。
というわけで、コメント欄等の不特定多数が投稿できる部分には、FCKeditorを使用してはいけません。 

PR


2008/09/30 11:24 | Comments(0) | TrackBack() | PHP

トラックバック

トラックバックURL:

コメント

コメントを投稿する






Vodafone絵文字 i-mode絵文字 Ezweb絵文字 (絵文字)



<<PHP1-30:GMailから簡単にメール | HOME | PHP1-28:XAMPPでメール>>
忍者ブログ[PR]