a-blog cms 2.0.x系のWYSIWYGエディタ(CKEditor)でフル機能を使えるようにする


2.0.x系でCKEditorの機能が少ない問題が発見されました。

以下のバージョンでCKEditorの使えない機能がある事が発見されました。 これは、CKEditorがフルパッケージではなく、スタンダードパッケージが入っている事が原因になります。

使えない機能として、フォントサイズや、フォントカラーなどがあります。

フル機能が使えないバージョン

  • 2.0.1
  • 2.0.0.3
  • 2.0.0.2
  • 2.0.0.1
  • 2.0.0

この問題はver.2.0.1より後に出たバージョンで解決予定です。

CKEditorをフルパッケージに更新する

次のバージョンが出るまで待つのは不便ですので、CKEditorをフルパッケージにする方法をお知らせ致します。

CKEditorのフルパッケージをダウンロード

CKEditor ダウンロードからCKEditorのフルパッケージをダウンロードして下さい。

【ver2.0.0以上】CKEditor4.1のACF機能について


Advanced Content Filter

a-blog cms ver2.0.0 より CKEditorのバージョンがver4.1になり、Advanced Content Filterという機能が追加され挙動が変化してますのでここで共有しておきます。 この機能は、CKEditorで入力できる(制限された)コード以外のコードの入力を許可しないセキュリティ機能になります。

Advanced Content Filter

注意する点

この機能より例えば自由入力などで、定義リスト(dl,dt,dd)を使用していて、wysiwygに変更した場合に1系(CKEditor4.0以下)の場合はそのまま定義リストで表示されていましたが、ver4.1以上のCKEditorの場合は 定義リストが削除されます。 特にインポートなどでwysiwygでエントリーを追加した場合に注意が必要になります。

対応方法

通常の使い方であれば問題はありませんが、インポートデータをwysiwygで編集したいなど、やむを得ない場合などは、この機能をOFFにして利用する事が出来ます。

機能を無効にする方法

/js/library/ckeditor/config.js ファイルに以下を追記

CKEDITOR.editorConfig = function( config )
{
    config.allowedContent = true;
};

WYSIWYGエディター(CKEditor)を使用する

a-blog cmsでは、任意の入力フィールドをCKEditorにする設定が標準で実装されています。(v1.2.1より)

通常は、ユニットのプルダウンメニューで「ウィジウィグ」を選択すると、入力フィールドがCKEditorに切り替わりますが、この機能を使用すると任意の入力フィールドをCKEditorの入力画面にすることができます。

カスタムフィールドであらかじめウィジウィグ入力することが決まっている場合などに設定すると便利です。


任意の入力フィールドをCKEditorにした場合の表示

任意の入力フィールドをCKEditorにした場合の表示


任意の入力フィールドをCKEditorにする

1. 設定の編集

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。


   ckeMark     : 'textarea.js-ckeditor',

ckeMark CKEditorにする入力フィールドのセレクタを指定します。

2. HTMLの編集

例)ckeMarkで「textarea.js-ckeditor」と指定した場合

<textarea name="textarea" class="js-ckeditor"></textarea>