「JCE(Joomla Content Editor)」はとっても使いやすくて便利なエディタです。リンク作成やイメージ挿入が機能的で扱いやすいのはもちろん、各ユーザ・各ユーザ(権限)グループに向けて、ボタンアイコンの表示/非表示・並び順などをカスタマイズしたり、PHPやJavascriptの使用を許可・非許可を切り替えたり、使用できるHTML要素を指定したりできるってのも、管理者にとってはありがたい機能です。
例えば、記事を作成する人(「HTMLとかCSSとかわからないけど、ワープロみたいに記事を書けるんでしょ?」みたいな人)に、『記事の作成方法』みたいな事を説明する時にも、説明が面倒くさい・・・ではなくて(^_^; 「あんまり使わないよ!」って感じのボタンなどは、はじめから使えない(エディタ上に表示しない)ようにしておけば、無駄な説明を省けます。
JCEの最新バージョンと前バージョンを比較すると、若干設定画面などのレイアウト、設定方法などが変わっておるようです。新しい機能なども追加されているような気がしますが、基本的な使い方は似たようなものだと思います。ですが、これからJCEをダウンロードしてインストールされる場合はこの新しいバージョンと言うことになると思うので、以下の解説と食い違う部分もあると思いますがご勘弁ください。
-
ちなみにこの記事を書いたときの、当方のJCEバージョンは、
- JCE Admin Component 1.5.0(com_jce_150.zip)
- JCE Editor Plugin 1.5.1(plg_jce_151.zip) です。
以下の解説は「Joomla!の道しるべ」さんの所で公開・配布されているJCE日本語化ファイル(com_jce_150及びplg_jce_151向けの日本語インストパッケージ)をインストールして、JCEを日本語化して使ってる状態での解説でっす。
JCEグループを設定する。
[ コンポーネント >> JCE Administration >> Groups ] で、JCEの【グループマネージャ】を開きます。新規のグループ設定を作成するなら、右上の「新規」ボタンを押します。
- 名前(JCEグループ名)を入力します。
- 必要に応じて説明も入力しておきます。
- 有効:「はい」にします。
- 必要に応じて優先度も指定しておきます。
- どこに向けて適用(使用)するグループ設定かを決定します。(どのコンポーネントで?※1 どのグループ〔ユーザ権限〕に? どのユーザに?)
「グループレイアウトエディタ」で、使用可能にするボタンを選び、並び順を指定します。
※1:どのコンポーネントで?
JCEグループ[編集]画面の「詳細」の中にある「コンポーネント:」は、ある特定のコンポーネントにおいてのみ、JCEエディタを使えるようにしたい時に、選択(追加)する必要があります。常にJCEエディタを使えるようにしておきたければ、“全て削除”(何も選択してない状態)でOK!
「“全て追加”(全てを選択している状態)にしておけば、全てで使えるんじゃないの?」と思ってしまいますが、こうすると“カスタムHTMLモジュール(mod_custom )”でエディタが使えなくなっちまいました。って事は、バックエンドにログインできる権限(マネージャ・管理者・サイト管理者)のあるユーザーを対象としたJCEグループでは、この「コンポーネント:」の所は“全て削除”(何も選択してない状態)にしておけば良いって事かな!?
エディタの各ボタン
各ボタンの簡単な説明と「私の場合こんな感じにしてます」って並び順を表にしてみました。
基本的に使えるようにしておきたいボタン
とりあえず「これははずせないでしょ!」ってボタンを、その性質ごとに並べてみました。ユーザ向け。
| アイコン | 名前 | 説明 | 分類 |
|---|---|---|---|
![]() |
Bold | 太字 | 1行目 |
![]() |
Italic | 斜体(が適用される) | 1行目 |
![]() |
Underline | アンダーライン | 1行目 |
![]() |
StrikeThrough | 取消線 | 1行目 |
![]() |
Font Select | フォント選択 | 1行目 |
![]() |
Font Size Select | フォントサイズ指定 | 1行目 |
![]() |
Style Select | テキストのスタイル選択 | 1行目 |
![]() |
Format Select | テキストのフォーマット(p,h1,h2など)を指定 | 1行目 |
![]() |
Font ForeColour | テキストの文字色を指定 | 1行目 |
![]() |
Styles | CSSスタイル編集 | 1行目 |
| アイコン | 名前 | 説明 | 分類 |
|---|---|---|---|
![]() |
Justify Left | 左揃え | 2行目 |
![]() |
Justify Center | センター揃え | 2行目 |
![]() |
Justify Right | 右揃え | 2行目 |
![]() |
Justify Full | 両端揃え | 2行目 |
![]() |
Directionality | 右寄せ・左寄せ | 2行目 |
![]() |
Indent | 字下げ(段落などに対してpadding-left: 30px;が適用される) | 2行目 |
![]() |
Outdent | 字下げ解除(30pxごと) | 2行目 |
![]() |
Bullet List | 順序なしのリスト作成 | 2行目 |
![]() |
Numbered List | 番号付のリスト作成 | 2行目 |
![]() |
Subscript | 下付き文字 | 2行目 |
![]() |
Superscript | 上付き文字 | 2行目 |
| アイコン | 名前 | 説明 | 分類 |
|---|---|---|---|
![]() |
Tables | テーブル操作 | 3行目 |
| アイコン | 名前 | 説明 | 分類 |
|---|---|---|---|
![]() |
Undo | 元に戻る | 4行目 |
![]() |
Redo | (元に戻る後)やり直し | 4行目 |
![]() |
Preview | プレビュー | 4行目 |
![]() |
Search Replace | 検索・検索/置き換え | 4行目 |
![]() |
Help | JCEヘルプ | 4行目 |
![]() |
Advanced Link | リンクの挿入/編集(高機能) | 4行目 |
![]() |
Unlink | リンク解除 | 4行目 |
![]() |
Anchor | アンカーの挿入/編集 | 4行目 |
![]() |
Image Manager | イメージの挿入/編集(高機能) | 4行目 |
![]() |
Clipboard Actions | コピー・カット・ペースト | 4行目 |
![]() |
Paste | ペースト(Wordから・プレーンテキストとして・?) | 4行目 |
![]() |
Horizontal Rule | 水平線を挿入(
) |
4行目 |
![]() |
Read More | 「続きを読む」の挿入(
が挿入される) |
4行目 |
![]() |
Character Map | 特殊文字の挿入 | 4行目 |
![]() |
Emotions | 顔文字の挿入 | 4行目 |
使う人は使うかもしれないけど…まああんまり使わないかな〜みたいなボタン群
| アイコン | 名前 | 説明 | 分類 |
|---|---|---|---|
![]() |
Advanced Code Editor | 高度なコードエディタ | 保留 |
![]() |
Layers | レイヤー操作 | 保留 |
![]() |
Font BackColour | テキストの背景色を指定 | 保留 |
![]() |
Code Cleanup | コードのクリーンアップ | 保留 |
![]() |
Non-Breaking | nbsp文字を挿入 | 保留 |
![]() |
Remove Format | フォーマット削除 | 保留 |
![]() |
Visual Aid | ガイドライン表示/非表示 | 保留 |
![]() |
Visual Characters | 制御文字表示のON/OFF | 保留 |
![]() |
XHTML Xtras | XHTML Xtras | 保留 |
使う人は使うかもしれないけど…自分はあんまり使わないな〜ってボタンです。あと、HTMLとかCSSとかよく分からない人が使用すると、かえってややこしくなりそうなボタン。
(高度なコードエディタ)は、ウィンドウ左上の[show/hide]を使えば良いかな〜って感じ。
(レイヤー操作)あたりは、扱いが良くわかってないので、個人的に使わない(使いこなせない(;.;))ので、除外しました。
(テキスト背景色)は多用しちゃうと見づらいことこの上ないので、個人的にあまり好きじゃないという理由だけで除外しちゃう。
まあ、これは使わないでしょ〜ってボタン群
これはまず使わないでしょ!ってボタンです。
| アイコン | 名前 | 説明 | 分類 |
|---|---|---|---|
![]() |
Image | イメージの挿入/編集 | 重複 |
![]() |
Link | リンクの挿入/編集 | 重複 |
![]() |
HTML | HTMLソースエディタ | 重複 |
| アイコン | 名前 | 説明 | 分類 |
|---|---|---|---|
![]() |
Fullscreen | 編集画面をフルスクリーンモードに切替 | 不要 |
![]() |
New Document | 新規ドキュメント(文書がクリアされちゃう) | 不要 |
![]() |
印刷 | 不要 | |
![]() |
Spell Checker | スペルチェッカー | 不要 |
「

は、

こっちを使えば良いかな〜」と言うことで、除外。
は、小さなモニターで作業する時などはあると便利なのかもしれませんが、とりあえず除外。
は、どういう時に使うのかわからない(deleteでいいんでないの?)ので除外。
も、どういう時にプリントしたくなるのかわからないので除外。
は、日本語で記事を書いてる以上あんまり意味が無いかな〜ってことで除外。
「ユーザ向け」のボタンは、私の周りの「HTMLとかCSSとかわからないけど、ワープロみたいに記事を書けるんでしょ?」って人向けに「とりあえず、このへんのボタンを上手に使えば、HTMLとかわからなくても、とりあえずなんとなくカタチになるからやってみな〜!」的なボタン達でもあります。
もちろん、使う人それぞれなのは言うまでもありません。
ちなみに、私は「リンク作成」「イメージ挿入」「テーブル操作」以外のボタンはほとんど使ってない(使えない?)ので、こんな感じで使ってます。。
基本的に記事を書く際に、ほとんど手の込んだ事をしてないからこのぐらいで充分なのです(・_・、)
ユーザーがアクセスできる場所(imagesディレクトリ)を指定する
記事作成時に、投稿ユーザーがテキストだけで絶対に画像を扱わないのであれば、以下の設定は不要です。しかし、まあそんなことは無いでしょう。エディタでイメージを挿入する際に、デフォルト設定のままだと、イメージマネージャなどでサイトの images/stories ディレクトリにアクセスする事になります。イメージマネージャは images/stories 内の画像ファイルなどを削除しちゃったりもできてしまいます。そこで、できることならユーザーがアクセスできる場所を決めておいて、それ以外の場所に画像ファイルをアップロードしたり、画像を削除したりできないようにしておけば、もしもユーザーが間違って画像ファイルを削除してしまったとしても、サイト全体に影響を及ぼすような事態は避けられるかもしれません。
ユーザ毎のディレクトリを自動的に作成されるようにしておくやり方
- JCEグループ: [編集] 画面の エディタパラメータ >> プラグインオプション にある「ファイルディレクトリパス」に「 images/stories/$username 」と入力する。
これで、このJCEグループが適用されているユーザーがイメージマネージャーを初めて使用する時に、そのユーザー名と同名のディレクトリが「images/stories」内に作成されます。作成されたディレクトリがこのユーザーのイメージマネージャーでのルートディレクトリになり、そこ以外のディレクトリにはアクセスできないようになってます。
あらかじめユーザ用のディレクトリを用意しておくやり方
- images/stories ディレクトリ内に任意のディレクトリを新規に作成します。(今回は仮に「user_a」というディレクトリ名にします。)
- JCEグループ: [編集] 画面の プラグインパラメータ >> イメージマネージャ >> 標準 にある「ファイルディレクトリパス」に「images/stories/user_a」と入力する。
- 必要に応じて「アップロードファイルサイズ (KB)」あたりも指定しておきます。
| < 前 | 次 > |
|---|











































