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' : 'ＭＳ ゴシック', '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になります。
 

• 前へ
• 次へ