MD-Blog_Web System

PowerCMSでTinyMCEプラグインをゴリゴリとカスタマイズする方法。

2015.03.09 Mon.

Data APIの活用方法が広がる「Movable Type 6.1」のリリース、そしてWebサービス型のCMS環境その名も「MovableType.net」の発表と話題が続くMT界隈ですが、MONSTER DIVEにてエンタープライズ用途で多く導入しているのが、MTをベースにしたハイエンドなCMS「PowerCMS」です。

PowerCMS
http://www.powercms.jp/

「PowerCMS」の主な特徴としては、

コンテンツの枠組みを自由に作ることが出来る「カスタムオブジェクト」機能。
通常版よりも様々なフィールドを作成できる、「カスタムフィールド Pro」。
フォーム機能まで追加プラグイン無しで実装可能！
動的パブリッシングをゴリゴリと作り込めるダイナミックMTML！！

などが挙げられますが、これらのいわゆるアドオン機能というより、何よりもその柔軟なカスタマイズ性のトリコになっています。

という話をすると、うーん、それってどんなこと？という話になりますよね。
はい、今回はその一例として、リッチテキストエディタ（TinyMCE）をゴリゴリと、しかも簡単にカスタマイズする方法をちょっと紹介してみましょう。

リッチテキストエディタ（TinyMCE）は、ここまでいじれる！

MT6+PowerCMS4の環境をベースに書いていきます。
※バージョンによって設定方法は異なる可能性があります。ご了承ください。

どこでカスタマイズを設定するのか？

設定画面を開くと、「TinyMCE 設定」という項目が、画面上に見られます。

「システム」＞「設定」＞「PowerCMS設定」

図1 - PowerCMSでTinyMCEプラグインをゴリゴリとカスタマイズする。

「editor_style.css」の欄には、TinyMCEの記事入力画面に適用するCSSファイルを指定します。
実際にページに表示されるスタイルを、WYSIWYGに見ながら編集したい！というときにCSSファイルを設定するわけですね。このへんはまず序の口。

そして「plugins」「advanced_buttons」「source_buttons」「高度な設定」というフィールドがあります。
これらに何を設定すれば、何が出来るのか？
そう、マニュアルにもあんまり詳しく書いていないんですよね...。ざっくりとした解説はPowerCMS公式ブログに記事がありましたので、まずはそちらをチェック。

で、ここからは、MTの話ではなく、 TinyMCEのお話になります。

TinyMCEに機能を追加してみる

例えばリッチテキスト形式でブログを書きつつ、ソースコード表示にはSyntaxHighlighterを導入したい！という要望があったとします。SyntaxHighlighterとは、つまり、

<p>こんなふうにHTMLソースコードを記述するプラグインです。</p>

ブログでよく見かけるフォーマッター的なヤツですね。
これを導入したい！とググっても、よく出てくるトピックは残念ながらWordPress用プラグインに関するものばかり...。
少し古いものになりますが、「SyntaxHL」というプラグインが公開されていましたので、サンプルとしてこれを導入してみましょう。

SyntaxHL
https://github.com/RichGuk/syntaxhl

まずはダウンロードしたファイルを所定の位置にアップロード。

/home/foo/bar/mt-static/plugins/TinyMCE/syntaxhl

標準的な環境では、こんなロケーションになると思います。
そしてgithubを見ると、丁寧に設定コードのExampleが記載されていますね。助かります。

Example configuration:

tinyMCE.init({ 
    theme : "advanced", 
    plugins : "syntaxhl", 
    theme_advanced_buttons1 : "bold,italic,underline,undo,redo,link,unlink,image,forecolor,styleselect,removeformat,cleanup,code, syntaxhl",
    theme_advanced_buttons2 : "", 
    theme_advanced_buttons3 : "", 
    remove_linebreaks : false, 
    extended_valid_elements : "textarea[cols|rows|disabled|name|readonly|class]" 
});

と、言われましても！
PowerCMSで言うと、これをどこに設定すれば良いのか？

ここで先ほどの出てきたフィールドのうち、「plugins」「theme_advanced_buttons1」「高度な設定」のフィールドを使うことになります。「plugins」のフィールドに

advhr,advimage,advlink,contextmenu,emotions,fullscreen,inlinepopups,insertdatetime,layer,lists,media,pagebreak,paste,style,table,template,visualchars,xhtmlxtras,syntaxhl

という感じで、Exampleに記載のあった「syntaxhl」という文字をカンマ区切りで追記してみます。

続いて、Exampleを見ると、「theme_advanced_buttons1」といった項目も指定が必要なようです。これを入力するフィールドは、PowerCMS設定画面でいうと「advanced_buttons1」欄になります。

bold,italic,|,justifyleft,justifycenter,justifyright,|,hr,|,bullist,numlist,blockquote,syntaxhl,|,forecolor,|,indent,outdent,|,link,unlink,styleselect,formatselect,removeformat

といった形で、TinyMCEのツールバーの並びのうち、ボタンを表示したい位置に、こちらもカンマ区切りで「syntaxhl」と追記してみます。

さらにExampleには「remove_linebreaks : false」との記述がありますが、これを反映するためには「高度な設定」欄に追記が必要です。
ここの記述フォーマットはちょっと特殊になります。

元のTinyMCEプラグインのExampleに、

tinyMCE.init({ 
    remove_linebreaks : false, 
    extended_valid_elements : "textarea[cols|rows|disabled|name|readonly|class]" 
});

と書かれています。これをPowerCMSの「高度な設定」欄に記述するには、

tinymce_editor.init['remove_linebreaks'] = false;
tinymce_editor.init['extended_valid_elements'] = 'textarea[cols|rows|disabled|name|readonly|class]';

という形になるようです。

これらを設定すると、リッチテキスト形式の記事投稿画面に、新たにSyntaxHighlighterのソースコード挿入画面が表示されるはずです。
あとは記事やページのテンプレートにSyntaxHighlighterのプラグイン読み込みを記述して、完了。このあたりは公式のインストールガイドのとおりです。

応用編：ベースURLを変更する

これを応用していくことで、様々なカスタマイズが可能になります。
どのようなカスタマイズがあるのかは、TinyMCEの公式リファレンスを参照しましょう！

TinyMCE Configuration
http://www.tinymce.com/wiki.php/Configuration3x

読んで、それぞれ試してみる。把握するためにはその繰り返ししかありません！ｗ
今回はベースURLを変更してみましょう。TinyMCEのリファレンスには、

tinyMCE.init({
        ...
        document_base_url : "http://www.site.com/path1/"
});

とありますので、これをPowerCMSの「高度な設定」欄に追記すると、

tinymce_editor.init['document_base_url'] = 'http://www.site.com/path1/';

となります。これで、例えば、リッチテキストエディタで扱われるベースURLを、CMS管理画面で定義しているものとは異なるドメインに指定することが出来ます。マルチドメインでWebサイト構築しているケースでは非常に便利ですね。

まとめ

というわけで、もはやMT/PowerCMSのノウハウというよりも、TinyMCEというWYSIWYGエディタソフトの設定方法ご紹介でした。

Movable Typeとしては、TinyMCEを便利にするMTプラグインもいくつか発表されていますが、MTの知識だけではなくTinyMCEの知識も深めれば、このように「実は出来るコト」がたくさんあるコトに気付くはずです。

そしてそれらを柔軟に、CMS管理画面ベースで設定することが出来るというコトが、PowerCMSの強みですね。
特にこの「高度な設定」欄はJavaScriptによる記述ですので、みんなだいすき「MTAppjQuery」を併用すれば、JSゴリゴリでその制御も自在に可能。特定のBlogIDのときにだけ、特定のAuthorIDのヒトにだけ、TinyMCEの設定を適用させたり、的な。

パッケージのCMSって結局できるコトが限られてるしなー、と思ってしまっているフロントエンドエンジニアさん、是非、一歩踏み込んだセッティングにチャレンジしてみてはいかがでしょうか。そしてMONSTER DIVEでは、そんなHENTAI的なCMSカスタマイズを試みたいクリエイターさんを大募集中です！

備考：WordPressならもとからPHPゴリゴリで何とでも出来るよー...という声が聞こえてくるような気もしますが、MT/PowerCMSはサーバサイドのプログラミング知識が不要、というところが大きな違いですかね。このへんの宗教論争はまた別の機会に。