「a」や「img」のリンク先のURLを書き換えるプラグインです。

インストール手順

ダウンロード

ダウンロードページからプラグインをダウンロードします。「src.zip」と「src.tar.gz」は開発者向けのファイルなので、プラグインを利用する場合は「src」の付かないファイルをダウンロードしてください。

ファイルの設置

ダウンロードしたファイルを展開して「ckeditor/plugins/rewrite」をインストール先の「ckeditor/plugins/」の下へ設置してください。

読み込むプラグインの追加

ckeditor/config.js で config.extraPlugins へ rewrite を追加してください。(設定例) (ドキュメント)

ツールバーへのボタンの追加

ckeditor/config.js で変換のルールを指定します。

ckeditor/config.js の設定例 (デフォルトの値を使う)

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = 'rewrite';

    // rewrite の機能を有効にします。
    config.rewrite_urls = true;
    // デフォルトではホストからの相対パスに書き換えます。
}

ckeditor/config.js の設定例 (細かく指定する)

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = 'rewrite';

    // rewrite の機能を有効にします。
    config.rewrite_urls = true;

    config.rewrite_rules = {
        a: {
            href: {
                // http://example.com/のファイルを相対パスへ書き換え
                from: 'http://example.com/',
                to: ''
            }
        },
        img: {
            src: {
                // http://foo.example.com/を
                // http://bar.example.com/へ書き換え
                from: 'http://foo.example.com/',
                to: 'http://bar.example.com/'
            }
        }
    };
}

ckeditor/config.js の設定例 (まとめて指定する)

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = 'rewrite';

    // rewrite の機能を有効にします。
    config.rewrite_urls = true;

    // 書換え元のURLを指定します
    config.rewrite_default_from = 'https?://foo.example.com/(img|css)';
    // 書換え先のURLを指定します
    config.rewrite_default_to = 'http://bar.example.com/$1';
}

文字装飾のボタンを押した際に、装飾として使われる要素を変更する方法を説明します。

要素の変更

これらのボタンが登録されているのは「basicstyles」というプラグインです。

そこで「_source/plugins/basicstyles/plugin.js」の下部を見てみると、 以下のような設定があるので、これを config.js などで変更すると要素を変更できることが分かります。

// Basic Inline Styles.
CKEDITOR.config.coreStyles_bold         = { element : 'strong', overrides : 'b' };
CKEDITOR.config.coreStyles_italic       = { element : 'em', overrides : 'i' };
CKEDITOR.config.coreStyles_underline    = { element : 'u' };
CKEDITOR.config.coreStyles_strike       = { element : 'strike' };
CKEDITOR.config.coreStyles_subscript    = { element : 'sub' };
CKEDITOR.config.coreStyles_superscript  = { element : 'sup' };

問題へのの対応

前項の変更で設定を変更することはできるのですが、一つ落とし穴があって、 例えば「uではなくins」「strikeではなくdel」のような以下の設定をした場合、

CKEDITOR.config.coreStyles_underline    = { element : 'ins' };
CKEDITOR.config.coreStyles_strike       = { element : 'del' };

パラグラフ全(P要素)体を選択して「下線」ボタンを押したときに、装飾の結果が以下のようになってしまい、 正しいHTMLとなりません。

<ins><p>文章</p></ins>

CKEditorでは文字の修飾をするときに、 「CKEDITOR.dtd (_source/core/dtd.jsで定義)」を見ているのですが、 「ins」や「del」への装飾の際にこれがうまく働かないことが原因のようです。

この問題については本当は「dtd.js」を追わなくてはいけないとは思うのですが、、 簡単な解決方法としては、CKEDITOR.dtd の「u」や「strike」からコピーするというものがあります。

CKEDITOR.dtd.del = CKEDITOR.dtd.strike;
CKEDITOR.dtd.ins = CKEDITOR.dtd.u;
CKEDITOR.config.coreStyles_underline    = { element : 'ins' };
CKEDITOR.config.coreStyles_strike       = { element : 'del' };

こうすることで正しく「ins」や「del」で装飾されます。

• BasicStyles
• FrontPage
• MobilePictogram
• Rewrite

TypePadで配布している絵文字アイコン画像(クリエイティブ・コモンズとGPLのデュアルライセンス)をCKEditorで利用するためのプラグインです。

スクリーンショット

インストール手順

ダウンロード

ダウンロードページからプラグインをダウンロードします。「src.zip」と「src.tar.gz」は開発者向けのファイルなので、プラグインを利用する場合は「src」の付かないファイルをダウンロードしてください。

ファイルの設置

ダウンロードしたファイルを展開して「ckeditor/plugins/mobilepictogram」をインストール先の「ckeditor/plugins」の下へ設置してください。

読み込むプラグインの追加

ckeditor/config.js で config.extraPlugins へ mobilepictogram を追加してください。(設定例) (ドキュメント)

ツールバーへのボタンの追加

ckeditor/config.js で config.toolbar へ MobilePictogram を追加してください。 (設定例) (ドキュメント)

ckeditor/config.js の設定例

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = 'mobilepictogram';
    config.toolbar = [
        [
            'Bold', 'Italic', '-', 'NumberedList', 'BulletedList',
            '-', 'Link', 'Unlink','-','MobilePictogram'
        ]
    ];
}