baserCMSのCKEditorをカスタマイズしてみる
SyntaxHighlighter というコード表示のJSを組み込んだのはいいけど、いちいち <pre class="brush: php">と書くのは面倒なので、CKEditorのメニューに組み込んでみた。
今回は、3パータンのカスタマイズをしてみました。
1)直接コードに書いちゃえ。その１
/baser/view/helpers/bc_ckeditor.php
をカスタマイズします。
300行目辺りの
$jscode .= "editor_" . $field ." = CKEDITOR.replace('" . $this->domId($fieldName) ."',". $this->Javascript->object($ckoptions) .");";
の前あたりに
$jscode .= "CKEDITOR.config.format_pre = { element : 'pre', attributes : { 'class' : 'brush: php' } };";
とかくと、「フォーマット」「書式付き」の部分が <pre> から <pre class="brush:php">と変更されます。 ただし、これだと他にJSやSQLに対応できないので、お奨めはできません。
2)直接コードに書いちゃえ。その２
今回のお奨め。
/baser/view/helpers/bc_ckeditor.php の51行目あたりから
var $style = array(
array( 'name' => '青見出し(h3)',
'element' => 'h3',
'styles' => array('color'=>'Blue')),
array( 'name' => '赤見出し(h3)',
'element' => 'h3',
'styles' => array('color' => 'Red')),
array( 'name' => '黄マーカー(span)',
'element' => 'span',
'styles' => array('background-color' => 'Yellow')),
array( 'name' => '緑マーカー(span)',
'element' => 'span',
'styles' => array('background-color' => 'Lime')),
array( 'name' => '大文字(big)',
'element' => 'big'),
array( 'name' => '小文字(small)',
'element' => 'small'),
array( 'name' => 'コード(code)',
'element' => 'code'),
array( 'name' => '削除文(del)',
'element' => 'del'),
array( 'name' => '挿入文(ins)',
'element' => 'ins'),
array( 'name' => '引用(cite)',
'element' => 'cite'),
array( 'name' => 'インライン(q)',
'element' => 'q')
);
となっている所に、コードを追加して
var $style = array(
array( 'name' => '青見出し(h3)',
'element' => 'h3',
'styles' => array('color'=>'Blue')),
array( 'name' => '赤見出し(h3)',
'element' => 'h3',
'styles' => array('color' => 'Red')),
array( 'name' => '黄マーカー(span)',
'element' => 'span',
'styles' => array('background-color' => 'Yellow')),
array( 'name' => '緑マーカー(span)',
'element' => 'span',
'styles' => array('background-color' => 'Lime')),
array( 'name' => '大文字(big)',
'element' => 'big'),
array( 'name' => '小文字(small)',
'element' => 'small'),
array( 'name' => 'コード(code)',
'element' => 'code'),
array( 'name' => '削除文(del)',
'element' => 'del'),
array( 'name' => '挿入文(ins)',
'element' => 'ins'),
array( 'name' => '引用(cite)',
'element' => 'cite'),
array( 'name' => 'インライン(q)',
'element' => 'q'),
array( 'name' => 'php code(pre)',
'element' => 'pre',
'attributes' => array('class'=>'brush: php')),
array( 'name' => 'sql code(pre)',
'element' => 'pre',
'attributes' => array('class'=>'brush: sql'))
);
と「スタイル」のリストに新しいリストを追加してあげます。 たぶんこれが一番簡単です。
3)きちんとviewのテンプレートから引数でもってくる。 正統派のカスタマイズですが、ややめんどい。 /baser/plagins/blog/views/blog_posts/admin/form.php の167行目あたりから
<?php
$styles = array('mystyle'=>
array(
array( 'name' => '青見出し(h3)',
'element' => 'h3',
'styles' => array('color'=>'Blue')),
array( 'name' => '赤見出し(h3)',
'element' => 'h3',
'styles' => array('color' => 'Red')),
array( 'name' => '黄マーカー(span)',
'element' => 'span',
'styles' => array('background-color' => 'Yellow')),
array( 'name' => '緑マーカー(span)',
'element' => 'span',
'styles' => array('background-color' => 'Lime')),
array( 'name' => '大文字(big)',
'element' => 'big'),
array( 'name' => '小文字(small)',
'element' => 'small'),
array( 'name' => 'コード(code)',
'element' => 'code'),
array( 'name' => '削除文(del)',
'element' => 'del'),
array( 'name' => '挿入文(ins)',
'element' => 'ins'),
array( 'name' => '引用(cite)',
'element' => 'cite'),
array( 'name' => 'インライン(q)',
'element' => 'q'),
array( 'name' => 'php3 code(pre)',
'element' => 'pre',
'attributes' => array('class'=>'brush: php')),
array( 'name' => 'sql3 code(pre)',
'element' => 'pre',
'attributes' => array('class'=>'brush: sql'))
)
);
?>
と入れ替えるスタイルを記載します。ここで「mystyle」は好きに置き換えてもらって大丈夫ですが、あとで同じ文字列を設定する必要があるので忘れないでください。
次に、
<?php echo $bcForm->ckeditor('BlogPost.content',
array('cols' => 60, 'rows' => 20),
$ckEditorOptions1) ?>
となっているところを
<?php echo $bcForm->ckeditor('BlogPost.content',
array('cols' => 60, 'rows' => 20),
array_merge($ckEditorOptions1,array('stylesSet'=>'mystyle')),$styles) ?>
といれかえます。
このあと、$ckEditorOptions1が$ckEditorOptions2となっているところが直ぐしたにあるのですがそこも同じ様に
<?php echo $bcForm->ckeditor('BlogPost.content',
array('cols' => 60, 'rows' => 20),
$ckEditorOptions2) ?>
となっているところを
<?php echo $bcForm->ckeditor('BlogPost.content',
array('cols' => 60, 'rows' => 20),
array_merge($ckEditorOptions2,array('stylesSet'=>'mystyle')),$styles) ?>
といれかえます。(１つだけだと反映できません。) とすると、ここで設定したスタイルで上書きができます。
'stylesSet'=>'mystyle'の部分のmystyleは先のスタイルの設定の配列の部分のkeyと同じ文字列です。
ただ、今回設定した preですが、思った通りの囲みが出来ないことが多いのでやっぱりソースビューで綺麗にしてあげる必要がありそうです。 とりあえず、オリジナルのstyleとかをボタン一つで当て込みたい時とかに使えるテクニックでした。
