Mar 09

CKEditorのツールバーをカスタマイズ

JavaScript コメントはページの下に

CKEditorのツールバーをカスタマイズしてみます。

複数のCKEditorを１ページに用いることも可能で、それぞれ異なるツールバーを入れることも考えてみます。

各CKEditor用config.jsを用意する

独自のCKEditor用config.jsを用意すればＯＫです。
流れとしては、
１．独自config.jsを作成し、その中にtoolbar設定を書く。
２．CKEDITOR.replace()時に、１で作成したファイルをcustomConfig:　で呼ぶ
だけです。

では、まず独自config.jsを作りましょう。ファイル名はedit1config.js とします。

JAVASCRIPT:
  1. //設定をするものであり、toolbarだけでなくいろんな設定をここで行える
  2. CKEDITOR.editorConfig = function( config )
  3. {
  4. config.toolbar = 'CustomToolbar';  //CustomToolbarという名前にしてみた
  5. config.toolbar_CustomToolbar =
  6. [
  7. ['Preview'],
  8. ['Cut','Copy','Paste','PasteText','PasteFromWord'],
  9. ['Undo','Redo','-','RemoveFormat'],
  10. ['Image','Flash','Table','HorizontalRule','SpecialChar'],
  11. '/',
  12. ['Styles','Format'],
  13. ['Bold','Italic','Strike'],
  14. ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
  15. ['Link','Unlink','Anchor']
  16. ];
  17. };

で、 edit1テキストエリアに上記config設定をしたCKEditorを組み込みます。

HTML:
  1. <textarea id="edit1"></textarea>

参考リンク

CKEditor API documentation
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

CKEditor Developers Guide
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar

まるひろの独学-者（どくがくもん）の独り言の記事
 http://ameblo.jp/dokugakumono/entry-10400796859.html

前後の記事

« CKEditorを使ったフォームを作成する。｜｜LBP3800 ネットワーク印刷の準備 »

関連した記事

トラックバック＆Pingback

この記事が気に入ったりした方は、自分のブログを書くときに「下のURLをコピーして、自分のブログ投稿時のトラックバック欄にペースト」してください。つながります。
URL:

コメント　（ 7 ）

  1. 小山太郎＠管理者 Says:
    3 月 9th, 2010 at 23:02:41

    textareaが悪さして、再編集できなくなったので自己レス。

    JavaScript内で以下のようにreplaceでカスタムconfigとして、ファイルを指定すればＯＫ。
    CKEDITOR.replace( ‘edit1′,
    {
    customConfig : ‘相対パス/edit1config.js’
    });

  2. tomo Says:
    4 月 6th, 2010 at 13:41:37

    お世話になります。
    一画面に二つのメニューの異なるエディタを
    表示させるために、参考にさせていただいています。

    独自config.jsである、
    config1.js
    config2.js
    二つを準備して

    それぞれに、

    CKEDITOR.editorConfig = function( config )
    {
    config.language = ‘ja’;
    config.uiColor = ‘#AAC6EF’;
    config.enterMode = CKEDITOR.ENTER_BR;
    config.skin = ‘office2003′;
    config.toolbar =
    [
    [’Undo’,'Redo’],[’FontSize’,'Bold’,'Italic’,'Underline’,'Strike’],[’TextColor’,'BGColor’]
    ];
    };

    等のカスタムしたツールバーの設定を
    行ったのですが、

    >edit1テキストエリアに上記config設定をしたCKEditorを組み込みます。

    の部分は、どうそれぞれのjsファイルを指定すれば
    宜しいのでしょうか？？

    htmlには

    と

    エディタ読み込み部分の

    を記入しています。
    参考リンクも参考にさせていただき、
    いろいろ試してみたのですが、同じカスタムエディタが表示されたり、フルでエディタが表示されたりと、
    うまくいきません。。
    宜しくお願い致します。

  3. 小山太郎＠管理者 Says:
    4 月 7th, 2010 at 0:10:44

    tomoさん、コメントありがとうございます。
    久々に自分も試してみました。というかソース確認してみました。
    相対パスは、CKEditorからの相対パスのようです。
    すみません、説明足りませんでしたね。

    もしくは、絶対パスで書けばＯＫかと。

    ただ、試してみると、複数のエディタconfigは今一挙動が変でした。
    リロードすると、同じだったり違ったり・・・
    Firefoxは後から読んだのが前のにも設定されたりでした。
    時間あるときに再度見てみます。

  4. tomo Says:
    4 月 7th, 2010 at 20:38:11

    早速の回答をありがとうございます。
    理解力が足りなくて、申し訳ありません。

    下記の指定でエディタを表示させているのですが、
    複数表示の記述にするには、どこを修正したら良いのか
    アドバイスを頂けないでしょうか。
    未だ、別々に表示させる事が出来ない状況なので。。

    —
    【html】
    ＜script type=”text/javascript”src=”/ckeditor/ckeditor.js”＞

    ＜textarea rows=”15” cols=”70” name=”comment” id=”editor1”＞
    ＜textarea rows=”15” cols=”70” name=”comment2” id=”editor2”＞

    【ckeditor.js】
    config.jp指定部分をconfig1.jsに変更

    【config1.js】
    カスタムツールバーを設定
    【config2.js】
    別のカスタムツールバーを設定
    —
    上記だと、editor1,editor2両方共のテキストエリアにconfig1.jsで設定したカスタムツールバーが表示されます。

    editor2にconfig2.jsのカスタムツールバーを表示するには、
    【html】に
    ＜script type=”text/javascript”＞
    CKEDITOR.replace( ‘editer2′,
    {
    customConfig : ‘相対パス/config2.js’
    });
    ＜/script＞
    を追記しないといけないという認識なのですが、
    (出来てないので、間違っていると思いますが。)
    どこを修正すれば宜しいでしょうか。

    挙動が変という問題点はあるとは思いますが、
    ご指導の程、宜しくお願い致します。

  5. 小山太郎＠管理者 Says:
    4 月 7th, 2010 at 22:34:14

    tomoさん、どうもです。
    customConfigでのファイル指定は絶対パスにしてみたりしました？
    あと、replaceするスクリプトの位置はどうでしょうか？

    ちなみに、自分はjQueryと一緒に使っていて、$(document).ready()時にreplaceする関数呼んで設定してます。
    スクリプトを実行するタイミングが悪いのかもしれません。

    jQueryを使っていないなら、onLoadでしたっけ？
    HTMLやベースのJavaScriptが読み込まれたらreplaceするようにしてみてはどうでしょうか？

  6. tomo Says:
    4 月 8th, 2010 at 13:55:03

    ありがとうございます。
    スクリプトの実行タイミングが悪かったようです。
    同じくJQueryを使用して、
    $(document).ready()時にreplaceする事で
    無事変更する事が出来ました。

    ただ、customConfigによる独自config.js呼び出しが
    相対パスにしても、絶対パスにしてもうまく読み込んでくれないため、

    config.js内に

    config.toolbar_MyToolbar =
    [
    ];
    config.toolbar_MyToolbar2 =
    [
    ];
    と、カスタムツールバーの設定を行い、

    $(document).ready()時に
    CKEDITOR.replace( ‘editor1′,
    {
    toolbar : ‘MyToolbar’
    });
    CKEDITOR.replace( ‘editor2′,
    {
    toolbar : ‘MyToolbar2′,
    width : ‘240′
    });
    と設定する事で対処致しました。

    customConfig設定がうまく読み込めないのが
    少し心残りでありますが、とりあえず、実現出来た事の
    ご報告まで。
    いろいろとアドバイスをありがとう御座いました。

  7. koyamataro.com Says:
    11 月 15th, 2010 at 15:34:38

    Many thanks for the information.

コメント記入欄

Copyright(c) 小山太郎.com　All rights reserved.