[CKEditor] インストール方法メモ

オープンソースで高機能、日本語完全対応なWYSIWYGエディタ「CKEditor」を導入する機会があったので、インストール方法をメモっときます。

CKEditorのデータをダウンロード

公式サイトからダウンロードします。

http://ckeditor.com/download

解凍したファイル一式をアップロード

アップロードする位置は任意です。ここでは、ルートディレクトリ上に「ckeditor」フォルダを作ってアップロードするとして解説を進めます。

設定ファイルを修正

設定ファイルは「/ckeditor/config.js」になります。こちらを必要に応じて修正します。言語設定を日本語にすればとりあえず使えます。

config.language = 'ja';

エディタを導入したいtextareaがあるページのソースを修正

まず、ckfinderのJavascriptファイルを読み込みます。

<!-- <head>タグ内に記述 -->
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

次に、CKFinderを起動。WYSIWYGエディタを導入したいtextareaのidが「editor」の場合、以下の様に記述すればOK。

<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor' );
</script>

以上。…のはず。
カンタンすぎてわざわざブログに書くことも無かったかもしれん…

ちなみに、有料ですが高機能なサーバーブラウザの「CKFindar」も簡単に追加することが出来ます。画像アップロード機能を簡単に導入したい場合に使えます。

データを落としてきてアップして、スクリプトを読み込み。config.phpの下記の行をインストールした位置にあわせて変更。

$baseUrl = '/ckfinder/userfiles/';

スクリプトを読み込み。

<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>

CKEditorを起動するJavascriptに1行追加。

<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor' );
CKFinder.SetupCKEditor( editor, '/ckfinder/' );
</script>

うーん、こちらも簡単。ライセンス料を払える開発案件ならぜひ入れたいです。

[CKEditor] インストール方法メモ」への2件のフィードバック

  1. すみません。CKEditorについて、ちょっと聞きたいのですが、
    右クリックで開くコンテキストメニューを専用のもではなく
    ブラウザのディフォルトのものにしたい場合は、どうすればよいのでしょうか。
    FCKEditorのときは
    FCKConfig.BrowserContextMenuOnCtrl = false ;
    FCKConfig.BrowserContextMenu = false ;
    あたりを いじれば いいと聞いたのですが・・。

tarou へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です