Fulephpのパッケージを理解するために、小さなサンプルを作りました。
追記：このサイトのエディターは文字化けしてしまうため、ソースなどまとめてGithubへ置きました。ここに書いてある時点のものより、機能的にはやや進化していますが、構造自体は変わっていません。
https://github.com/HiroKws/fuelphp_tinymce_package_for_1_1
TinyMCEというエディターを組み込みました。TinyMCEはJavascriptで作られたエディターです。ワードプレスを利用されている方はおなじみですね。デフォルトで入っているのは、このTinyMCEです。多機能で使いやすく、実はパッケージを使わなくても導入は簡単です。（ワードプレスに入れてあるのは設定をいじってあるので、あれができない、これができないと不評なのです。もともとは普通に利用できる高機能なエディターです。）
勉強のために、パッケージを作って見ました。コンフィグファイルで、スキンなどの設定変更できるので、結構便利です。設定可能な項目全部を変更できるようにはしていません。コードが複雑になりすぎて、理解に苦しむことになります。
あくまでも今回の目標はバリバリに使えるパッケージを作成することではなく、パッケージを理解するためのヒントを見つけ出すことです。
とはいえ、もうちょっとゴリゴリ書いたら、本格的に利用できるパッケージになりそうですよ。まあ、誰かがやってくれることを願っています。 ;)
TinyMCEの導入
まずは、TinyMCEをダウンロードしてきましょう。こちらのページから最新版を落としてください。バージョン名だけ付いたもの、JQueryなんたら、Developmentなんたらと3種類ありますが、バージョン名だけついたもので、OKです。（逆にJQueryバージョンは、指定するJavascriptが異なっているため、今回のパッケージでは動作しません。）
落としたファイルを解凍してください。バージョン名付きのフォルダーができますが、その中にtinymceというフォルダーがあります。それをFuelをインストールしたフォルダーのpublicフォルダー下へコピーしてください。
本来パッケージで使うリソースは、そのパッケージの管理下のディレクトリーに入れておければいいのですが、FuelのパッケージはPHPプログラムで、理想的にはドキュメントルート下のアクセス可能な領域でなく、アクセス不可能な領域へ置いておくほうがセキュリティーが高くなりますし、Fuelにはその仕組みがあります。
TinyMCEの本体がJavascriptで、scriptタグを指定し、利用者のブラウザから読み込むために、アクセス対象のフォルダーであるpublic下に設置する必要があります。
準備としてはこれだけです。
パッケージを作る
普段のプログラムはapp以下で作業しますが、パッケージはappと同じ階層にあります。appのアプリケーションディレクトリー、packagesのパッケージディレクトリー、coreのコアディレクトリーはpublicにあるindex.phpの中身を変更すれば移動可能です。
今回はインストールしたままのディレクトリー構成であることを前提に作業していきます。
まずは、packagesの下にtinymceディレクトリーを作成してください。tinymceの下にはclassesとconfigディレクトリーを作成します。これで今回のパッケージに必要なディレクトリーが揃いました。
tinymceの下にbootstrap.phpを作ります。
<?php
Autoloader::add_core_namespace('Tinymce', __DIR__ . '/classes/');
Autoloader::add_classes(array(
'Tinymce\\Tinymce' => __DIR__ . '/classes/tinymce.php',
)
);続いて、パッケージの本体です。package/classes/tinymce.phpです。
<?php
namespace TINYMCE;
class Tinymce
{
public static function _init()
{
\Config::load('tinymce', true);
}
/**
* TinyMCEのJavaScriptコードを生成する。headタグ中に出力すること。
*
* @return String TinyMCEのJavascriptコード
*/
public static function insert_script()
{
$code = '';
// TinyMCEエディター設置Javascript生成
$code .= '<script type="text/javascript" src="' . \Uri::base(false) . 'tinymce/jscripts/tiny_mce/tiny_mce.js"></script>' . PHP_EOL;
$code .= <<<EndOfScript1
<script type="text/javascript">
tinyMCE.init({
// General options
EndOfScript1;
$code .= ' mode : "' . \Config::get('tinymce.mode', array()) . '",' . PHP_EOL;
if (\Config::get('tinymce.mode', array()) === 'exact')
{
$code .= ' elements : "' . \Config::get('tinymce.elements', array()) . '",' . PHP_EOL;
};
if (\Config::get('tinymce.theme') === 'advanced')
{
$code .= ' theme : "advanced",' . PHP_EOL;
if (\Config::get('tinymce.skin') === 'o2k7')
{
$code .= ' skin : "o2k7",' . PHP_EOL;
$code .= ' skin_variant : "' . \Config::get('tinymce.skin_variant', array()) . '",' . PHP_EOL;
}
}
$code .= <<<EndOfScript2
plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",
// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
EndOfScript2;
return $code;
}
/**
* TinyMCEエディターを表示するアンカーを生成。
*
* @param String リンクテキスト
* @param String 対象になるtextareaのidかname
* @return String TinyMCEを表示するAタグ
*/
public static function show_anchor($string = null, $element = null)
{
if ($string == null || $element == null)
{
return;
}
else
{
return "<a href=\"javascript:;\" onclick=\"tinyMCE.get('$element').show();return false;\">$string</a>";
}
}
/**
* TinyMCEエディターを非表示にするアンカーを生成。
*
* @param String リンクテキスト
* @param String 対象になるtextareaのidかname
* @return String TinyMCEを非表示にするAタグ
*/
public static function hide_anchor($string = null, $element = null)
{
if ($string == null || $element == null)
{
return;
}
else
{
return "<a href=\"javascript:;\" onclick=\"tinyMCE.get('$element').hide();return false;\">$string</a>";
}
}
}
コードは大したことをやっていません。簡単ですから、読んでみてください。If文で色々チェックしているのは、設定項目によって、それ以外の項目の指定の必要、不必要があり、不必要なときに指定してしまうと、正しく動作しない為です。
コード中に使用しているコンフィグファイルです。tinymce/config/tinymce.phpです。自分用に設定するときは、app/config下にコピーし、修正するのは、他のパッケージ使用時と同じです。
<?php
/*
* TinyMCE導入パッケージ、コンフィグファイル
* app/configディレクトリーにコピーして設定してください。
*/
return array(
// mode : textareas(全テキストエリア), exact(特定のテキストエリアのみ)
'mode' => 'textareas',
// elements : modeがexactの場合のみ有効、modeがtextareaの場合は無視
// idかnameが一致するテキストエリアのみ、TinyMCEが表示される
'elements' => '',
// theme : simple, advanced
'theme' => 'advanced',
// skin : themeがadvancedの場合のみ有効、''(デフォルト), o2k7
'skin' => '',
// skin_variant : skinがo2k7の場合のみ有効、''(デフォルト青), silver, black
'skin_variant' => '',
);
使い方は、コメントで入れてあります。
TinyMCEパッケージの使い方
まずは、他のパッケージと同様にapp/config/config.phpを開き、パッケージをロードしてください。パッケージ名は'tinymce'です。
TinyMCEは導入すると、テキストエリアの領域を、高機能なエディターにしてくれるスクリプトです。
ビューやテンプレートビューのheadタグ中でecho Tinymce::insert_script()を実行してください。コンフィグファイルで指定した内容に合わせて、スクリプトが生成されます。この設定されるスクリプトには、Tinymceの設定内容が指定されています。
コンフィグファイルでmodeをテキストエリアに指定しておけば、ビューで指定したテキストエリアは全部、TinyMCEのエディターとして動作します。
テキストエリアはある程度の幅を取っていないと、上手く動作しない場合があります。後述のエディターを隠す機能は、動作しなくなりました。
これらの要素を最低入れ込んだビューはこうなります。views/tinymce.phpです。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>TinyMCE動作テスト</title>
<?php echo Tinymce::insert_script(); ?>
</head>
<body>
<form method ="post" action="/">
<textarea id="text1" name="textarea1" rows="15" cols="80" style="width: 80%">
サンプルテキスト
</textarea>
<div>
<?php echo Tinymce::hide_anchor('TinyMCEオフ', 'text1') ?> <?php echo TINYMCE::show_anchor('TinyMCEオン', 'text1') ?>
</div>
<div>
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</div>
</form>
</body>
</html>このビューを呼び出す、クラスファイルの例です。app/classes/textarea.phpです。
<?php
class Controller_Textarea extends Controller
{
function action_index()
{
return View::forge('tinymce');
}
}ルーティング設定し、呼び出してみてください。
hide_anchorとshow_anchor関数は、TinyMCEを隠して、通常のテキストエリアとして表示させるものと、それをもとのTinyMCEで再び表示させる、リンクを生成するものです。
| Fuelphp、セッションをファイルやDBへ切り替える< 前 | 次 >Fuelphpのoil refineで、コマンドライン処理 |
|---|
| < 前 | 次 > |
|---|