CKEditor セッティングのカスタマイズ
CKEditorをNucleusで使いやすいように設定を変更してみた。
使ってて思い出したのですが、私がなぜTinyMCEを押していたのかというと、TinyMCEはCSSの編集をできる機能がついている。
インターフェースはDreamweaverと同じ。
これは、記述法を知っている人なら自由に編集できるなと思ったのだ。
問題のCKEditorですが、今回もCSS編集機能は実装されていない。
基本的にはFCKEditorと同じみたいだ。
特徴は以下のページで紹介されている。
http://ckeditor.com/why-choose
設定したいのは以下のとおり。
- 画像を左右にフロートするスタイル
- コードを部分(preタグ)のスタイル
- テンプレートの追加の仕方(勉強的な意味で)
画像を左右にフロートさせる/コードを部分(preタグ)のスタイル
これは簡単。configファイルに設定追加するだけだ。
デフォルトはCKEditorのデフォルトのスタイルが一覧化される。
これを、変更するにはCKEditorを初期化する処理の前(replace()メソッドなどを実行する前)に以下のコードを追加する。
CKEDITOR.addStylesSet( 'myStyles', [ // Block Styles { name : 'Image Float Left' , element : 'div', styles : { 'float' : 'left' , 'margin' : '10px' } }, { name : 'Image Float Right', element : 'div', styles : { 'float' : 'right', 'margin' : '10px' } }, { name : 'Bordered Image Float Left' , element : 'div', styles : { 'border' : '1px solid #666', 'float' : 'left' , 'margin' : '10px' } }, { name : 'Bordered Image Float Right', element : 'div', styles : { 'border' : '1px solid #666', 'float' : 'right', 'margin' : '10px' } }, { name : 'Code', element : 'pre', styles : { 'background' : '#E4EFFC', 'border-left' : '5px solid #7CB1ED', 'color' : '#175CA9', 'font-family' : 'MS ゴシック', 'font-size' : '12px', 'padding' : '5px 10px' } } ]); CKEDITOR.config.stylesCombo_stylesSet = 'myStyles';
追加したコードは、画像を左右にフロートさせる、画像にボーダーをつけて左右にフロートさせる、preタグをスタイルするの5種類。
addStylesSet()の第2引数は以下の形式。
[ { name: 'スタイル欄に表示される名前', element: 'タグの名前', attributes: { '属性名': '値', '属性名': '値', '属性名': '値' }, styles: { 'CSSプロパティ': '値', 'CSSプロパティ': '値', 'CSSプロパティ': '値' } } ]
attributesもstylesも任意。今回の私の設定では、属性はひとつも設定していない。
テンプレートの追加の仕方
以下のような内容のJavaScriptファイルを作る。
CKEDITOR.addTemplates('default',{ imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates')+'templates/images/'), { title:'2-Column Layout', image:'template3.gif', description:'Layout with 2 columns.', html:'<table border="0"><tr><td></td><td></td></tr></table>' } ]} );
そしたら、configに以下を追加します。追加ポイントはスタイルのときと同じです。
CKEDITOR.config.templates_files = [ '作ったファイルへのパス' ];
ちなみに作ったファイルの元となるものがckeditor/plugins/templates/templates/default.jsになります。
コメント