奄美大島・加計呂麻島の島生活日記

奄美・加計呂麻島へ5年移住していた人の島日記

Menu Close

2012年に選んだWYSIWYGエディタ

久々のお仕事関係の記事。

ウェブ制作で使用しているWYSIWYGエディタ。
今までFCKEditorを利用していたのだけど、
ブラウザのバージョンアップに付いていけてない感じで
動作が不安定になっていたのでCKEditorとKCFinderというソフトを使うことにしました。
ちなみにCKFinderは有料ぽかったのでパスしました。

他にもjQueryベースのRedactorなどもよかったけど
IEでも問題なく使えるだろうものを選びました。

導入方法。

1.CKEditorをダウンロード

2.ダウンロードしたファイルを解凍して、フォルダ内のconfig.jsに以下の記述を追加。

CKEDITOR.config.enterMode = 2;
CKEDITOR.config.shiftEnterMode = 1;
CKEDITOR.config.language = 'ja';
CKEDITOR.config.filebrowserBrowseUrl = '/js/kcfinder/browse.php?type=files';
CKEDITOR.config.filebrowserImageBrowseUrl = '/js/kcfinder/browse.php?type=images';
CKEDITOR.config.filebrowserFlashBrowseUrl = '/js/kcfinder/browse.php?type=flash';
CKEDITOR.config.filebrowserUploadUrl = '/js/kcfinder/upload.php?type=files';
CKEDITOR.config.filebrowserImageUploadUrl = '/js/kcfinder/upload.php?type=images';
CKEDITOR.config.filebrowserFlashUploadUrl = '/js/kcfinder/upload.php?type=flash';
CKEDITOR.config.height = '500px';

3.KCFinderをダウンロード

4.ダウンロードしたファイルを解凍して、フォルダ内のconfig.phpの以下の項目を変更

'disabled' => true,→'disabled' => false,
'uploadURL' => "/uploads",
'uploadDir' => "/home/○○/www/web/uploads",

disabledがtrueだとファイルアップロード時のサーバーブラウザーを見たときに
権限がありませんというエラーになります。

エラーメッセージがディレクトリのパーミッションぽいけど、
このフラグだけという軽いはまりポイントです。

サーバ内でのckeditorとkcfinderの設置は
ウェブで見えるディレクトリ以下で
/js/ckeditor
/js/kcfinder
で設置しています。

あとは使いたいページで

ヘッダーに
<script src="/js/ckeditor/ckeditor.js"></script>
<script src="/js/ckfinder/ckfinder.js"></script>

フォームに
<textarea class=”ckeditor” id=”○○” name=”○○”>表示したい内容</textarea>
としてあげればオッケー。

それにしてもたったこれだけのことなのに
いろいろなとこのブログ見ないとできなかった。。

参考になれば幸いです。