オープンソースで高機能、日本語完全対応なWYSIWYGエディタ「CKEditor」を導入する機会があったので、インストール方法をメモっときます。
CKEditorのデータをダウンロード
公式サイトからダウンロードします。
解凍したファイル一式をアップロード
アップロードする位置は任意です。ここでは、ルートディレクトリ上に「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に１行追加。
<script type="text/javascript"> var editor = CKEDITOR.replace( 'editor' ); CKFinder.SetupCKEditor( editor, '/ckfinder/' ); </script>
うーん、こちらも簡単。ライセンス料を払える開発案件ならぜひ入れたいです。
すみません。CKEditorについて、ちょっと聞きたいのですが、
右クリックで開くコンテキストメニューを専用のもではなく
ブラウザのディフォルトのものにしたい場合は、どうすればよいのでしょうか。
FCKEditorのときは
FCKConfig.BrowserContextMenuOnCtrl = false ;
FCKConfig.BrowserContextMenu = false ;
あたりを いじれば いいと聞いたのですが・・。
未確認ですが、同じように設定できそうです。
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.browserContextMenuOnCtrl