画像アップローダー付きのwysiwygエディタの導入メモ
CLEditorとCKFinderをダウンロード
まずはwysiwygエディタとして有名なCKEditorをダウンロード。
Standard packegeがおすすめ。
画像アップローダーを付けるには、CKEditorの他にCKFinderも必要。
※CKFinderのサイトのレイアウト崩れがすごーく気になるけど、「Get free trial」からダウンロードできます。
ディレクトリ
/ckeditor ・・・ダウンロードしたCKEditorを展開したもの
/ckfinder ・・・ダウンロードしたCKFinderを展開したもの
edit.php ・・・wysiwygエディタを設置するページ
/uploads ・・・アップロードした画像ファイルを格納するディレクトリ
view.php ・・・投稿されたデータを表示するページ
CKFinderの設定
/ckfinder/config.phpを編集
> 33行目
function CheckAuthentication()
{
//return false;
return true;
}
return true; を return false; に変更。
> 63行目
//$baseUrl = '/ckfinder/userfiles/'; $baseUrl = '/uploads/';
アップロードした画像ファイルを格納しておくディレクトリを指定する。
パスはルートディレクトリから指定しないとうまくいかないので注意。
wysiwygエディタを設置するページの作成（edit.php）
エディタ部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>wysiwyg sample</title>
</head>
<body>
<form action="edit.php" method="post">
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<p><input type="submit" value="Submit"></p>
</form>
<script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="./ckfinder/ckfinder.js"></script>
<script type="text/javascript">
if ( typeof CKEDITOR == 'undefined' )
{
}
else
{
var editor = CKEDITOR.replace( 'editor1' );
editor.setData( '' );
CKFinder.setupCKEditor( editor, './ckfinder/' ) ;
}
</script>
</body>
</html>
↓
赤て囲んだところが画像アップロードボタン。
制御部
データを保存するデータベーステーブルの構造は以下
-- -- データベース: `wysiwyg` -- -- -------------------------------------------------------- -- -- テーブルの構造 `posts` -- CREATE TABLE IF NOT EXISTS `posts` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `editor` longtext CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, KEY `id` (`id`) ) ENGINE=MyISAM ;
<?php
$url = "localhost";
$user = "root";
$pass = "root";
$db = "wysiwyg";
if (!empty($_POST))
{
$value = htmlspecialchars( $_POST["editor1"] );
$link = mysql_connect( $url, $user, $pass ) or die("MySQLへの接続に失敗しました。");
$sdb = mysql_select_db( $db, $link ) or die("データベースの選択に失敗しました。");
$sql = "INSERT INTO `wysiwyg`.`posts` (`editor`) VALUES ('".$value."')";
$result = mysql_query( $sql, $link ) or die("クエリの送信に失敗しました。");
mysql_close($link) or die("MySQL切断に失敗しました。");
}
?>
入力データはhtmlspecialcharsでHTMLエンティティに変換して登録しています。
表示する時はhtmlspecialchars_decodeで戻す。
※MySQLへのデータ登録機構についてはここでは詳しく説明しないので、分からなかったら調べてください。
投稿されたデータを表示するページの作成（view.php）
<?php
$url = "localhost";
$user = "root";
$pass = "root";
$db = "wysiwyg";
$link = mysql_connect( $url, $user, $pass ) or die("MySQLへの接続に失敗しました。");
$sdb = mysql_select_db( $db, $link ) or die("データベースの選択に失敗しました。");
$sql = "SELECT * FROM wysiwyg.posts";
$result = mysql_query( $sql, $link ) or die("クエリの送信に失敗しました。");
$rows = mysql_num_rows($result);
mysql_close($link) or die("MySQL切断に失敗しました。");
if($rows){
while($row = mysql_fetch_array($result)) {
$value = htmlspecialchars_decode($row['editor']);
echo $value;
}
}
?>
表示ページにおける注意点としては、wysiwygエディタ上の見た目と表示上の見た目が同じになるようにすること。
つまり、wysiwygエディタが出力するタグのスタイルを同様にあてるということ。
CKEditorのカスタマイズ
CKEditorのカスタマイズは公式ドキュメントを参考のこと:
CKEditor 4 Documentation
とりあえずツールバーだけカスタマイズしたい場合の参考記事:
CKEditorのツールバーカスタマイズメモ