WordPressユーザーのbaserCMS覚え書き

SyntaxHighlighterを活用できるCKEditorプラグイン入れたよ（baserCMS3編）

［2014.1.9追記］
初出時に書いた方法でインストールしたプラグインがうまく動作しなくなりました。原因を探ったところ、プラグインの設置ディレクトリに問題があったようなので、記事を追記しました。

以前の記事（「コードをいい具合に表示する『SyntaxHighlighter』を導入しました」）で紹介した、CKEditor向けのプラグイン『CKEditor SyntaxHighlighter Plugin』。記事本文にコードを埋め込みたいときに、いちいち pre タグを手作業で入れなくてすむということで重宝していたのですが、baserCMS3同梱のCKEditorが4.2になったことで、同プラグインが使えなくなってしまいました。

ということで、4.2に対応したプラグイン『PBCKCode』を紹介します。『CKEditor SyntaxHighlighter Plugin』からの流れということで、CKEditorオフィシャルサイトのプラグインディレクトリに載っている

Syntaxhighlighter Interface | CKEditor.com
http://ckeditor.com/addon/syntaxhighlight

も試してみたのですが、ツールバーのボタン

tooltip.png

をクリックしても、コードを記述するフローティングウィンドウが現われず残念ながら使えませんでした。

『PBCKCode』のダウンロードとインストール

では、baserCMS3のサイトに『PBCKCode』を導入してみましょう。公式サイトにアクセスして

PBCKCode.png

ページ上部の［Download］をクリック、GitHubのリポジトリに移動したうえで最新版のZIPファイルをダウンロードします。
（最初からGitHubのリポジトリに行ってもよいですけどね wink）

ZIPファイルを展開すると「PBCKCode-1.1.0」というフォルダ（本記事執筆時点）に入ったファイル一式が現われるので「pbckcode」にリネームしたうえで、サーバ上の /app/View/webroot/js/admin/ckeditor/plugins ディレクトリ内にフォルダごとアップロードします。
（/app/View/webroot/js/admin/ckeditor/plugins ディレクトリはあらかじめ作成しておいてください）

ZIPファイルを展開すると「PBCKCode-1.1.0」というフォルダ（本記事執筆時点）に入ったファイル一式が現われるので「pbckcode」にリネームしたうえで、サーバ上の /app/webroot/theme/{使用中のテーマディレクトリ}/js/admin/ckeditor/plugins ディレクトリ内にフォルダごとアップロードします。

BcCkeditorHelper.php のコピーとカスタマイズ

CKEditorのツールバーに『PBCKCode』のボタンを追加するために、baserCMS3コアファイルのコピーとカスタマイズをおこないます。いきなり本番環境に手を加えるのでなく、ローカル側で作業した方がよいでしょう。

/lib/Baser/View/Helper 内にある BcCkeditorHelper.php を /app/View/Helper 内にコピーし、コピーした方をひらいて下記の箇所を変更します。

まずは104行目あたり。

- 'Smiley', 'Table', 'HorizontalRule'),
+ 'Smiley', 'Table', 'HorizontalRule', '-', 'pbckcode'),

もう一箇所、306行目あたり。

- $jscode .= "CKEDITOR.config.extraPlugins = 'draft';";
+ $jscode .= "CKEDITOR.config.extraPlugins = 'draft,pbckcode';";

変更したファイルをサーバにアップロードして、管理画面の［新規固定ページ登録］にアクセスしてみましょう。

button.png

ツールバーにこんなボタンがあらわれ、ボタンをクリックしたときに

dialog.png

こんなフローティングウィンドウが出てくればOKです。

SyntaxHighlighterのための微調整

『SyntaxHighlighter』でコードをカラーリングするには、記事内に書かれたコード（pre タグでマークアップする）に適切な class 属性値を追記する必要があります。たとえばPHPコードの場合は

<pre class="brush: php">
<?php echo 'はじめてのSyntaxHighlighter'; ?>
</pre>

という記述になります。

『PBCKCode』はその class 属性値を自動挿入してくれるのですが、デフォルトでは

  • HTML
  • PHP
  • CSS
  • JavaScript

しかサポートしてないのと、class 属性値に brush: という文字列を追記してくれないので、 /app/View/webroot/js/admin/ckeditor/config.js に下のように書いてサーバにアップします。

/*
このJavaScriptコードは今ひとつ効き目がないので、下記のPHPコードを記述してください
CKEDITOR.editorConfig = function( config ) {
    config.pbckcode = {
    modes : [ ['HTML', 'brush:html'], ['CSS', 'brush:css'], ['PHP', 'brush:php'], ['JS', 'brush:javascript'], ['Diff', 'brush:diff'], ['Text', 'brush:text'] ]
    };
};
*/

/lib/Baser/View/Helper/BcCkeditorHelper.php にさらに追記します。309行目あたり。

+ $jscode .= "CKEDITOR.config.pbckcode = { modes : [ ['HTML', 'brush:html'], ['CSS', 'brush:css'], ['PHP', 'brush:php'], ['JS', 'brush:javascript'], ['Diff', 'brush:diff'], ['Text', 'brush:text'] ] };";

上記の例ではデフォルトの4種類に加えて、Diffとプレーンテキストのカラーリングを有効化しています。配列 modes（JSON形式で記述）の値については『SyntaxHighlighter』のドキュメント「Bundled Brushes」を参考にしてみてください。