標準のエディタ、TinyMCEでは力不足ですので、定番エディタの「JCE」をインストールします。説明には出てきませんが、URLなどからJoomla Content EditorでJCEのようです。サイト上には「a Content Editor for Jooma!」と説明されています。

JCE

メニュー「コンポーネント」内にJCE Editorの項目ができます。設定は主に「コンポーネント」にあるメニューから主に行います。

ごく一部、システム→グローバル設定→JCE Administrationで設定する必要があるのと、同じくグローバル設定内で標準のエディタをJCEに設定しておく必要があります。

標準エディタの設定

グローバル設定を開くといくつかのサブメニューが現れます。サイトを選択すると、中に「標準のエディタ」という項目がありますので、そこで「Editor - JCE」を選択します。すぐにJCEが使えるようになるはずですが動かない場合は、ブラウザキャッシュ、サーバーキャッシュ、CDNキャッシュなどを削除してみると動くようになると思います。

圧縮の設定

コンポーネント「JCE Editor」のGlobal Settingで、データ圧縮の設定ができます。

インストールしたままの状態で、JavascriptとCSSのCompress(おそらくMinify)が有効になっていますが、GZIPしても差し支えないサーバーでしたらしておいたほうが反応が早くなるはずです。(以前無料サーバーを使ったら、GZIP圧縮でサーバーが落ちました)

許可する埋め込みコードの設定

JCEを使うと、状況に応じて許可するコードを変えられます。コンポーネントのEditor ProfilesからDefaultを選び(他の設定は、フロントエンド編集など用です)、Editor ParametersからAdvancedを選択すると許可するコードの設定ができます。

標準では

 

  • Allow Javascript <No>
  • Allow CSS <No>
  • Allow PHP <No>
  • XHTML Inline Scripts <Yes>

になっています。CSSはNOにしていても、編集できているような気がしますが・・・。

Javascriptはまだしも、PHPを許可すると意図しないところで間違えて挿入してしまうこともあると思うので、あまりお勧めしません。他のプラグイン「Sourcerer」を使って挿入するようにしています。

とりあえず、今回のサイトではPHP以外ONにしてしばらく試します。

エディタ内CSSの設定

JCEは優秀なエディタですが、何も設定しない場合フロントエンドで実際に表示されるものと大きくかけ離れた表示になりがちです。特に、ウェブフォントの表示確認ができないので、できるように設定する方法があります。

Editor ParametersからTypographyを選び、

といった具合に設定します。Custom CSS Filesのところに、<サイトルート>/.../font-awesome-4.4.0/css/font-awesome.min.css

のように設定すれば、JCE内でFont Awesomeを表示できるようになります。(フロントエンドで表示するためには、テンプレート内で別途読み込ませる必要があります)

設定後は、ブラウザキャッシュのクリアおよびシステム内のキャッシュクリアを行わないと反映されません。

決まったパターンの入力

決まったパターンを良く入力する場合、面倒なのでJCE内に設定しておくことができます。

同じくEditor Profilesの中からPlugin Parameterを選ぶと、JCEで編集中に上部に表示される項目を設定できます。Style Selectを開き、Custom Styleに必要なタグを作ると、JCE上から簡単にウェブフォントなどの挿入ができるようになります。

たとえば、

  • Tag : i
  • Classes : fa fa-check-square-o

 と入れれば、このメニュー項目をクリックすればFont Awesomeのチェックマークが入力できます。(インストールされていなければ表示はされません)

—Sponsored link—