CKeditor、CKfinder実装

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

ckeditor

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 = ”;
をファイルのアップロード先に変更すれば設定完了です。

5 thoughts on “CKeditor、CKfinder実装

  1. 源田勝

    とても分かりやすく初心者には、とてもありがたく、見させていただきました。
    toolbar: に [Image] を加えて見ましたが、CKFinder が機能してくれません。
    toolbar: 設定を外すと、CKFinder が機能します。
    idで、toolbar: を設定して CKFinder も機能できるには、何かおまじない(コマンド)が必要なのでしょうか、どうか、ご教授いただきますよう。よろしくお願いします。

    返信
    1. 後藤 祐一 投稿作成者

      Finder実装にあたり、
      特別記載が必要ということはなかったはずです。
      パスさえ通せば動くので、jsをデバッグしてみてコンソールで確認してみてください。

      返信
      1. 源田勝

        そうそうのご回答ありがとうごじます。
        先質問で「toolbar: 設定を外すと」と書きましたが、正しくは、「CKEDITOR.replace()」でした。
        いろいろ試していて、CKEDITOR.replace() のところで、「CKEDITOR.config.toolbar = [] 」などで、CKFinderも機能するようになったのですが、これでは、複数設定で、toolbar や サイズの変更ができなくて悩んでいます。
        CKEDITOR.replace() と var editor = CKEDITOR.replace(); の混在で は、CKFinder が機能しないように思えるのですが、いかがでしょうか。再度の質問となって申し訳ありませんが、よろしくお願いします。

        返信
        1. 後藤 祐一 投稿作成者

          これは私のイカれたソースコードですね。
          確かに重複していました。
          ソースコードを修正しました。
          ご指摘ありがとうございます。

          返信
  2. 源田勝

    ありがとうございます。無事、解決です。
    でも、ライセンスの入力を求めてきて、悩みが増えています。
    KCFinder が 無料のようなので、そちらも試してみようと思っています。
    ほんとうに、ありがとうございました。

    返信

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください