物置っぽい何か

まったり まったり

ホーム / トラブル解決 / Joomla! / JCEでGeSHiを使う

JCEでGeSHiを使う

Eメール 印刷

Joomla!の記事の編集のとき,エディタとしてJCEを使ってるけど,Text HighlighterのGeSHiプラグインを有効にして,コードをハイライトさせようとしたけどうまく動かなかったのでその解決法をメモ程度に.

まずはどんな動作になっているのか確認.GeSHiの方は/path/to/JoomlaRoot/plugins/content/geshi.phpで以下のようにして,記事のソースから"lang"と"lines"というパラメータを取得して,GeSHi本体の方に投げている.

// define the regular expression for the bot
$regex = "#<pre xml:\s*(.*?)>(.*?)</pre>#s";
// (省略)
// perform the replacement
$row->text = preg_replace_callback( $regex, 'plgContentGeshi_replacer', $row->text );
// (省略)
 
function plgContentGeshi_replacer( &$matches )
{
// (省略)
 $args = SAXY_Parser_Base::parseAttributes( $matches[1] );
 $text = $matches[2];
 
 $lang    = JArrayHelper::getValue( $args, 'lang', 'php' );
 $lines    = JArrayHelper::getValue( $args, 'lines', 'false' );
// (省略)
 $geshi = new GeSHi( $text, $lang );
 if ($lines == 'true') {
  $geshi->enable_line_numbers( GESHI_NORMAL_LINE_NUMBERS );
 }
// (省略)

つまり,例えばPHPのコードを行番号付きで表示したい場合は,<pre xml:lang="php" lines="true">などと書けばいいのだが,JCEの方では<pre xml:~="xml:~">をそのまま処理しないみたい.これは,JCEが使っているTinyMCEの方で,不要な属性(上の例だとlines="true")を削除するなど,出来るだけ綺麗なHTMLを吐き出そうとする結果だと思う.そこで,JCEの方では,/path/to/JoomlaRoot/plugins/editors/jce/tiny_mce/plugins/cleanup/editor_plugin.jsのなかで,以下のようにして<pre xml:~="xml:~">の部分を<pre class="geshi-~">と置換しているのだが,ダブルクォート(")をそのまま処理してるからほとんど意味がなく,記事を編集するたびに酷くなっていく.

// データベースやソースコードエディタからWYSIWYGエディタに内容を渡すとき(2箇所)
o.content = o.content.replace(/<pre xml:\s*(.*?)>(.*?)<\/pre>/g, '<pre class="geshi-$1">$2</pre>');
 
// WYSIWYGエディタからデータベースやソースコードエディタに内容を渡すとき
o.content = o.content.replace(/<pre class="geshi-(.*?)">(.*?)<\/pre>/g, '<pre xml:$1>$2</pre>');
 

ソースコードエディタで,<pre xml:lang='php' lines='true'><pre xml:lang=php lines=true>などとやって対処しようとしたけど,今度はJoomla!本体(?)がご丁寧に<pre xml:lang="php" lines="true">と変換してデータベースに保存するみたい.結局,上のコードを以下のように修正する事で一応動いてるっぽいことが確認とれたのでこれでいってみよう.

// データベースやソースコードエディタからWYSIWYGエディタに内容を渡すとき(2箇所)
//o.content = o.content.replace(/<pre xml:\s*(.*?)>(.*?)<\/pre>/g, '<pre class="geshi-$1">$2</pre>');
o.content = o.content.replace(/<pre xml:\s*(.*?)>(.*?)<\/pre>/g, function(str, m1, m2) {
 return '<pre class="geshi-' + m1.replace(/"/g, '&quot;') + '">' + m2 + '</pre>';
});
 
// WYSIWYGエディタからデータベースやソースコードエディタに内容を渡すとき
//o.content = o.content.replace(/<pre class="geshi-(.*?)">(.*?)<\/pre>/g, '<pre xml:$1>$2</pre>');
o.content = o.content.replace(/<pre class="geshi-(.*?)">(.*?)<\/pre>/g, function(str, m1, m2) {
 return '<pre xml:' + m1.replace(/&quot;/g, '"') + '>' + m2 + '</pre>';
});

もう既に誰かが修正してそうだけど(´▽`*)

最終更新 2010年 3月 01日(月曜日) 15:02