ここではサイトの更新時に役立つCKeditor、CKfinderの紹介をします。

CKeditorのデモはこちら
https://office-goto.info/demo/ckeditor/

CKeditorのダウンロード
http://ckeditor.com/
CKfinderのダウンロード
http://cksource.com/ckfinder

CKeditor、CKfinderの実装

head

<script src="ckeditor/ckeditor.js"></script>
<script src="ckfinder/ckfinder.js"></script>

ckeditor.jsとckfinder.jsを読み込んでください。

html

<textarea id="eventContents" name="eventContents"></textarea>

textareaタグでid、nameをターゲット指定してください。

改行 Enterでbrタグを指定する

デフォルトでEnter改行するとpタグが、Shift+Enterならbrタグが挿入されるので、これを
Enter改行ならbr、Shift+Enterならpタグに変更します。
ckeditor/config.js

CKEDITOR.editorConfig = function( config ) {
    // Enterキー押下時のタグ
    CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
    // Shift+Enter押下時のタグ
    CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P;
};

idでツールバーや幅、高さを指定

<script type="text/javascript">
var editor = CKEDITOR.replace( 'eventContents',{
    width  : '500px',
    height : '300px',
    toolbar: [
                ['Source','Bold','Italic','Underline','Strike','-','Subscript','Superscript']
                ,['NumberedList','BulletedList','-','Outdent','Indent','Blockquote']
                ,['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],'/'
                ,['Link','Unlink','Anchor']
                ,['FontSize']
                ,['TextColor','BGColor']
                ,['ShowBlocks','Maximize','About']
            ]
});
    // CKfinder設定
    CKFinder.setupCKEditor(editor, 'app/js/library/ckfinder/');
</script>

body内の一番最後に記述してください。
これでidごとにツールバーなどを変えてCKeditorを複数実装できます。

細かな設定がいらない場合

<textarea class="ckeditor"></textarea>

Javascriptを書かなくてもclass指定で実装できます。

idから要素を取得

var bar = CKEDITOR.instances.eventContents.getData();

jQueryの$(‘#eventContents’).val();では内容は取れてこないので注意が必要です。

CKfinderでファイルのアップロード

/ckfinder/config.phpを編集します。
function CheckAuthentication()内の
return false;を
return true;に書き換えます。

$baseUrl = ”;
をファイルのアップロード先に変更すれば設定完了です。