kohanaのテスト12-12・・・投稿ページに本家版TinyMCEを使う

　昨日気付いたんですが、新規投稿ページで書いた内容と投稿結果の印象が違います。テキストボックスでの改行が反映されません。本来は<br/>や<p></p>が付かなければいけないのに、付いていません。

　調べてみると、WordPress では TinyMCE 以外に PHP のコードが編集に関わっている様子。例によって複雑な流れを追い切れないので本家版 TinyMCE に乗り換えることにしました。本家版TinyMCE は5月5日の日記で検討済みです。今回はさらに日本語パックもダウンロードして適用しました。

オートロード用の定義ファイルを変更

　TinyMCE は /includes/tinymce/の下に配置しました。

・kohana/application/config/wp-js-css.php を変更・追加

        'tinymce-preinit' => '/includes/tinymce/tiny_mce_preinit.js',
        'tinymce' => '/includes/tinymce/js/tiny_mce.js',
        'tinymce-options' => '/includes/tinymce/options.js',

TinyMCE の設定ファイル

　基本は options.js です。

・/includes/tinymce/options.js

tinyMCE.init({
    // General options
    mode : "textareas",
    width:"100%",
    theme : "advanced",
    language : "ja",
    plugins : "autolink,lists,spellchecker,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",
    elements:"content",

    // 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,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
//theme_advanced_buttons1:"bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,wp_fullscreen,wp_adv",
//theme_advanced_buttons2:"formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,charmap,|,outdent,indent,|,undo,redo,wp_help",
//theme_advanced_buttons3:"",
//theme_advanced_buttons4:"",

    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    theme_advanced_resize_horizontal:false,
    
    // Skin options
    skin : "o2k7",
    skin_variant : "silver",

    // CSS (should be your site CSS)
    content_css : "/includes/tinymce/css/content.css"

    }
);

 　TinyMCE はテキストボックスを勝手に探してくれますが、elements: を指定すると特定のテキストボックスをターゲットにしてくれそうな。コメントアウトしているボタン設定にすると WordPress と同じボタン類になります。

・/includes/tinymce/tiny_mce_preinit.js

tinyMCEPreInit = {
    base : "/includes/tinymce/js",
    suffix : "",
    query : "ver=345-20111127"
};

 　オートロードすると TinyMCE はベースディレクトリが分からなくなるので、tinyMCEPreInit が必要です。上記は必要最小限の記述になっています。query って何だか分かりません。

ビューを変更する

　必要最小限の変更で、一行書き換えるだけです。

・kohana/application/views/test12/postnew/postnew.php

<script type='text/javascript' src='/kohana/loadjs?c=1&load=commonl10n,admin-bar,hoverIntent,common,jquery-color,schedule,wp-ajax-response,suggest,wp-lists,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable,postbox,post,thickbox,media-upload,word-count,editor,quicktags,jquery-ui-resizable,jquery-ui-draggable,jquery-ui-button,jquery-ui-position,jquery-ui-dialog,wpdialogs,wplink,wpdialogs-popup,wp-fullscreen,tinymce-preinit,tinymce,tinymce-options'></script>

 　最後の方の3つが TinyMCE のスクリプトです。

動作試験

　ボタンがいっぱい有って豪華絢爛。その分新規投稿画面のレスポンスが重いです。しかし、編集機能は完璧ですね。HTML 入力も出来ますが、XSS攻撃対策もちゃんとやってくれています。

　これで WordPress もだいぶ骨抜きになってきました。あとはスタイルシートの勉強をすれば、自前でブログサイトとか写真投稿サイトを作れるようになると思います。