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になります。
コメント